#ThreeJS#之外景天空盒子

效果图：





外景天空盒子的使用例：

var outdoorSceneBox = new OutdoorSceneBox();
scene.add(editor.outdoorSceneBox.createOutdoorSceneBox(outdoorSceneConfigInfo));

[b]外景天空盒子的配置例(上述代码中的outdoorConfigInfo)：
[/b]


"outdoor_scene":{
     "rootPath":"resources/img/editor/outdoor_scene",
     "sceneStyleList":[
            {"subPath":"natural","title":"自然景观","sceneCount":2},
            {"subPath":"city","title":"城市景观","sceneCount":2}
     ]
}

外景天空盒子的实现代码：

/**
* 外景盒子
*/
var OutdoorSceneBox = function() {
var directions = ["right", "left", "top", "bottom", "back", "front"];
var imageSuffix = ".jpg";
var outdoorSceneBox;

/**
* 创建外景盒子
*/
this.createOutdoorSceneBox = function(outdoorSceneInfo){
var sceneGeometry = new THREE.BoxGeometry(2000, 800, 2000);
var sceneMaterial = loadDefaultMaterial(outdoorSceneInfo.rootPath);
outdoorSceneBox = new THREE.Mesh(sceneGeometry, sceneMaterial);
outdoorSceneBox.name = "outdoorSceneBox";
outdoorSceneBox.position.y += 100;
return outdoorSceneBox;
}

/**
* 显示外景
*/
this.show = function(){
if(outdoorSceneBox) outdoorSceneBox.visible = true;
}

/**
* 隐藏外景
*/
this.hide = function(){
if(outdoorSceneBox) outdoorSceneBox.visible = false;
}

/**
* 切换外景材质
*/
this.switchOutdoorScene = function(outdoorScenePath, callback){
for (var i = 0; i < 6; i++) {
outdoorSceneBox.material.materials[i].dispose();
}
outdoorSceneBox.material.materials.splice(0, 6);
outdoorSceneBox.material.materials = loadMaterial(outdoorScenePath, callback);
}

/**
* 加载指定路径下的材质图片
* @param {String} outdoorScenePath
*/
function loadMaterial(outdoorScenePath, callback){
var materialArray = [];
for (var i = 0; i < 6; i++){
materialArray.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(outdoorScenePath + directions[i] + imageSuffix, undefined, callback),
side: THREE.BackSide
}));
}

return materialArray;
}

/**
* 加载默认材质图片
* @param {String} outdoorScenePath
*/
function loadDefaultMaterial(outdoorScenePath){
var materialArray = [];
for (var i = 0; i < 6; i++){
materialArray.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(outdoorScenePath + "/default.jpg"),
side: THREE.BackSide
}));
}

return new THREE.MeshFaceMaterial(materialArray);
}
return this;
}

var outdoorSceneBox = new OutdoorSceneBox();
scene.add(editor.outdoorSceneBox.createOutdoorSceneBox(outdoorSceneConfigInfo));

/**
* 外景盒子
*/
var OutdoorSceneBox = function() {
var directions = ["right", "left", "top", "bottom", "back", "front"];
var imageSuffix = ".jpg";
var outdoorSceneBox;

/**
* 创建外景盒子
*/
this.createOutdoorSceneBox = function(outdoorSceneInfo){
var sceneGeometry = new THREE.BoxGeometry(2000, 800, 2000);
var sceneMaterial = loadDefaultMaterial(outdoorSceneInfo.rootPath);
outdoorSceneBox = new THREE.Mesh(sceneGeometry, sceneMaterial);
outdoorSceneBox.name = "outdoorSceneBox";
outdoorSceneBox.position.y += 100;
return outdoorSceneBox;
}

/**
* 显示外景
*/
this.show = function(){
if(outdoorSceneBox) outdoorSceneBox.visible = true;
}

/**
* 隐藏外景
*/
this.hide = function(){
if(outdoorSceneBox) outdoorSceneBox.visible = false;
}

/**
* 切换外景材质
*/
this.switchOutdoorScene = function(outdoorScenePath, callback){
for (var i = 0; i < 6; i++) {
outdoorSceneBox.material.materials[i].dispose();
}
outdoorSceneBox.material.materials.splice(0, 6);
outdoorSceneBox.material.materials = loadMaterial(outdoorScenePath, callback);
}

/**
* 加载指定路径下的材质图片
* @param {String} outdoorScenePath
*/
function loadMaterial(outdoorScenePath, callback){
var materialArray = [];
for (var i = 0; i < 6; i++){
materialArray.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(outdoorScenePath + directions[i] + imageSuffix, undefined, callback),
side: THREE.BackSide
}));
}

return materialArray;
}

/**
* 加载默认材质图片
* @param {String} outdoorScenePath
*/
function loadDefaultMaterial(outdoorScenePath){
var materialArray = [];
for (var i = 0; i < 6; i++){
materialArray.push(new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(outdoorScenePath + "/default.jpg"),
side: THREE.BackSide
}));
}

return new THREE.MeshFaceMaterial(materialArray);
}
return this;
}