當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

three.js之性能监视器

發布時間：2024/4/17 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 three.js之性能监视器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Three框架</title><script src="../static/three.js-master/build/three.js"></script><script src="../static/three.js-master/examples/js/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 = window.innerWidth;height = window.innerHeight;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.domElement.style.position = 'absolute'; // 樣式，坐標stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById('canvas-frame').appendChild(stats.domElement); // 添加到canvas-frame }var camera; // 攝像機function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);camera.position.x = 0;camera.position.y = 0;camera.position.z = 800;camera.up.x = 0;camera.up.y = 1;camera.up.z = 0;camera.lookAt(0, 0, 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 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(); // 調用stats.update()函數來統計時間和幀數}</script></head><body οnlοad="threeStart();"><div id="canvas-frame"></div></body> </html>

性能監視器是three.js里面的一個類：

var stats = new Stats(); stats.setMode(1); // 0: fps, 1: ms // 將stats的界面對應左上角 stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild( stats.domElement ); setInterval( function () {stats.begin();// 你的每一幀的代碼 stats.end(); }, 1000 / 60 );

1、setMode函數

參數為0的時候，表示顯示的是FPS界面，參數為1的時候，表示顯示的是MS界面。

2、stats的domElement

stats的domElement表示繪制的目的地（DOM），波形圖就繪制在這上面。

3、stats的begin函數

begin，在你要測試的代碼前面調用begin函數，在你代碼執行完后調用end()函數，這樣就能夠統計出這段代碼執行的平均幀數了。

附帶three.js代碼，點擊下載

附帶status.min.js代碼，點擊下載

轉載于:https://www.cnblogs.com/aaronthon/p/10980865.html

總結

以上是生活随笔為你收集整理的three.js之性能监视器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。