dat.gui效果
dat.gui.png
stats庫.png
1氓英、stats.js庫的使用。下載js文件盈蛮，引入文件。
在body中添加一個(gè)div標(biāo)簽用于stats路克。初始化和使用見下面代碼殴俱，記得要不斷更新。
<div id="Stats-output"></div>
var stats = initStats();
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.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
function run() {
stats.update();
requestAnimationFrame(run);
renderer.render(scene,camera);
}
function run() {
stats.update();
var allChildren = scene.children;
for(var i=5;i<allChildren.length;i++){
allChildren[i].rotation.y += 0.04;
}
camera.position.y = controls.hAngle;
camera.position.x = 40*Math.sin(controls.sAngle/180*Math.PI);
camera.position.z = 40*Math.cos(controls.sAngle/180*Math.PI);
camera.lookAt(scene.position);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run();
2抓狭、 dat.GUI庫的使用伯病。
var controls = new function () {
this.sAngle = 45;
this.hAngle = 40;
this.numberOfObjects = scene.children.length;
this.addCube = function () {
var cubeSize = Math.ceil((Math.random()*3));
var cubeGe = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);
var cubeMe = new THREE.MeshLambertMaterial({color:0xFFFFFF*Math.random()});
var cube = new THREE.Mesh(cubeGe,cubeMe);
cube.castShadow = true;
cube.name = "cube-" + scene.children.length;
cube.position.x = -25+Math.round(Math.random()*50);
cube.position.y = Math.round(Math.random()*10);
cube.position.z = -25+Math.round(Math.random()*50);
scene.add(cube);
this.numberOfObjects = scene.children.length;
}
this.removeCube = function () {
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length-1];
if(lastObject instanceof THREE.Mesh){
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
}
this.outputObjects = function () {
console.log(scene.children);
}
}
var gui = new dat.GUI();
gui.add(controls,'sAngle',-360,360,"相機(jī)角度");
gui.add(controls,'hAngle',0,90,"相機(jī)高度");
gui.add(controls,'addCube','添加立方體');
gui.add(controls,'removeCube','刪除立方體');
gui.add(controls, 'outputObjects','打印場景中的物體');
gui.add(controls,'numberOfObjects','場景對(duì)象數(shù)量').listen(); //為什么第一次輸出的數(shù)量比實(shí)際少一個(gè)呢？
function run() {
stats.update();
var allChildren = scene.children;
for(var i=5;i<allChildren.length;i++){
allChildren[i].rotation.y += 0.04;
}
camera.position.y = controls.hAngle;
camera.position.x = 40*Math.sin(controls.sAngle/180*Math.PI);
camera.position.z = 40*Math.cos(controls.sAngle/180*Math.PI);
camera.lookAt(scene.position);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run();
image.png
