Three.js r91 - 如何使用新的 linewidth 属性来加宽/加宽线条? [英] Three.js r91 - how do I use the new linewidth property to fatten/widen lines?

问题描述

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

I have just encountered a scenario in the project I am building in which I needed to generate wireframe-style lines with a transparent inside to "outline" the shape as if it is drawn in a comic/cartoon style, instead of creating the actual solid object itself.

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

These outlines need to be thicker than the default linewidth of LineBasicMaterial. It was a known issue that linewidthdid not actually work/do anything for LineBasicMaterial, and so I was stumped on how I would solve my issue.

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

I was previously using r90, but to my excitement version r91 of three.js was very recently released and with it comes brand new "fat lines" as they are called in the example. This seems like the perfect solution to my problem, as it basically just adds the ability to increase the linewidth again.

但是，升级到 r91 后，查看代码对于粗线"示例，并尝试复制我在那里看到的内容，linewidth

However, after upgrading to r91, looking through the code for the "fat lines" example, and trying to copy what I saw in there, I am having no luck with 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 作为填充"来在两者之间着色线.

a little messy, but the basic premise is that I was previously creating the object (and no lines), hence the PavementObject = new THREE.Mesh(geomPavement, matPavement);, but then decided to attempt the line approach by getting the edges of the BoxGeometry and using them to create LineSegments with a LineBasicMaterial. I kept the code for the Mesh creation as I may need the object to be non-transparent, and so I can use the Mesh as a "fill" to colour in between the lines.

升级到 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

All I did was change LineBasicMaterial to LineMaterial, and LineSegments to LineSegments2

我需要什么

我正在寻找一种方法来增加我的 LineSegements 的 linewidth，理想情况下使用来自 r91 的新粗线".我想这对我不起作用的原因是缺乏理解缺少新版本 r91 的文档，这可能很简单，但感谢您的帮助！

I am looking for a way to increase the linewidth of my LineSegements, ideally using the new "fat lines" from r91. I imagine the reason this doesn't work for me is due to a lack of understanding & a lack of documentation of the new version r91, and it is probably something very simple, but any help is appreciated!

还有

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

In the code for the example that I linked to, each new /examples/js/lines/... file is individually linked to via a script tag. I did this in my project just in case, but is this necessary? Is the functionality not in the main build file or do I have to include it via script tags, like I have to for OrbitControls for example.

谢谢.

推荐答案

支持粗线目前尚未完全集成到核心库中；这只是一个例子，目前.

Support for fat lines is not currently fully-integrated into the core library; it is just an example, for now.

您可以使用以下模式渲染带有粗线的EdgesGeometry:

You can use the following pattern to render EdgesGeometry with fat lines:

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 r.91

这篇关于Three.js r91 - 如何使用新的 linewidth 属性来加宽/加宽线条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！