1、下载THREE.JS的r125,将需要用到的控件放在js文件夹,方便引用。
单个天空盒需要用到的主要three.js与OrbitControls.js轨道控制器控件实现场景用鼠标交互,让场景动起来,控制场景的旋转、平移,缩放。
2、实现单个天空盒的代码结构
three.js里必不可少的就是场景scene、相机camera、渲染器render。
(1)定义全局变量scene,camera,renderer与控制器controls。
var scene, camera, renderer;
var controls;
(2)初始化函数init()完成场景、相机、渲染器、控制器的初始化。
//场景
scene = new THREE.Scene();
(注意:在单个天空盒的时候,场景相机渲染器控制器等都可以在init函数内完成,但是在后面实现两个天空盒之间的跳转的时候,需要将相机、渲染器、控制器的初始化放在init外面完成初次初始化,否则相机的位置不能得到跳转)
// 相机位置初始化为(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)创建天空盒的函数add_skybox()创建一个天空盒并加入到场景中。
此处创建单个天空盒的path本可以在函数体内部设置图片的路径的,但是为了在后面创建多个天空盒的时候代码重用,将天空盒的路径path作为参数传入。
实现单个天空盒的方式是,先设置天空盒图片的路径path、名字directions与格式format.
调用THREE.BoxGeometry类生成一个skyGeometry,得到一个没有纹理的盒子。
定义一个数组materialArray[],以图片作为纹理放入数组中。具体的实现是利用图片的路径作为参数,调用THREE.ImageUtils.loadTexture来获取图片。
有了盒子skyGeometry与纹理skyMetrial后,调用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()函数完成渲染循环、更新相机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();
};