首页 > 代码库 > three.js加入监控

three.js加入监控

2024-08-18 07:35:37   219人阅读

    <!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>

技术分享

three.js加入监控


联系
我们