three.js加入監控

weixin_34377065發表於2016-10-31
JS
    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>Three框架</title>  
            <script type="text/javascript" script src="libs/three.js"></script>  
            <script type="text/javascript" script src="libs/stats.min.js"></script>  
      
            <style type="text/css">  
                div#canvas-frame {  
                    border: none;  
                    cursor: pointer;  
                    width: 100%;  
                    height: 600px;  
                    background-color: #EEEEEE;  
                }  
            </style>  
      
            <script>  
                var renderer;  
                var stats;  
                function initThree() {  
                    width = document.getElementById('canvas-frame').clientWidth;  
                    height = document.getElementById('canvas-frame').clientHeight;  
                    renderer = new THREE.WebGLRenderer({ antialias : true });  
                    renderer.setSize(width, height);  
                    document.getElementById('canvas-frame').appendChild(renderer.domElement);  
                    renderer.setClearColor(0xFFFFFF, 1.0);  
      
                    
                    stats = new Stats();  //stats物件初始化  
                    stats.domElement.style.position = 'absolute'; //將stats物件加入到html網頁中,絕對座標  
                    stats.domElement.style.left = '0px';// (0,0)px,左上角  
                    stats.domElement.style.top = '0px';  
                    document.getElementById('canvas-frame').appendChild(stats.domElement);  
                }  
      
                var camera;  
                function initCamera() {  
                    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);  
                    camera.position.x = 0;  
                    camera.position.y = 0;  
                    camera.position.z = 600;  
                    camera.up.x = 0;//camera.up 設定相機的傾斜角度，歪著拿相機，照片自然也不是水平的  
                    camera.up.y = 0;  
                    camera.up.z = 0;  
                    camera.lookAt({ //鏡頭看著哪裡呢？景物在動  
                        x : 0,  
                        y : 0,  
                        z : 0  
                    });  
                }  
      
                var scene;  
                function initScene() {  
                    scene = new THREE.Scene();  
                }  
      
                var light;  
                function initLight() {  
                    light = new THREE.PointLight(0x00FF00);  
                    light.position.set(0, 0,300);  
                    scene.add(light);  
                }  
      
                var cube;  
                var mesh;  
                function initObject() {  
                  
                    var geometry = new THREE.CylinderGeometry( 10,15,40);  
                    var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  
                    mesh = new THREE.Mesh( geometry,material);  
                    mesh.position.x = 100;  
                    mesh.position.y = 100;  
                    mesh.position.z = 100;  
                    scene.add(mesh);  
         
                }  
      
                function threeStart() {  
                    initThree();  
                    initCamera();  
                    initScene();  
                    initLight();  
                    initObject();  
                    animation();  
                }  
      
                function animation()  
                {  
                    mesh.position.z+=1;  
                    renderer.render(scene, camera);  
                    requestAnimationFrame(animation);  
                    stats.update();//這個函式真好用  
                }  
            </script>  
        </head>  
      
        <body onload="threeStart();">  
            <div id="canvas-frame"></div>  
        </body>  
    </html>

相關文章