• 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>
  • 相关阅读:
    《安富莱嵌入式周报》第268期:2022.05.302022.06.05
    【脱机烧录】【实战技能】任何支持SWD接口的单片机都可以方便移植的SPI Flash烧写算法制作,含视频说明(20220530)
    【BSP视频教程】STM32H7视频教程第16期:DMA双缓冲实现32路脉冲并行同步控制(20220526)
    《安富莱嵌入式周报》第267期:2022.05.232022.05.29
    【DSP视频教程】DSP视频教程第8期:DSP库三角函数,C库三角函数和硬件三角函数的性能比较,以及与Matlab的精度比较(20220604)
    【Nginx】在windows中的详细安装部署教程
    生成日期时间
    四舍五入问题不用delphi round函数
    图新地球电力版|电网GIS系统可视化管理
    地质勘查中如何应用新设备技术提高勘查数据精度以及数据采集效率?
  • 原文地址:https://www.cnblogs.com/shenwenkai/p/7115555.html
Copyright © 2020-2023  润新知