不论是处于特殊功能的需要，还是处于效果调试方便，我们可能都需要修改模型中的参数值。在Three.js中，谷歌提供了一个js库，即dat.GUI.js用于处理这种需求。 通过该库，我们就不需要通过手动修改源码来观察不同参数对模型的效果影响。
demo效果如下：
关键代码
入口文件：
function init() {
var stats = initStats();
var renderer = initRenderer();
var camera = initCamera();
var scene = new THREE.Scene();
var clock = new THREE.Clock();
initDefaultLighting(scene);
initModel()
initControls();
render();
draw(scene,renderer,camera);
function initModel() {
//辅助工具
var helper = new THREE.AxesHelper(900);
scene.add(helper);
// var map = new THREE.TextureLoader().load("./assets/jay.jag");
//外部盒子
// var material = new THREE.MeshLambertMaterial({
// // map: map
// color: 0xffffff,
// });
// material.transparent = true;
// material.opacity = 0.4;
//--------------------------------地板--------------------------
var planeGeometry = new THREE.PlaneGeometry(1000, 1000, 50, 50);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
planeMaterial.transparent = true;
planeMaterial.opacity = 0.2;
plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -6;
plane.position.z = 0;
//告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
// scene.add(PlaneSegs);
//--------------------------------地板end-----------------------
}
//初始化控制器
var obtControls; //定义控制器变量
function initControls() {
//定义控制器核心
obtControls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
// controls.addEventListener('change', render);
//以下都是为了满足各种需求的各种控制器配置参数
obtControls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性
obtControls.enableZoom = true; //是否允许缩放
obtControls.enablePan = true; //是否开启鼠标右键拖拽
obtControls.autoRotate = false; //是否允许自动旋转
obtControls.dampingFactor = 0.25; //动态阻尼系数：就是鼠标拖拽旋转灵敏度
obtControls.minDistance = 200; //设置相机距离原点的最近距离；
obtControls.maxDistance = 1000; //设置相机距离原点的最远距离；
}
//控制更新
function render() {
stats.update();
// fpControls.update(clock.getDelta());
obtControls.update(clock.getDelta());
requestAnimationFrame(render);
renderer.render(scene, camera)
}
}
模型文件
function draw(scene,renderer,camera) {
//方体
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({
color:0xffaaaa,
wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.x = 0; cube.position.y = 10; cube.position.z = 80;
cube.castShadow = true;
cube.onBeforeRender = function(){
this.rotation.x += 0.02;
this.rotation.y += 0.02;
this.rotation.z += 0.02;
}
scene.add(cube)
//球体
var sphereGeometry = new THREE.SphereGeometry(20,40,50);
var sphereMaterial = new THREE.MeshLambertMaterial({
color:0x777777,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow = true;
var step = 0;
sphere.onBeforeRender = function(){
step += 0.04;
sphere.position.x = 20 + (10*(Math.cos(step)));
sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
}
scene.add(sphere)
//添加dat.GUI调试控制
var controls = new function(){//以下关键
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
var gui = new dat.GUI();
gui.add(controls,'rotationSpeed',0,0.5);
gui.add(controls,'bouncingSpeed',0,0.5);
renderScene();
function renderScene(){
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
step += controls.bouncingSpeed;
sphere.position.x = 20 +(10*(Math.cos(step)));
sphere.position.y = 20 +(10*Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
renderer.render(scene,camera)
}
//地面
var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
var planeMaterial = new THREE.MeshPhongMaterial({
color:0x222222,
side: THREE.Double
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -5;
plane.position.z = 0
plane.receiveShadow = true;
scene.add(plane)
//灯光
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40,60,-10);
spotlight.castShadow = true
scene.add(spotlight);
}
该demo完整代码在这里：Link