image.png
左边是stats.js库，用来显示帧率。
右上角的是dat.GUI库的效果。用处非常多。非常方便调试。使用也非常简单。
-
stats库，网络下载js文件。
body中添加一个div。<div id="Stats-output"></div>
js中代码
var stats = initStats();function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
还需要在动画函数中不停的更新
stats.update(); dat.GUI.js的使用。后来发现新版本可以直接使用中文定义变量。使用起来也比较简单。
实时鉴定变量的值并显示.linten()。
var controlsgui = new function () {
this.剩余立方体数量 = cubeNum-ctimes;
};
var gui = new dat.GUI();
gui.add(controlsgui,'剩余立方体数量').listen();
效果如下：
图片.png
全部代码
<div id="Stats-output"></div>
<script type="text/javascript">
var stats = initStats();
var controls = new function () {
this.rx = 0;
this.rz = 0;
};
var gui = new dat.GUI();
gui.add(controls,'rx',-20,20,"X轴位移");
gui.add(controls,'rz',-20,20,"Y轴位移");
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(0,30,40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xCCCCCC);
renderer.shadowMapEnabled =true;
//
var planeGeometry = new THREE.PlaneGeometry(50,16,1,1);
var planeMaterial = new THREE.MeshLambertMaterial({color:0xCCCCCC})
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.position.set(0,0,0);
plane.receiveShadow = true;
plane.rotation.x = -0.5*Math.PI;
scene.add(plane);
//
var cubeGeometry = new THREE.BoxGeometry(8,8,8);
var array = [];
for(var i=0;i<6;i++){
array.push(new THREE.MeshBasicMaterial({color:0xFFFFFF*Math.random()}))
}
var cubeMaterial = new THREE.MeshFaceMaterial(array);
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.set(16,4,0);
cube.castShadow = true;
scene.add(cube);
//
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({
color:0xFFFFFF*Math.random()
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(0,4,0);
sphere.castShadow = true;
scene.add(sphere);
//
var sphereMaterial2 = new THREE.MeshNormalMaterial({
wireframe:true
});
var sphere2 = new THREE.Mesh(sphereGeometry,sphereMaterial2);
sphere2.position.set(8,4,0);
sphere2.castShadow = true;
scene.add(sphere2);
var ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-60,80,40);
spotLight.castShadow = true;
spotLight.target = plane;
scene.add(spotLight);
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
var sAngle = 0;
function run() {
stats.update();
cube.rotation.y += 0.01;
sAngle+=1;
sphere.position.x = controls.rx;
sphere.position.z = controls.rz;
sphere2.position.x =8*Math.sin(sAngle/180*Math.PI);
sphere2.position.z =8*Math.cos(sAngle/180*Math.PI);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run();
function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
</script>
