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();
}
至此，我們就完成了我們的目標，讓我們來看看效果吧：
