Question

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

这些大纲需要比>>> %time forcing.cumsum(axis=0); None # ; None avoids output CPU times: user 5.27 s, sys: 218 ms, total: 5.49 s Wall time: 5.49 s的默认linewidth更粗。这是一个众所周知的问题，LineBasicMaterial实际上没有为linewidth工作/做任何事情，所以我对如何解决我的问题感到难过。

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

然而，升级到r91后，查看the code for the "fat lines" example，并尝试复制我在那里看到的内容，我对linewidth没有运气

以下是升级到r91之前的代码：

linewidth

有点凌乱，但基本的前提是我之前创建了对象（没有行），因此

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);
}

，但后来决定通过获取{{1的边缘来尝试行方法并使用它们创建PavementObject = new THREE.Mesh(geomPavement, matPavement); BoxGeometry。我保留了LineSegments创建的代码，因为我可能需要将对象设置为不透明，因此我可以使用LineBasicMaterial作为“填充”来在行之间着色。

升级到r91之后，我认为它会像以下一样简单：

Mesh

我所做的就是将Mesh更改为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的{{1}}，理想情况下使用r91的新“胖线”。我认为这对我不起作用的原因是由于缺乏理解和缺少新版本r91的文档，它可能非常简单，但任何帮助都表示赞赏！

同时

在我链接的示例的代码中，每个新的LineSegments2文件都通过脚本标记单独链接。为了以防万一，我在我的项目中这样做了，但这是必要的吗？该功能不在主构建文件中，还是必须通过脚本标记包含它，例如我必须用于linewidth。

谢谢。

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

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

1 个答案: