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

Question

I have a Three.js Points object that contains data to display a bunch of points in the 3D space. I want to dynamically make some points invisible, but not sure how.

The material is a PointsMaterial. xyz data is stored in pointsObj.geometry.attributes.position.array and color data is stored in pointsObj.geometry.attributes.color.array , but I'm not sure if it's possible to alter things like alpha value or visibility of individual points (I can make all the points invisible, but this is different)

Does anyone know if this is possible?

Answer 1

Every point must have color.array , you can modify directly.

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;

-- Here with a shader material maybe:

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;
}

-- And another solution with 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;
}