你能在 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;
}