你能在 THREE.js 点 object 透明/不可见中制作个别点吗？

Question

我有一个 Three.js Points object，它包含在 3D 空间中显示一堆点的数据。 我想动态地使一些点不可见，但不确定如何。

材质是 PointsMaterial。 xyz 数据存储在pointsObj.geometry.attributes.position.array中，颜色数据存储在pointsObj.geometry.attributes.color.array中，但我不确定是否可以更改 alpha 值或单个点的可见性等内容（我可以让所有的点都不可见，但是这个不一样）

有谁知道这是否可能？

Answer 1

每个点都必须有color.array ，你可以直接修改。

var colors = pointsObj.geometry.attributes.color.array;

for (var i = 0; i < colors.length; i += 4) {
  if (shouldPointBeInvisible(i)) { //<-- not implemented
    colors[i + 3] = 0; // Set alpha value to 0 to make the point invisible
  }
}

pointsObj.geometry.attributes.color.needsUpdate = true;

-- 这里可能有一个着色器材质：

var material = new THREE.ShaderMaterial({
  uniforms: {
    visibility: { value: 1.0 }
  },
  vertexShader: `
    uniform float visibility;
    varying vec3 vColor;
    
    void main() {
      vColor = color;
      vColor.a *= visibility;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
    
    void main() {
      gl_FragColor = vec4(vColor, 1.0);
    }
  `
});

pointsObj.material = material;

...

if (shouldPointBeInvisible(i)) {
  pointsObj.material.uniforms.visibility.value = 0.0;
} else {
  pointsObj.material.uniforms.visibility.value = 1.0;
}

-- 另一个使用 PointsMaterial 的解决方案：

var material = new THREE.PointsMaterial({
size: 1,
transparent: true,
opacity: 1.0,
uniforms: {
visibility: { value: 1.0 }
},
vertexShader: `
uniform float visibility;
varying vec3 vColor;
oid main() {
  vColor = color;
  vColor.a *= visibility;
  gl_PointSize = size;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

, fragmentShader: varying vec3 vColor;
`
});

pointsObj.material = material;

...

if (shouldPointBeInvisible(i)) {
pointsObj.material.uniforms.visibility.value = 0.0;
} else {
pointsObj.material.uniforms.visibility.value = 1.0;
}