如何使用THREE.js createMultiMaterialObject函数控制线宽？

Question

我正在尝试THREE.js中的 createMultiMaterialObject 功能来创建也显示线框的着色对象。问题是线条显得破碎了。似乎没有响应 wireframeLinewidth 参数。

我的材料定义如下：

var mat1 = new THREE.MeshBasicMaterial( { color: 0xd02000, transparent: true, blending: THREE.AdditiveBlending } )
var blackLines = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 4 } );

对象在这里：

 var object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
                object.position.set( -100, 150, 0 );
                scene.add( object );

但是这会产生这样的结果：

任何帮助将不胜感激。谢谢！

Answer 1

你的代码很好。你在运行Windows吗？如果是这样，则可能是ANGLE问题，在这种情况下，线宽不能改变。请参阅此相关question。

如果您无法增加线宽，那么在您的情况下解决方法是使线框网格比实体网格略大一些，如下所示：

object.children[ 1 ].scale.multiplyScalar( 1.01 );

如果你这样做，就不会有更多的断线，它会很漂亮。 ： - ）

three.js r.55