我正在尝试使用three.js在游戏演示中创建世界的极限,所以我创建了两个立方体,每个立方体显示一个“透明森林纹理”,将模拟世界限制。
我最初的问题是纹理显示在立方体的所有面上,但我希望它只显示在4个面中。
[更新:我设法使立方体顶面的纹理不可见,但我仍然可以看到某种边缘(我不确定它是什么......)天空。现在的问题是如何隐藏立方体边缘?]
仔细看看:
如果您访问https://googledrive.com/host/0BynsKHbZoT73elJpaUxqTlprVjQ/demos/3dworld/,您将能够看到它的实际效果。
我的代码是 [已更新] :
function createWall(texture,distanceFromMapLimit,wallsHeight,positiony){
//texture
var backgroundInteriorTexture = THREE.ImageUtils.loadTexture(texture,distanceFromMapLimit);
backgroundInteriorTexture.wrapS = backgroundInteriorTexture.wrapT = THREE.RepeatWrapping;
backgroundInteriorTexture.repeat.set( 10, 1 ); //repeat texture 10 times per face
backgroundInteriorTexture.needsUpdate = true;
// materials (for each face of the cube we will add one material)
var backgroundInteriorMaterials = [];
for ( var i = 0; i < 6; i ++ ) {
if((i == 0) || (i == 1) || (i == 4) || (i == 5)) // side faces
{
console.log(i,'visible')
backgroundInteriorMaterials.push(
new THREE.MeshBasicMaterial(
{
map: backgroundInteriorTexture,
transparent: true,
opacity: 1, //visible
side: THREE.BackSide
}
));
}
else //top and bottom faces
{
console.log(i,'NOT visible')
backgroundInteriorMaterials.push(
new THREE.MeshBasicMaterial(
{
map: backgroundInteriorTexture,
transparent: true,
opacity: 0, //not visible
side: THREE.BackSide
}
));
}
}
//geometry
var backgroundInteriorGeometry = new THREE.CubeGeometry(
world.worldWidth + distanceFromMapLimit,
wallsHeight,
world.worldDepth + distanceFromMapLimit
);
//mesh
var backgroundInteriorMesh = new THREE.Mesh(
backgroundInteriorGeometry,
new THREE.MeshFaceMaterial(backgroundInteriorMaterials)
);
backgroundInteriorMesh.position.y = positiony;
game.scene.add(backgroundInteriorMesh);
}
function createBackground(){
//INTERIOR
var wallsHeight = 4056;
var positiony = 1750;
createWall("Back_01.png", 0, wallsHeight, positiony); //just in ground limits
//EXTERIOR
createWall("Back_02.png", 5000, wallsHeight, positiony); //5000 away from ground limits
}
谢谢:)