Question

我正在研究scene，它将THREE.LineSegments渲染为线框。现在，我想慢慢移动LineSegments材质中的顶点（在上一场景中，此对象名为warehouse），但是我不知道如何在THREE.RawShaderMaterial中渲染LineSegments线框。 / p>

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

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将上面的仓库对象渲染为线框吗？非常感谢其他人在这个问题上可以提供的帮助！

P.S。我将其发布在THREE.js discussion page上，但在此交叉发布以使更多人关注此问题。

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

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

1 个答案: