three.j绘制性能监控

来源：互联网发布：php将数组转换成字符串编辑：程序博客网时间：2024/04/29 02:15
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Three框架</title><script src="../js/Three.js"></script>        <script src="../js//Stats.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.setClearColorHex(0xFFFFFF, 1.0);stats=new Stats();stats.domElement.style.position='absolute';stats.domElement.style.left='0px';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.y = 1;                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.AmbientLight(0xFF0000);//                light.position.set(100, 100, 200);//                scene.add(light);                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( 100,150,400);                var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );                mesh = new THREE.Mesh( geometry,material);                mesh.position = new THREE.Vector3(0,0,0);                scene.add(mesh);            }            function threeStart() {                initThree();                initCamera();                initScene();                initLight();                initObject();                animation();            }            function animation()            {                //renderer.clear();                //camera.position.x =camera.position.x +1;mesh.position.x-=1;                renderer.render(scene, camera);                requestAnimationFrame(animation);                stats.update();            }</script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>
阅读全文
0 0