three.js自带一个dat.gui.js，可以方便地对一个模型创建可视化操作界面，如图：
但有时候界面的风格和整体不搭，而且这界面修改起来挺麻烦。通过对模型的属性的了解，我们是可以对模型进行参数面板的定制的。
前期准备：three.js，jquery.js，jquery-ui.js，为了美观点，可以再下载个bootstrap包导入。
准备完成，我们就可以开始了。这里举个简单的例子：
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的一个梨子</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/jquery-ui.min.css">
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body>
<!-- 放置主场景 -->
<div id="output">
</div>
<!-- 放置模型参数界面 -->
<div id="cube-ui">
<button type="button" class="btn btn-default cube-ui_button"><p>折叠收缩</p></button>
<div class="panel panel-default cube-ui_cube">
<div class="cube-ui_cube_depth">
<p align=right>长度：</p>
<div class="cube-ui_slider" id="cube-depth-slider"></div>
<input type="text" id="cube-depth-input" value="0"/>
</div>
<div class="cube-ui_cube_width">
<p align=right>宽度：</p>
<div class="cube-ui_slider" id="cube-width-slider"></div>
<input type="text" id="cube-width-input" value="0"/>
</div>
<div class="cube-ui_cube_height">
<p align=right>高度：</p>
<div class="cube-ui_slider" id="cube-height-slider"></div>
<input type="text" id="cube-height-input" value="0"/>
</div>
</div>
</div>
<script type="text/javascript" src="js/cubeUI.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
css部分
body {
margin: 0;
overflow: hidden;
}
#cube-ui{
position:absolute;
z-index:1;
right:0;
top:0;
display:block;
}
.cube-ui_button{
position:absolute;
right:0;
width: 250px;
height: 30px;
margin: 0 0 2px 0;
display: block;
}
.cube-ui_button p{
color:#000;
}
.cube-ui_cube{
width:100%;
height:30px;
margin:5px 0 0 0;
}
.geometry-parameter p{
position:absolute;
right:182px;
margin:5px 0 0 0;
width:65px;
}
.geometry-parameter .huadongtiao{
position:absolute;
right:50px;
margin:8px 0 0 0;
width:130px;
}
.geometry-parameter input{
position:absolute;
right:5px;
margin:4px 0 0 0;
width:40px;
height:20px;
text-align:center
}
#cube-ui .panel{
position:absolute;
top:35px;
right:0;
height: 120px;
width: 250px;
display: none;
}
js部分
这里我们创建两个js（init.js，cubeUI.js）。init.js用来创建场景及模型，cubeUI.js实现参数面板对模型的操作。
init.js:
var scene,camera,webGLRenderer,spotLight;
function init(){
//场景
scene = new THREE.Scene();
//相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(-20,30,40);
camera.lookAt(new THREE.Vector3(10, 0, 0));
//渲染器
webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
document.getElementById("output").appendChild(webGLRenderer.domElement);
//灯光
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
//创建一个立方体
var cube = createMesh(new THREE.BoxGeometry(10, 10, 10));
cube_ui(cube);
scene.add(cube);
render();
}
window.onload = init;
//渲染
function render(){
webGLRenderer.render(scene, camera);
}
//给立方体附加材质
function createMesh(geom){
var meshMaterial = new THREE.MeshNormalMaterial();
meshMaterial.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geom, meshMaterial);
mesh.position.set(0,0,0);
return mesh;
}
cubeUI.js:
//折叠收缩立方体UI
$(document).ready(function(){
$(".btn").click(function(){
$(".panel").slideToggle("slow");
return false;
});
});
var objUI = [];
//存储立方体参数ui中的组件id
var cubeUiParameters = {
depth_slider: "cube-depth-slider",
width_slider: "cube-width-slider",
height_slider: "cube-height-slider",
depth_input: "cube-depth-input",
width_input: "cube-width-input",
height_input: "cube-height-input",
};
//立方体的相关变量
var cubeParameters = {
depth: 0,
width: 0,
height: 0,
};
//通过改变input中的值，改变模型
$("#"+cubeUiParameters.depth_input+",#"+cubeUiParameters.width_input+",#"+cubeUiParameters.height_input).change(function(){
//取到input中的值
cubeParameters.depth = document.getElementById(cubeUiParameters.depth_input).value;
cubeParameters.width = document.getElementById(cubeUiParameters.width_input).value;
cubeParameters.height = document.getElementById(cubeUiParameters.height_input).value;
//将取到的值赋给滑动条
$("#"+cubeUiParameters.depth_slider).slider("value",cubeParameters.depth);
$("#"+cubeUiParameters.width_slider).slider("value",cubeParameters.width);
$("#"+cubeUiParameters.height_slider).slider("value",cubeParameters.height);
//更新模型
updateCube(cubeParameters.width,cubeParameters.height,cubeParameters.depth);
});
//初始化滑动条的输入框的值
function cube_ui(cube){
objUI = [];
objUI.push(cube);
//取得立方体的长、宽、高
document.getElementById(cubeUiParameters.depth_input).value = cube.geometry.parameters.depth;
document.getElementById(cubeUiParameters.width_input).value = cube.geometry.parameters.width;
document.getElementById(cubeUiParameters.height_input).value = cube.geometry.parameters.height;
cubeParameters.depth = cube.geometry.parameters.depth;
cubeParameters.width = cube.geometry.parameters.width;
cubeParameters.height = cube.geometry.parameters.height;
//生成滑动条
$("#"+cubeUiParameters.depth_slider+",#"+cubeUiParameters.width_slider+",#"+cubeUiParameters.height_slider).slider({
min:0,
max:500,
step:1,
value:0,
slide:function(event,ui){
$(this).slider("value",ui.value);
cube_value();
}
});
//给滑动条赋值
$("#"+cubeUiParameters.depth_slider).slider("value",cubeParameters.depth);
$("#"+cubeUiParameters.width_slider).slider("value",cubeParameters.width);
$("#"+cubeUiParameters.height_slider).slider("value",cubeParameters.height);
}
//取到滑条的值赋给input框并更新立方体
function cube_value(){
cubeParameters.depth = $("#"+cubeUiParameters.depth_slider).slider("value");
cubeParameters.width = $("#"+cubeUiParameters.width_slider).slider("value");
cubeParameters.height = $("#"+cubeUiParameters.height_slider).slider("value");
document.getElementById(cubeUiParameters.depth_input).value = cubeParameters.depth;
document.getElementById(cubeUiParameters.width_input).value = cubeParameters.width;
document.getElementById(cubeUiParameters.height_input).value = cubeParameters.height;
updateCube(cubeParameters.width,cubeParameters.height,cubeParameters.depth);
}
//创建改变参数的立方体
function updateCube(width,height,depth){
//删除改变前模型
objUI[0].geometry.dispose();
scene.remove(objUI[0]);
objUI = [];
var cube = createMesh(new THREE.CubeGeometry(width, height, depth));
cube.position.set(0,0,0);
objUI.push(cube);
scene.add(cube);
render();
}
至此，我们就完成了我们的目标，让我们来看看效果吧：
