three.js线框只有隐藏边缘为虚线的形状 [英] three.js wireframe only shape with hidden edges as dashed lines

问题描述

我正在尝试在three.js中创建特定类型的3D对象。
我想要一个线框模式的立方体（所以只显示边缘）。
但我希望后面的边缘是虚线的。
插图：

I'm trying to create a specific type of 3D object in three.js. I want for example a cube in wireframe mode (so only edges shown). But I want the edges that are behind to be dashed. Illustration:

我不知道知道这是否可以使用three.js，或者我是否应该直接尝试使用webgl。
我应该在线框中使用 THREE.Mesh 或使用 LineDashedMaterial THREE.Line 或者两者都在彼此之上？

I don't know if this is feasible with three.js or if I should try directly with webgl. Should I use THREE.Mesh in wireframe or THREE.Line with LineDashedMaterial or maybe both on top of each other?

推荐答案

我设法做到了。
您需要创建三个对象。

I managed to do it. You need to create three objects.

第一个对象：实体3d对象（我的意思是面不是边缘）

1st object: the solid 3d object (I mean the faces not the edges)

第二个对象：所有边缘但是虚线

2nd object: all edges but dashed

第三个对象：所有边缘但是正常（不是虚线）

3rd object: all edges but normal (not dashed)

对于第一个对象设置材料颜色：false，side：THREE.DoubleSide，depthTest：true 。

For the 1st object set the material with color: false, side: THREE.DoubleSide, depthTest: true.

第二个对象材料：颜色:(无论你喜欢什么），depthTest：false 。

第三对象材料：颜色:(无论你喜欢什么），depthTest：true 。

我还用<设置所有材料code> polygonOffset：true，polygonOffsetFactor：1，polygonOffsetUnits：1 摆脱z-fighting。

I also set all materials with polygonOffset: true, polygonOffsetFactor: 1, polygonOffsetUnits: 1 to get rid of z-fighting.

这篇关于three.js线框只有隐藏边缘为虚线的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！