`

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

threejsstats 
阅读更多
  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>  
分享到：
| 如何动态改变Highcharts图表的大小
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    blender导出Three.js(.js)插件

    为了确保最佳的性能和兼容性，开发者可能需要密切关注Three.js的更新，适时更新导出工具，或者考虑使用社区维护的更新版本插件，如`blenderio-exporter-threejs`，这是一个更活跃的项目，持续跟进Three.js的最新进展...

    three.js 源码及各种插件

    Three.js是一个广泛使用的JavaScript库，用于在Web浏览器中创建3D图形。它提供了丰富的API和功能，使得开发者能够轻松构建复杂的三维场景。 描述中的"及其各种插件源码"进一步确认了这个压缩包中包含了Three.js的...

    Three.js引擎开发：Three.js渲染技术-（10）.Three.js性能优化.docxThree.js引擎开发：Three.js渲染技术-（11）.Three.js后处理效果.docxT

    Three.js引擎开发：Three.js渲染技术_（10）.Three.js性能优化.docx Three.js引擎开发：Three.js渲染技术_（11）.Three.js后处理效果.docx Three.js引擎开发：Three.js渲染技术_（12）.Three.js加载外部模型.docx ...

    three.min.js 最全的版本

    "three.min.js"是这个库的压缩版，通常用于生产环境，因为它具有较小的文件大小和优化过的代码，从而提高网页加载速度和性能。在这个“最全的版本”中，我们可能找到了Three.js的所有功能和模块，这对于开发者来说是...

    三维模型-three.js-PCD模型文件，用于three.js显示pcd文件

    在三维可视化领域，Three.js是一个非常流行的JavaScript库，它允许开发者在Web浏览器中创建和展示复杂的3D模型。本资源是关于使用Three.js处理PCD（Point Cloud Data）模型文件的，这是一种常见的3D点云数据格式。在...

    使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip

    使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...

    Blender导出ThreeJs(.json)文件插件

    总的来说，"Blender导出ThreeJs(.json)文件插件"是连接Blender和Three.js之间的桥梁，它简化了3D模型在Web应用中的使用。对于那些想要在网页上展示精美3D内容的开发者来说，这是一个不可或缺的工具。通过熟练掌握这...

    three.js跳动的火焰 流动的河

    这可能涉及到使用three.js的基本元素和方法，例如创建几何形状、应用纹理、以及通过时间来改变对象的属性以产生动态效果。 关于标签"three.js"，我们可以推断这个项目完全基于这个库构建。three.js提供了一系列功能...

    Three.js模型包

    Three.js 是一个非常流行的JavaScript库，专用于在Web浏览器中创建和展示三维图形。它利用 WebGL 技术，使得在网页上实现交互式3D视觉效果成为可能，无需用户安装任何插件。这个"Three.js模型包"包含了各种示例使用...

    three.js加载json三维模型.zip

    在三维Web开发领域，Three.js是一个非常流行的JavaScript库，它为浏览器提供了强大的3D图形渲染功能。本主题将深入探讨如何使用Three.js加载JSON格式的三维模型，以及与BIM（建筑信息模型）相关的应用。 一、Three....

    Three.js引擎开发：Three.js输入与交互系统-（10）.Three.js鼠标与触摸屏交互.docxThree.js引擎开发：Three.js输入与交互系统-（11）.Three.js键盘

    Three.js引擎开发：Three.js输入与交互系统_（16）.Three.js性能优化与最佳实践.docx Three.js引擎开发：Three.js输入与交互系统_（17）.Three.js高级交互技术.docx Three.js引擎开发：Three.js输入与交互系统_（18...

    three.js开发必备（内附开发指南和three.js多版本）

    这份PDF文档应该详细介绍了three.js的基本概念、API使用方法以及如何构建3D场景。three.js是一个基于WebGL的JavaScript库，它允许开发者在网页上创建交互式的3D图形。通过这份指南，你可以了解到如何设置场景、添加...

    Three.js视频教程源码.rar

    本教程围绕"Three.js视频教程源码.rar"展开，深入探讨Three.js的核心概念、使用技巧及实战应用。 一、Three.js基础知识 1. WebGL基础：Three.js是WebGL的抽象层，理解WebGL的基本原理和语法是学习Three.js的前提。...

    three. js的人体解剖图.zip

    Three.js 是一个基于 WebGL 的 JavaScript 库，它为Web开发人员提供了一个在浏览器中创建3D图形的强大工具。这个“three.js的人体解剖图”压缩包，很显然是一个利用Three.js库来展示人体结构的3D可视化项目。下面...

    Three.js与arcgis的交互与渲染

    在IT行业中，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。而ArcGIS则是Esri公司的一款强大的地理信息系统（GIS），用于处理、分析和展示地理数据。当我们谈论“Three.js与ArcGIS的交互与...

    three.js 智慧城市模型

    Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建三维图形和动画，它在构建智慧城市模型中扮演了核心角色。本文将深入探讨如何利用 three.js 来创建智慧城市的虚拟表示，并介绍与之相关的技术知识点...

    基于three.js + canvas实现爱心代码+播放器效果.zip

    基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于three.js + canvas实现爱心代码+播放器效果.zip 基于...

    Three.js + Mapbox 实现泛光效果

    Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + ...

    Three.js-入门指南(带书签).pdf

    初学者应该从头到尾按顺序阅读，以便系统地掌握Three.js的使用方法；而对于已经具备一定基础的读者，则可以跳过入门章节，直接阅读自己感兴趣的部分。在学习过程中，读者可以通过书中的实例代码来加深理解，所有代码...

    threejs-inspector, 用于调试 three.js的Chrome devtool扩展.zip

    threejs-inspector, 用于调试 three.js的Chrome devtool扩展 Three.js-检查器three.js 检查器是 Chrome devtool的扩展名。 它允许你在网页中查看 Three.js 场景。 你可以从 Chrome 网上商店安装 Three.js Inspector ...

Magicbox
Global site tag (gtag.js) - Google Analytics