更改点云数据中特定点的不透明度 [英] Change opacity of specific points in Points Cloud data
问题描述
我正在使用 PCDLoader 加载一些 PCD 数据,在成功加载 PCD 数据后,我们将点添加到场景中.我在使用 Three.js Line Geometry 创建的 PCD 点上有一个圆圈,
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 created using the Three.js Line Geometry,
我正在尝试降低圆外所有点的不透明度.
I am trying to reduce the opacity for all the points that lie outside of the Circle.
这是我加载 PCD 并绘制圆的代码
Here's my code which loads the PCD and draws a circle
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
但我不想改变所有点的不透明度,我只想改变位于这个黄色圆圈之外的所有点的不透明度.
but I don't want to change the opacity for all the points, I just want to change the opacity for all the points that Lie outside this yellow circle.
推荐答案
自从 r127
四分量顶点颜色被 three.js
支持.这意味着您可以控制每个顶点的 alpha 值.查看以下实时示例了解更多详情:
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>
这篇关于更改点云数据中特定点的不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!