javascript - Three.js r91 - 如何使用新的线宽属性来加宽/加宽线条？

Question

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

这些轮廓需要比 LineBasicMaterial 的默认 linewidth 更粗。这是一个已知问题，即 linewidth 实际上没有为 LineBasicMaterial 工作/做任何事情，所以我对如何解决我的问题感到困惑。

我之前使用的是 r90，但令我兴奋的是 three.js 的 r91 版本是最近发布的，它带来了全新的“粗线”，正如示例中所称的那样。这似乎是我的问题的完美解决方案，因为它基本上只是增加了再次增加 linewidth 的能力。

但是升级到r91后，通过the code for the "fat lines" example查看，并试图复制我在那里看到的内容，但我对 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 的边缘并使用它们创建带有 LineBasicMaterial 的 LineSegments 来尝试直线方法。我保留了创建 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

我需要什么

我正在寻找一种方法来增加我的LineSegements 的linewidth，最好使用r91 中的新“粗线”。我想这对我不起作用的原因是由于缺乏理解和缺乏新版本 r91 的文档，它可能非常简单，但我们不胜感激!

还有

在我链接到的示例的代码中，每个新的 /examples/js/lines/... 文件都通过脚本标签单独链接到。我在我的项目中这样做是为了以防万一，但这有必要吗？该功能是否不在主构建文件中，或者我是否必须通过脚本标签包含它，例如我必须为 OrbitControls 添加。

谢谢。

Answer 1

支持fat lines目前没有完全集成到核心库中；目前这只是一个例子。

您可以使用以下模式来渲染带有粗线条的 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