概述

性能監視是監視threejs運行中的刷新頻率，要使用到threejs提供的stat.js，可視化控制是在窗口中顯示一個可見的控制框，可以通過鼠標改變其中的值，達到改變threejs對象參數的目的，需要使用到dat.gui.js

性能監視

引入stat.js

<script type="text/javascript" src="../libs/stats.js"></script>

文件可在這里下載

創建并初始化stat

function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// 放在左上角stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);return stats;}

在渲染函數中更新狀態

function renderScene() {stats.update();// 做些操作requestAnimationFrame(renderScene);renderer.render(scene, camera);}

可視化控制

引入dat.gui.js

<script type="text/javascript" src="../libs/dat.gui.js"></script>

文件可在這里下載

創建一個控制對象

var controls = new function () {this.rotationSpeed = 0.02;this.bouncingSpeed = 0.03;};

創建GUI對象，并添加控制對象

var gui = new dat.GUI();gui.add(controls, 'rotationSpeed', 0, 0.5);gui.add(controls, 'bouncingSpeed', 0, 0.5);

添加到gui后，在頁面上改動參數，也會影響到controls的值

在渲染函數中是用控制對象的值

function render() {// 使用控制對象的值cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// 渲染requestAnimationFrame(render);renderer.render(scene, camera);}

總結

以上是生活随笔為你收集整理的Threejs性能监视和可视化控制的全部內容，希望文章能夠幫你解決所遇到的問題。

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