1比原、下載THREE.JS的r125插佛，將需要用到的控件放在js文件夾，方便引用量窘。
單個天空盒需要用到的主要three.js與OrbitControls.js軌道控制器控件實現(xiàn)場景用鼠標交互雇寇，讓場景動起來，控制場景的旋轉(zhuǎn)蚌铜、平移锨侯，縮放。
2冬殃、實現(xiàn)單個天空盒的代碼結(jié)構(gòu)
three.js里必不可少的就是場景scene囚痴、相機camera、渲染器render审葬。
（1）定義全局變量scene深滚，camera,renderer與控制器controls奕谭。
var scene, camera, renderer;
var controls;
（2）初始化函數(shù)init()完成場景、相機痴荐、渲染器血柳、控制器的初始化。
//場景
scene = new THREE.Scene();
（注意：在單個天空盒的時候生兆，場景相機渲染器控制器等都可以在init函數(shù)內(nèi)完成难捌，但是在后面實現(xiàn)兩個天空盒之間的跳轉(zhuǎn)的時候，需要將相機鸦难、渲染器栖榨、控制器的初始化放在init外面完成初次初始化，否則相機的位置不能得到跳轉(zhuǎn)）
// 相機位置初始化為（0明刷，150，400）
camera =new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1,10000);
camera.position.set(0,150,400);
// camera.lookAt(scene.position);
// scene.add(camera);
// 渲染器
renderer =new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//軌道控制器
controls =new THREE.OrbitControls(camera, renderer.domElement );
（3）創(chuàng)建天空盒的函數(shù)add_skybox()創(chuàng)建一個天空盒并加入到場景中满粗。
此處創(chuàng)建單個天空盒的path本可以在函數(shù)體內(nèi)部設(shè)置圖片的路徑的辈末，但是為了在后面創(chuàng)建多個天空盒的時候代碼重用，將天空盒的路徑path作為參數(shù)傳入映皆。
實現(xiàn)單個天空盒的方式是挤聘，先設(shè)置天空盒圖片的路徑path、名字directions與格式format.
調(diào)用THREE.BoxGeometry類生成一個skyGeometry捅彻，得到一個沒有紋理的盒子组去。
定義一個數(shù)組materialArray[]，以圖片作為紋理放入數(shù)組中步淹。具體的實現(xiàn)是利用圖片的路徑作為參數(shù)从隆，調(diào)用THREE.ImageUtils.loadTexture來獲取圖片。
有了盒子skyGeometry與紋理skyMetrial后缭裆，調(diào)用THREE.Mesh生成天空盒键闺，并加入場景。
function add_skybox(path)
{
var directions? = ["posx", "negx", "posy", "negy", "posz", "negz"];
? ? var format =".jpg";
? ? var skyGeometry =new THREE.BoxGeometry(5000, 5000, 5000 );
? ? var materialArray = [];
? ? for (var i =0; i <6; i++)
materialArray.push(new THREE.MeshBasicMaterial({
map:THREE.ImageUtils.loadTexture( path + directions[i] + format ),
? ? ? ? ? ? side:THREE.BackSide
? ? ? ? }));
? ? var skyMaterial =new THREE.MeshFaceMaterial( materialArray );
? ? var skyBox =new THREE.Mesh( skyGeometry, skyMaterial );
? ? scene.add( skyBox );
}
（4）最后是animate()函數(shù)完成渲染循環(huán)澈驼、更新相機update()辛燥、實時渲染render()。
function update()
{
controls.update();
}
function render()
{
renderer.render(scene, camera );
}
function animate()
{
// orbit.update();
? ? update();
? ? render();
? ? requestAnimationFrame(animate );
? ? //TWEEN.update();
}
window.onload = () => {
init(camera_position["-0"]);
? ? animate();
};
