dat.gui效果
dat.gui.png
stats库.png
1、stats.js库的使用。下载js文件，引入文件。
在body中添加一个div标签用于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,"相机角度");
gui.add(controls,'hAngle',0,90,"相机高度");
gui.add(controls,'addCube','添加立方体');
gui.add(controls,'removeCube','删除立方体');
gui.add(controls, 'outputObjects','打印场景中的物体');
gui.add(controls,'numberOfObjects','场景对象数量').listen(); //为什么第一次输出的数量比实际少一个呢？
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
