Three.js r91 - 如何使用新的linewidth属性来增加/扩展线路？

Question

我刚刚在我正在构建的项目中遇到了一个场景,我需要在其中生成带有透明内部的线框样式线,以"勾勒"形状,就好像它是以漫画/卡通风格绘制的,而不是创建实际的实体对象本身.

这些轮廓需要比默认的更厚linewidth的LineBasicMaterial.这是一个已知的问题,linewidth实际上并没有起作用/做任何事情LineBasicMaterial,因此我对如何解决我的问题感到难过.

我之前使用的是r90,但令我兴奋的是版本r91 of three.js最近刚刚发布,并带有全新的"胖线",因为它们在示例中被称为.这似乎是我的问题的完美解决方案,因为它基本上只是增加了linewidth再次增加的能力.

但是,在升级到r91之后,查看代码中的"胖线"示例,并尝试复制我在那里看到的内容,我没有运气linewidth

这是升级到r91之前的代码:

var Pavement = function() {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "pavement";

    geomPavement = new THREE.BoxBufferGeometry(100, 25, 20000);
    var edgesPavement = new THREE.EdgesGeometry( geomPavement );
    var linePavement = new THREE.LineSegments( edgesPavement, new THREE.LineBasicMaterial( { color: Colors.black, linewidth: 10 } ) );
    matPavement = new THREE.MeshPhongMaterial({color: Colors.black});
    PavementObject = new THREE.Mesh(geomPavement, matPavement);

    PavementObject.receiveShadow = true;
    PavementObject.castShadow = true;

    this.mesh.add(linePavement);
}

有些凌乱,但基本前提是,我以前创建对象(无线),因此PavementObject = new THREE.Mesh(geomPavement, matPavement);,但后来决定通过获取的边缘尝试线方法BoxGeometry,并用它们来创建LineSegments一个LineBasicMaterial.我保留了Mesh创建代码,因为我可能需要将对象设置为非透明,因此我可以使用Mesh"填充"来在行之间着色.

升级到r91后,我认为它将如下所示:

var Pavement = function() {
    this.mesh = new THREE.Object3D();
    this.mesh.name = "pavement";

    geomPavement = new THREE.BoxBufferGeometry(100, 25, 20000);
    var edgesPavement = new THREE.EdgesGeometry( geomPavement );
    var linePavement = new THREE.LineSegments2( edgesPavement, new THREE.LineMaterial( { color: Colors.black, linewidth: 10 } ) );
    matPavement = new THREE.MeshPhongMaterial({color: Colors.black});
    PavementObject = new THREE.Mesh(geomPavement, matPavement);
    PavementObject.receiveShadow = true;
    PavementObject.castShadow = true;
    this.mesh.add(linePavement);
}

我所做的只是改变LineBasicMaterial对LineMaterial,并LineSegments以LineSegments2

我需要的

我正在寻找一种方法来增加linewidth我的LineSegements,理想情况下使用r91的新"胖线".我认为这对我不起作用的原因是由于缺乏理解和缺乏新版本r91的文档,它可能非常简单,但任何帮助都表示赞赏!

也

在我链接的示例的代码中,每个新/examples/js/lines/...文件都通过脚本标记单独链接.为了以防万一,我在我的项目中这样做了,但这是必要的吗？功能不在主构建文件中,还是必须通过脚本标记包含它,例如我必须使用脚本标记OrbitControls.

谢谢.

Answer 1

对胖线的支持目前尚未完全集成到核心库中; 现在只是一个例子.

您可以使用以下模式EdgesGeometry使用粗线进行渲染:

var geomPavement = new THREE.BoxBufferGeometry( 10, 2, 20 );

var edgesPavement = new THREE.EdgesGeometry( geomPavement );

var lineGeometry = new THREE.LineSegmentsGeometry().setPositions( edgesPavement.attributes.position.array );

var lineMaterial = new THREE.LineMaterial( { color: 0xffffff, linewidth: 10 } );

lineMaterial.resolution.set( window.innerWidth, window.innerHeight ); // important, for now...

var linePavement = new THREE.LineSegments2( lineGeometry, lineMaterial );

scene.add( linePavement );

three.js r.91