Javascript ThreeJS:Mesh在另一个网格内时不可见

我花了好几个小时试图弄明白为什么我看不到多维数据集中的文本，为什么它不工作

有两个网格，其中一个在另一个内部，但不可见

当我注释将立方体网格添加到组中的行时，将显示文本（第34行）。 如果从材质中删除“transparent:true”，我可以看到文本，但会出现背景（第52行）

文本作为画布纹理添加，这是我发现的动态添加2d文本的最简单方法

我只想在立方体中添加一些白色文本，而不需要任何背景颜色

我看到了这个问题，但看起来与我的问题无关：

var渲染器、场景、摄影机、立方体组；
var rotationX=0；
var旋转y=0；
var percentX，percentY；
var container=document.getElementById（'container'）；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（0x000000，1）；
document.getElementById（'container'）.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,1000）；
场景。添加（摄影机）；
//团体
cubeGroup=new THREE.Group（）；
//立方体
var geometry=新的三个.BoxGeometry（200200200）；
var material=新的三个.MeshPhongMaterial（{
颜色：0x11111f，
三面，双面，
不透明度：.5，
透明：正确
});
var mesh=新的三个网格（几何体、材质）；
cubeGroup.add（mesh）；//对其进行注释，文本显示为透明
var环境光=新的三个环境光（0x999999，0.8）；
场景。添加（环境光）；
//正文
var bitmap=document.createElement（'canvas'）；
var g=bitmap.getContext（'2d'）；
位图宽度=256；
位图.height=256；
g、 字体='80px Arial'；
g、 fillStyle='白色'；
g、 填充文本（“文本”，20，80）；
变量几何=新的三个平面几何（180、180）；
var texture=new THREE.CanvasTexture（位图）；
var材料=新的3.0网格标准材料({
贴图：纹理，
透明：true//注释此项，文本将显示-但带有背景
});
var mesh2=新的三个网格（几何体、材质）；
立方体组添加（网格2）；
//将组添加到场景中
场景。添加（立方体组）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数动画（现在）{
请求动画帧（动画）；
立方组旋转y+=（旋转X-立方组旋转y）*0.05；
立方组旋转.x+=（旋转Y-立方组旋转.x）*0.05；
渲染器。渲染（场景、摄影机）；
}
函数findViewCoords（mouseEvent）
{
var-xpos；
var-ypos；
var w=窗内宽度；
var h=窗内高度；
var centerX=w/2；
var centerY=h/2；
if（mouseEvent）
{
xpos=mouseEvent.pageX-document.body.scrollLeft；
ypos=mouseEvent.pageY-document.body.scrollTop；
}
其他的
{
xpos=window.event.x+2；
ypos=window.event.y+2；
}
var diffX=xpos-centerX；
var diffY=ypos-centerY；
百分比x=扩散/中心x；
百分比=差异/中心；
旋转X=百分比X/2；
旋转Y=百分比Y/2；
}
container.addEventListener（“mousemove”，findViewCoords）
正文{
保证金：0；
填充：0；
溢出：隐藏；
}
发生这种情况的原因是three.js中的渲染分两个阶段进行

首先渲染实体。。然后是透明的东西

透明对象按其与摄影机的距离排序

因此，通过设置.transparent=true；您正在使文本在第二个过程中得到渲染，从而在其他几何体的顶部进行渲染

看看不屈不挠的西兰利的回答：

非常感谢！我首先渲染了文本，在文本材质中添加了“renderer.sortObjects=false”和“depthWrite:false”，现在它工作得非常好！你发布的链接对透明度很有意思。很酷，很高兴它有帮助！