當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

three.js之性能监视器

發(fā)布時間：2024/4/17 编程问答 27 豆豆

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

<!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; // 性能監(jiān)視器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(); // 創(chuàng)建一個性能監(jiān)視器stats.domElement.style.position = 'absolute'; // 樣式，坐標(biāo)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); // 環(huán)境光源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); // 構(gòu)造圓柱體var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); // 構(gòu)造表面mesh = new THREE.Mesh( geometry,material); // 創(chuàng)建模型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(); // 調(diào)用stats.update()函數(shù)來統(tǒng)計時間和幀數(shù)}</script></head><body οnlοad="threeStart();"><div id="canvas-frame"></div></body> </html>

性能監(jiān)視器是three.js里面的一個類：

var stats = new Stats(); stats.setMode(1); // 0: fps, 1: ms // 將stats的界面對應(yīng)左上角 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函數(shù)

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

2、stats的domElement

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

3、stats的begin函數(shù)

begin，在你要測試的代碼前面調(diào)用begin函數(shù)，在你代碼執(zhí)行完后調(diào)用end()函數(shù)，這樣就能夠統(tǒng)計出這段代碼執(zhí)行的平均幀數(shù)了。

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/aaronthon/p/10980865.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。