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

问题描述 投票:2回答:1

我正在研究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个回答
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);
© www.soinside.com 2019 - 2024. All rights reserved.