Question

我正在尝试使用three.js将类似笼子的对象绘制到画布上，但我可能做错了，因为笼子的短边表现不对。我设法创建了一个jsFiddle here 正面和背面都没问题（虽然如果你从后面看看笼子，后面的纹理似乎在你的轨道上“擦掉”前面的那个，即使从笼子之间仍然可以看到笼子的地板）但是短的只有在围绕笼子旋转并将摄像机放在它们前面时，才能看到侧面。笼子的所有侧面的代码都是相同的（除了坚固的灰色地板和透明的天花板），它是：

var cageTexture = THREE.ImageUtils.loadTexture(/*omitted, see fiddle*/);
cageTexture.wrapS = THREE.RepeatWrapping;
cageTexture.wrapT = THREE.RepeatWrapping;
cageTexture.repeat.set(10, 1);
var cageFaces = [
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, opacity: 0, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color: "gray", side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide})
];
var cage = new THREE.Mesh(
    new THREE.BoxGeometry(2, 1.5, 1),
    new THREE.MeshFaceMaterial(cageFaces)
);

我做错了什么？单击并拖动到场景周围的轨道，以了解我面临的问题。随意编辑小提琴。提前谢谢。

Answer 1

实现所需目标的一种方法是在透明对象排序时禁用depthTest。排序用于尝试正确渲染具有一定透明度的对象。（来自sortObjects

上WebGLRenderer的文档

这是fiddle。

双面半透明纹理问题

1 个答案: