• threejs path controls example html


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>three.js webgl - path controls</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <style>
                body {
                color: #000;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;
    
                background-color: #fff;
                margin: 0px;
                overflow: hidden;
                }
    
                #info {
                        color:#000;
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
    
                }
    
                a { color: red; }
    
            </style>
        </head>
    
        <body>
            <div id="container"></div>
            <div id="info">
                <a href="http://threejs.org" target="_blank">three.js</a> - path controls example</br>
                mouse look around
            </div>
    
            <script src="../build/three.min.js"></script>
    
            <script src="js/controls/PathControls.js"></script>
    
            <script src="js/Detector.js"></script>
            <script src="js/libs/stats.min.js"></script>
    
    
            <script>
    
                if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
    
                var container, stats;
    
                var camera, controls, scene, renderer;
    
                var cross;
    
                var clock = new THREE.Clock();
    
                init();
                animate();
    
                function init() {
    
                    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    
                    controls = new THREE.PathControls( camera );
    
                    controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
                    controls.duration = 28
                    controls.useConstantSpeed = true;
                    //controls.createDebugPath = true;
                    //controls.createDebugDummy = true;
                    controls.lookSpeed = 0.06;
                    controls.lookVertical = true;
                    controls.lookHorizontal = true;
                    controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
                    controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
                    controls.lon = 180;
    
                    controls.init();
    
                    // world
    
                    scene = new THREE.Scene();
                    scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
    
                    scene.add( controls.animationParent );
    
                    var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
                    var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );
    
                    for ( var i = 0; i < 500; i ++ ) {
    
                        var mesh = new THREE.Mesh( geometry, material );
                        mesh.position.x = ( Math.random() - 0.5 ) * 1000;
                        mesh.position.y = ( Math.random() - 0.5 ) * 1000;
                        mesh.position.z = ( Math.random() - 0.5 ) * 1000;
                        mesh.updateMatrix();
                        mesh.matrixAutoUpdate = false;
                        scene.add( mesh );
    
                    }
    
                    // lights
    
                    light = new THREE.DirectionalLight( 0xffffff );
                    light.position.set( 1, 1, 1 );
                    scene.add( light );
    
                    light = new THREE.DirectionalLight( 0x002288 );
                    light.position.set( -1, -1, -1 );
                    scene.add( light );
    
                    light = new THREE.AmbientLight( 0x222222 );
                    scene.add( light );
    
    
                    // renderer
    
                    renderer = new THREE.WebGLRenderer( { antialias: false } );
                    renderer.setClearColor( scene.fog.color, 1 );
                    renderer.setSize( window.innerWidth, window.innerHeight );
    
                    container = document.getElementById( 'container' );
                    container.appendChild( renderer.domElement );
    
                    // stats
    
                    stats = new Stats();
                    stats.domElement.style.position = 'absolute';
                    stats.domElement.style.top = '0px';
                    stats.domElement.style.zIndex = 100;
                    container.appendChild( stats.domElement );
    
                    //
    
                    window.addEventListener( 'resize', onWindowResize, false );
    
                    // start animation
    
                    controls.animation.play( true, 0 );
    
                }
    
                function onWindowResize() {
    
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
    
                    renderer.setSize( window.innerWidth, window.innerHeight );
    
                    controls.handleResize();
    
                }
    
                function animate() {
    
                    requestAnimationFrame( animate );
    
                    render();
                    stats.update();
    
                }
    
                function render() {
    
                    var delta = clock.getDelta();
    
                    THREE.AnimationHandler.update( delta );
    
                    controls.update( delta );
                    renderer.render( scene, camera );
    
                }
    
    
            </script>
    
        </body>
    </html>
  • 相关阅读:
    C# 中字符串转换成日期
    c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.ExitThread(); System.Environment.Exit(0);
    c#获取程序版本号
    分分钟用上C#中的委托和事件
    【转载】C# 中的委托和事件(详解:简单易懂的讲解)
    C#什么时候需要使用构造函数
    15、生命周期-BeanPostProcessor-后置处理器
    13、生命周期-InitializingBean和DisposableBean
    11、组件注册-使用FactoryBean注册组件
    12、生命周期-@Bean指定初始化和销毁方法
  • 原文地址:https://www.cnblogs.com/shenwenkai/p/7115555.html
Copyright © 2020-2023  润新知