更改点云数据中特定点的不透明度答案

【问题标题】：Change opacity of specific points in Points Cloud data更改点云数据中特定点的不透明度
【发布时间】：2021-08-25 15:17:27
【问题描述】：

我正在使用 PCDLoader 加载一些 PCD 数据，成功加载 PCD 数据后，我们获得了要添加到场景的 Points。我在使用 Three.js 线几何创建的 PCD 点顶部有一个圆圈，

我正在尝试降低圆外所有点的不透明度。

这是我加载 PCD 并绘制圆圈的代码

this.loader = this.loader || new PCDLoader();
this.loader.load(pcdPath, (mesh: Points) => {

  mesh.name = `pcd-mesh`;
  (mesh.material as PointsMaterial).size = 1.5;
  (mesh.material as PointsMaterial).color.setHex(0xffffff);

  const circlePoints = [];
  const radius = 18;
  for (let i = 0; i <= 360; i++) {
    circlePoints.push(
      new Vector3(
        Math.sin(i * (Math.PI / 180)) * radius,
        Math.cos(i * (Math.PI / 180)) * radius,
        0
      )
    );
  }
  const circleLineGeo = new BufferGeometry().setFromPoints(circlePoints);

  const CircleLineMaterial = new LineBasicMaterial({
    color: 0xffff00,
    linewidth: 1.75,
  });

  const c = new Line(circleLineGeo, CircleLineMaterial);
  this.scene.add(c);

  this.renderView();
});

我知道我可以使用 ;(mesh.material as PointsMaterial).opacity = 0.5 更改所有点的不透明度

但我不想更改所有点的不透明度，我只想更改位于此黄色圆圈之外的所有点的不透明度。

【问题讨论】：

我从来没有用 Points 网格做过，但是你应该可以将材质的 vertexColors 设置为 true 并为几何图形添加一个“颜色”属性。不确定它是否处理不透明度，您可能需要为此编写自己的着色器。

标签： javascript reactjs three.js point-clouds

【解决方案1】：

由于three.js 支持r127 四分量顶点颜色。这意味着您可以控制每个顶点的 alpha 值。查看以下实时示例了解更多详情：

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

&lt;script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"&gt;&lt;/script&gt;

【讨论】：