Javascript 使用renderDepth和Three.js在顶部渲染对象

我正在尝试在其他对象之上渲染对象

在小提琴中，将绿色圆环结渲染到红色框和地板的顶部

我一直在尝试

mesh.renderDepth=0,11000

，但什么都没有改变

材质的创建方式如下所示：

  material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true, opacity: 0.5 } );

如何使用renderDepth实现这一点？我是否错过了其他设置

使用

depthTest

到

true

有效，但不可接受，因为凹面网格（如圆环体）会出现重叠多边形，尤其是不透明时

虽然我还没有成功运行，但它给我的印象是，它比仅使用

renderDepth

完全工作的JSFIDLE：

---

感谢您的帮助

这篇文章有点老了，但是对于那些在这方面遇到困难的人，请确保具有自定义渲染深度的对象的材质的depthrite设置为false：

 material.depthWrite = false

---

下面是对发布的fiddle的更新：

下面是一个工作示例，它有一个

VisualLayers

类用于管理任意数量的层，并使用

renderer.autoClear=false

和清除深度技术

这种方法很好，因为对象的

renderder

没有被修改（这是另一种方法），因此不会引入与

renderder

相关的其他问题

尝试使用UI中的选项查看其功能：

/@ts检查
////////////////////////
//层系
////////////////////////
/**@typedef{{name:string，backingScene:THREE.Scene，order:number}层*/
类可视层{
/**
*@type{Array}
*@私人
*/
__层=[]；
建造师(
/**@private@type{THREE.WebGLRenderer}*/\uu renderer，
/**@private@type{typeof THREE.Scene}*/\u Scene=THREE.Scene
) {
这个.\uuuu渲染器=\uuuu渲染器；
这个._场景=_场景；
}
定义层（/**@type{string}*/name，/**@type{number=}*/order=0）{
const layer=this.\uu getLayer（名称）；
//默认图层的顺序始终为0。
const previousOrder=layer.order；
layer.order=name==“默认”？0:顺序；
//仅在订单更改时进行排序。
if（上一个顺序！==层顺序）
这个.uu layers.sort（（a，b）=>a.order-b.order）；
返回层；
}
/**
*按名称获取图层（如果不存在，则以默认顺序0创建）。
*@私人
*/
__getLayer（/**@type{string}*/name）{
让layer=this.\uu layers.find（（l）=>l.name==name）；
如果（！层）{
层={name，backingScene:newthis.\uu Scene（），顺序：0}；
layer.backingScene.autoUpdate=false；
这个。层。推（层）；
}
返回层；
}
removeLayer（/**@type{string}*/name）{
const index=这个.\u layers.findIndex（（l）=>{
如果（l.name==名称）{
l、 backingScene.children.length=0；
返回true；
}
返回false；
});
如果（索引>=0）这是一层拼接（索引，1）；
}
hasLayer（/**@type{string}*/name）{
返回此值。uu layers.some（（l）=>l.name==name）；
}
/**@readonly*/
获取layerCount（）{
返回此项。\uuuu layers.length；
}
addObjectToLayer(
/**@type{THREE.Object3D}*/obj，
/**@type{string | string[]}*/layers
) {
if（数组.isArray（层））{
对于（层的常量名称）此。\uuu addObjectToLayer（obj，名称）；
返回；
}
此._添加ObjectToLayer（obj，层）；
}
addObjectsToLayer(
/**@type{THREE.Object3D[]}*/objects，
/**@type{string | string[]}*/layers
) {
for（对象的常量对象）{
this.addObjectToLayer（obj，层）；
}
}
/**@private@readonly*/
__emptyArray=Object.freeze（[]）；
/**@私人*/
__addObjectToLayer(
/**@type{THREE.Object3D}*/obj，
/**@type{string}*/name
) {
const layer=this.\uu getLayer（名称）；
const proxy=Object.create（obj{
孩子：{get:（）=>这个。u emptyArray}
});
layer.backingScene.children.push（代理）；
}
removeObjectFromLayer(
/**@type{THREE.Object3D}*/obj，
/**@type{string | string[]}*/nameOrNames
) {
if（Array.isArray（nameOrNames））{
for（名称或名称的常量名称）{
const layer=this.\u layers.find（（l）=>l.name==name）；
如果（！层）继续；
此._从图层（obj，图层）中删除对象；
}
返回；
}
const layer=this.\u layers.find（（l）=>l.name==nameOrNames）；
如果（！层）返回；
此._从图层（obj，图层）中删除对象；
}
/**@私人*/
__removeObjectFromLayer(
/**@type{THREE.Object3D}*/obj，
/**@type{Layer}*/Layer
) {
const children=layer.backingScene.children；
常量索引=children.findIndex(
（代理）=>/**@type{any}*/（代理）。\uuuuu proto\uuuuu==obj
);
如果（索引>=0）{
children[index]=children[children.length-1]；
children.pop（）；
}
}
removeObjectsFromAllLayers（/**@type{THREE.Object3D[]}*/objects）{
用于（此的常量层。\u层）{
for（对象的常量对象）{
此._从图层（obj，图层）中删除对象；
}
}
}
渲染(
/**@type{THREE.Camera}*/Camera，
/**@type{（layerName:string）=>void}*/beforeach，
/**@type{（layerName:string）=>void}*/afterEach
) {
用于（此的常量层。\u层）{
beforeach（layer.name）；
此.uuuu renderer.render（layer.backingScene，摄影机）；