three.js 给PLY增加根据Z值设置颜色值

最新推荐文章于 2025-07-02 17:18:40 发布

原创最新推荐文章于 2025-07-02 17:18:40 发布 · 628 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

three.js 专栏收录该内容

4 篇文章

订阅专栏

		//    let          s = '../src/assets/ply/Result.ply'
		let s = plyUrl;  
		loader.load(s,
			function (geometry) {
				console.log('loader.load ');
				console.log(geometry);
				geometry.computeVertexNormals();

				const colorsArr = geometry.getAttribute('position').array.slice();
				//const colors = [];

				let colors = new Float32Array(colorsArr.length)
				console.log('colors', colorsArr)
				for (let i = 0; i < colorsArr.length; i++) {
					if ((i + 1) % 3 == 0)
					{
						colors[i-2] = Math.abs(colorsArr[i]) / 100;
						colors[i-1] = Math.abs(colorsArr[i]) / 400;
						colors[i-0] = Math.abs(colorsArr[i]) / 700;
						//colors.push(0.6, 0.5, Math.abs(colorsArr[i]) / colorsArr.length);
					}
						
				}

				console.log(colors)


				geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3, false));


				const material2 = new THREE.PointsMaterial({ size: 0.001, vertexColors: true, color: '#ffff00', });//THREE.VertexColors color: '#ffff00',
				//material2.sizeAttenuation = false; 		



				let mesh2 = new THREE.Points(geometry, material2);
				mesh2.position.x = 1;//0;
				mesh2.position.y = 2;//-1;
				mesh2.position.z = 3;//0;
				mesh2.scale.multiplyScalar(0.4);
				mesh2.castShadow = true;
				mesh2.receiveShadow = true;
				scene.add(mesh2);


				scene.background = new THREE.Color(0x52645b);
				console.log('loader.load OK');


				//}

				// 更新点云对象的顶点颜色属性
				// const attribute = new THREE.Uint8ClampedArray(colors).buffer;
				// geometry.setAttribute('color', new THREE.InterleavedBufferAttribute(attribute, 6, 39));


			},
			function (xhr) {
				//console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
			},
			function (err) {
				console.error(err);
			}
		);

效果如下图