1.下載three.js的源碼包後，文件夾結構如下：
2.在【three.js第一課】的代碼基礎上，引入OrbitControls.js文件，此文件主要用於 對鼠標的操作。
該文件位置：在文件結構中
找到【examples】文件夾，進入；
找到其中的【js】文件夾，進入；
找到其中的【controls】文件夾，進入後即可找到【OrbitControls.js】文件；
我的引入文件如下：
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
3.在【three.js第二課】代碼中加入：
//軌道控制 鏡頭的移動
var controls = new THREE.OrbitControls(camera,renderer.document);
4.預覽即可。
【長按鼠標左鍵拖動】：旋轉物體
【長按鼠標右鍵拖動】：移動物體
【滑動鼠標滾輪】：放大縮小物體
由於【three.js第二課】代碼中物體會自動旋轉，若要停止，只需要將一下代碼註釋即可：
//邏輯
var update=function(){
//物體隨着XY軸旋轉
//cube.rotation.x +=0.01;//註釋，停止自轉
//cube.rotation.y += 0.005;//註釋，停止自轉
}
5.整體代碼:
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:0;
}
canvas{
width:100%;
height:100%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//創建場景
//創建一個攝像機對象
var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
//創建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//渲染到瀏覽器
//加入事件監聽器,窗口自適應
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
//軌道控制 鏡頭的移動
var controls = new THREE.OrbitControls(camera,renderer.document);
//創建形狀 BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
var geometry1 = new THREE.BoxGeometry(1,1,1);
//創建材料 wireframe是否使用線條
var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
//將材料和形狀結合
var cube = new THREE.Mesh(geometry,material);
//加入場景中
scene.add(cube);
camera.position.z=3;//設置相機的位置
//邏輯
var update=function(){
//物體隨着XY軸旋轉
cube.rotation.x +=0.01;
cube.rotation.y += 0.005;
}
//繪畫渲染
var render=function() {
renderer.render(scene,camera);
}
//循環運行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循環開始
</script>
</body>
</html>
