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

编程语言 2018-05-09 21:39:30 阅读次数: 2
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Three框架</title>  
  6.         <script type="text/javascript" script src="three.js"></script>  
  7.         <script type="text/javascript" script src="stats.min.js"></script>  
  8.   
  9.         <style type="text/css">  
  10.             div#canvas-frame {  
  11.                 border: none;  
  12.                 cursor: pointer;  
  13.                 width: 100%;  
  14.                 height: 600px;  
  15.                 background-color: #EEEEEE;  
  16.             }  
  17.         </style>  
  18.   
  19.         <script>  
  20.             var renderer;  
  21.             var stats;  
  22.             function initThree() {  
  23.                 width = document.getElementById('canvas-frame').clientWidth;  
  24.                 height = document.getElementById('canvas-frame').clientHeight;  
  25.                 renderer = new THREE.WebGLRenderer({ antialias : true });  
  26.                 renderer.setSize(width, height);  
  27.                 document.getElementById('canvas-frame').appendChild(renderer.domElement);  
  28.                 renderer.setClearColorHex(0xFFFFFF, 1.0);  
  29.   
  30.                 //stats对象初始化  
  31.                 stats = new Stats();  
  32.                 stats.domElement.style.position = 'absolute'; //绝对坐标  
  33.                 stats.domElement.style.left = '0px';// (0,0)px,左上角  
  34.                 stats.domElement.style.top = '0px';  
  35.                 document.getElementById('canvas-frame').appendChild(stats.domElement);  
  36.             }  
  37.   
  38.             var camera;  
  39.             function initCamera() {  
  40.                 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);  
  41.                 camera.position.x = 0;  
  42.                 camera.position.y = 0;  
  43.                 camera.position.z = 600;  
  44.                 camera.up.x = 0;//camera.up 设置相机的倾斜角度，歪着拿相机，照片自然也不是水平的  
  45.                 camera.up.y = 0;  
  46.                 camera.up.z = 0;  
  47.                 camera.lookAt({ //镜头看着哪里呢？景物在动  
  48.                     x : 0,  
  49.                     y : 0,  
  50.                     z : 0  
  51.                 });  
  52.             }  
  53.   
  54.             var scene;  
  55.             function initScene() {  
  56.                 scene = new THREE.Scene();  
  57.             }  
  58.   
  59.             var light;  
  60.             function initLight() {  
  61.                 light = new THREE.PointLight(0x00FF00);  
  62.                 light.position.set(0, 0,300);  
  63.                 scene.add(light);  
  64.             }  
  65.   
  66.             var cube;  
  67.             var mesh;  
  68.             function initObject() {  
  69.               
  70.                 var geometry = new THREE.CylinderGeometry( 10,15,40);  
  71.                 var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  
  72.                 mesh = new THREE.Mesh( geometry,material);  
  73.                 mesh.position.x = 100;  
  74.                 mesh.position.y = 100;  
  75.                 mesh.position.z = 100;  
  76.                 scene.add(mesh);  
  77.      
  78.             }  
  79.   
  80.             function threeStart() {  
  81.                 initThree();  
  82.                 initCamera();  
  83.                 initScene();  
  84.                 initLight();  
  85.                 initObject();  
  86.                 animation();  
  87.             }  
  88.   
  89.             function animation()  
  90.             {  
  91.                 mesh.position.z+=1;  
  92.                 renderer.render(scene, camera);  
  93.                 requestAnimationFrame(animation);  
  94.                 stats.update();//这个函数真好用  
  95.             }  
  96.         </script>  
  97.     </head>  
  98.   
  99.     <body onload="threeStart();">  
  100.         <div id="canvas-frame"></div>  
  101.     </body>  
  102. </html>  
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <html>  
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title>Three框架</title>  
  7.         <script type="text/javascript" script src="three.js"></script>  
  8.         <script type="text/javascript" script src="stats.min.js"></script>  
  9.   
  10.         <style type="text/css">  
  11.             div#canvas-frame {  
  12.                 border: none;  
  13.                 cursor: pointer;  
  14.                 width: 100%;  
  15.                 height: 600px;  
  16.                 background-color: #EEEEEE;  
  17.             }  
  18.         </style>  
  19.     </head>  
  20.   
  21.     <body>  
  22.         <script type = "text/javascript">  
  23.             var renderer;  
  24.             var stats;  
  25.             function initThree() {  
  26.                 renderer = new THREE.WebGLRenderer({ antialias : true });  
  27.                 renderer.setSize(1000, 800);  
  28.                 document.body.appendChild (renderer.domElement );  
  29.                 renderer.setClearColorHex(0xFFFFFF, 1.0);  
  30.   
  31.                 //stats对象初始化  
  32.                 stats = new Stats();  
  33.                 stats.domElement.style.position = 'absolute'; //绝对坐标  
  34.                 stats.domElement.style.left = '0px';// (0,0)px,左上角  
  35.                 stats.domElement.style.top = '0px';  
  36.                 document.body.appendChild( stats.domElement );  
  37.             }  
  38.   
  39.             var camera;  
  40.             function initCamera() {  
  41.                 camera = new THREE.PerspectiveCamera(45, 1000 / 800, 1, 10000);  
  42.                 camera.position.x = 0;  
  43.                 camera.position.y = 0;  
  44.                 camera.position.z = 600;  
  45.                 camera.up.x = 0;//camera.up 设置相机的倾斜角度，歪着拿相机，照片自然也不是水平的  
  46.                 camera.up.y = 0;  
  47.                 camera.up.z = 0;  
  48.                 camera.lookAt({ //镜头看着哪里呢？景物在动  
  49.                     x : 0,  
  50.                     y : 0,  
  51.                     z : 0  
  52.                 });  
  53.             }  
  54.   
  55.             var scene;  
  56.             function initScene() {  
  57.                 scene = new THREE.Scene();  
  58.             }  
  59.   
  60.             var light;  
  61.             function initLight() {  
  62.                 light = new THREE.PointLight(0x00FF00);  
  63.                 light.position.set(0, 0,300);  
  64.                 scene.add(light);  
  65.             }  
  66.   
  67.             var cube;  
  68.             var mesh;  
  69.             function initObject() {  
  70.               
  71.                 var geometry = new THREE.CylinderGeometry( 10,15,40);  
  72.                 var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  
  73.                 mesh = new THREE.Mesh( geometry,material);  
  74.                 mesh.position.x = 100;  
  75.                 mesh.position.y = 100;  
  76.                 mesh.position.z = 100;  
  77.                 scene.add(mesh);  
  78.      
  79.             }  
  80.   
  81.             function animation()  
  82.             {  
  83.                 mesh.position.z+=1;  
  84.                 renderer.render(scene, camera);  
  85.                 requestAnimationFrame(animation);  
  86.                 stats.update();//这个函数真好用  
  87.             }  
  88.   
  89.              !function threeStart() {  
  90.                 initThree();  
  91.                 initCamera();  
  92.                 initScene();  
  93.                 initLight();  
  94.                 initObject();  
  95.                 animation();  
  96.             }();  
  97.         </script>  
  98.     </body>  
  99. </html>  

猜你喜欢

转载自xiangjinqi.iteye.com/blog/2377516
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
VS2017编译opensmile具体过程和遇到的问题
PowerEnglish——mini-story3总结
微信小程序 数据库获取字符串 在view中显示换行
Java静态代码块/构造代码块/构造函数/静态变量/成员变量(相关示例)
Keras使用tensorflowjs部署demo
window下用git连接Github
图象的全变分和去噪
LeetCode刷题笔记--119. Pascal's Triangle II
【Linux】进程间通信 - 管道
polyA|ribo-minus|differentiated cell|Genetic heterogeneity
每日归档
更多
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022