three.js 性能插件stats简单用法

来源：互联网发布：淘宝关键词排列顺序编辑：程序博客网时间：2024/05/17 08:59

原出处：http://hewebgl.com/article/getarticle/58

话说，原出处代码居然还有语法错误，真是坑爹了，简单修改了，不多说，上代码，想说的都在注释里。

html5-canvas版本：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Three框架</title>        <script type="text/javascript" script src="three.js"></script>        <script type="text/javascript" script src="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.setClearColorHex(0xFFFFFF, 1.0);                //stats对象初始化                stats = new Stats();                stats.domElement.style.position = 'absolute'; //绝对坐标                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>

随手顺便改了个webgl格式的程序，本想对比下性能，奈何都能运行在60帧，对比失败了。

<!DOCTYPE html><html lang="en"><html>    <head>        <meta charset="UTF-8">        <title>Three框架</title>        <script type="text/javascript" script src="three.js"></script>        <script type="text/javascript" script src="stats.min.js"></script>        <style type="text/css">            div#canvas-frame {                border: none;                cursor: pointer;                width: 100%;                height: 600px;                background-color: #EEEEEE;            }        </style>    </head>    <body>        <script type = "text/javascript">            var renderer;            var stats;            function initThree() {                renderer = new THREE.WebGLRenderer({ antialias : true });                renderer.setSize(1000, 800);                document.body.appendChild (renderer.domElement );                renderer.setClearColorHex(0xFFFFFF, 1.0);                //stats对象初始化                stats = new Stats();                stats.domElement.style.position = 'absolute'; //绝对坐标                stats.domElement.style.left = '0px';// (0,0)px,左上角                stats.domElement.style.top = '0px';                document.body.appendChild( stats.domElement );            }            var camera;            function initCamera() {                camera = new THREE.PerspectiveCamera(45, 1000 / 800, 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 animation()            {                mesh.position.z+=1;                renderer.render(scene, camera);                requestAnimationFrame(animation);                stats.update();//这个函数真好用            }             !function threeStart() {                initThree();                initCamera();                initScene();                initLight();                initObject();                animation();            }();        </script>    </body></html>

0 0