Question

我有三种材料的阵列。其中一个是MeshBasicMaterial，透明设置为true，不透明度设置为0。

我将这种透明材料分配到立方体的顶面，期望看到其他面的内壁。

然而，相反，顶面不是绘制的（呈现白色，就像画布的背景），但不允许我“透视”它。

这是如何实现的？

（最终效果应该只是一个打开顶部的方框）

// FELT TEXTURE
var felt = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/greenfelt.jpg')
});

// WOOD TEXTURE
var wood = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/woodgrey.jpg')
});

// TRANSPARENT MATERIAL
var transparent = new THREE.MeshBasicMaterial({ 
    opacity: 0,
    transparent: true
});

var materials = new THREE.MeshFaceMaterial([
    felt,
    wood,
    transparent
]);

var cube = new THREE.CubeGeometry(RECTANGLE_WIDTH, RECTANGLE_HEIGHT, RECTANGLE_DEPTH ); 
    cube.faces[0].materialIndex = 1; // LEFT
    cube.faces[1].materialIndex = 1; // RIGHT
    cube.faces[2].materialIndex = 1; // BACK
    cube.faces[3].materialIndex = 1; // FRONT
    cube.faces[4].materialIndex = 2; // TOP (TRANSPARENT)
    cube.faces[5].materialIndex = 0; // BOTTOM


// RECTANGLE
var rectangle = new THREE.Mesh( cube, materials );

scene.add( rectangle );

Answer 1

也许你的立方体正在被剔除。默认情况下，仅绘制每个面的正面。尝试为所有立方体材料设置material.side = THREE.DoubleSide（透明材质不应该需要它，而是所有其他材料）。

felt.side = THREE.DoubleSide;
wood.side = THREE.DoubleSide;
var materials = new THREE.MeshFaceMaterial([
  felt,
  wood,
  transparent
]);

Three.js - 不能'透视'立方体脸

1 个答案: