Three.js：使用 RawShaderMaterial 渲染 LineSegments 线框答案

【问题标题】：Three.js: Rendering LineSegments Wireframe with RawShaderMaterialThree.js：使用 RawShaderMaterial 渲染 LineSegments 线框
【发布时间】：2019-02-13 04:17:12
【问题描述】：

我正在制作一个 scene，它将一些 THREE.LineSegments 渲染为线框。我现在想慢慢移动 LineSegments 材质中的顶点（在上面的场景中，这个对象被命名为 warehouse），但我不知道如何在 THREE.RawShaderMaterial 中渲染我的 LineSegments 线框。

我发现缓慢移动顶点的最简单方法是使用RawShaderMaterial，为该几何体提供 currentPosition 和 targetPosition 属性，并使用 transitionPercent uniform 来控制渲染顶点位置中每个位置的混合：

vec3 pos = mix(currentPosition, targetPosition, transitionPercent)

但是，当我尝试在上面的场景中为仓库使用 RawShaderMaterial 时，我丢失了仓库中的线框几何图形，因为在 RawShaderMaterial 上设置 wireframe = true 与在 LineBasicMaterial 上的效果不同.

我尝试了一些方法来创建可以传递给我的 RawShaderMaterial 的线框几何体，例如：

var g1 = new THREE.BufferGeometry();
g1.addAttribute('position', new THREE.BufferAttribute(positions, 3));
var g2 = new THREE.Geometry().fromBufferGeometry(g1),
    wireframe = new THREE.WireframeGeometry(g2),
    geometry = new THREE.BufferGeometry().fromGeometry(wireframe);

但所有尝试都未能解开这个秘密。

有谁知道我如何使用 RawShaderMaterial 将上面的仓库对象渲染为线框？对于其他人在这个问题上可以提供的任何帮助，我将不胜感激！

附：我在THREE.js discussion page 上发布了这个，但我在这里交叉发布以让更多人关注这个问题。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

这可以通过以下方式解决：

var g2 = new THREE.Geometry().fromBufferGeometry(geometry);
var wireframeGeometry = new THREE.WireframeGeometry(g2);
wireframeGeometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
wireframeGeometry.addAttribute('target', new THREE.BufferAttribute(targets, 3));
wireframeGeometry.addAttribute('alpha', new THREE.BufferAttribute(alphas, 1));
wireframeGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
warehouse = new THREE.LineSegments(wireframeGeometry, shaderMaterial);
shaderMaterial.wireframe = true;
scene.add(warehouse);

【讨论】：