Change Opacity Of Specific Points In Points Cloud Data

I am loading some PCD data using the PCDLoader, after loading the PCD data successfully we get the Points to add to the scene. I have a circle on top of the PCD points that I creat

Solution 1:

Since r127 four-component vertex colors are supported by three.js. Meaning you can control the alpha value per vertex. Check out the following live example for more details:

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  const points = [
    new THREE.Vector3(-2, 0, 0),
    new THREE.Vector3(-1, 0, 0),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(2, 0, 0)
  ];

  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.PointsMaterial({
    vertexColors: true,
    transparent: true
  });
  const pointCloud = new THREE.Points(geometry, material);
  scene.add(pointCloud);

  // add color data

  const colors = [
    1, 0, 0, 0, // r,g,b,a
    1, 0, 0, 0.25,
    1, 0, 0, 0.5,
    1, 0, 0, 0.75,
    1, 0, 0, 1
  ];

  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>