做星系模拟时,如何修改THREE.Points对象中单个点的位置?
THREE.js 逐个修改Points顶点位置的正确方法
你第一个代码修改的是Points对象的全局位置,所有点自然会一起移动,这是预期行为。
第二个代码无效的原因是:points.geometry.attributes.position是BufferAttribute类型,不能直接通过[i]赋值,必须操作它的底层数组或使用官方提供的方法:
方法一:操作BufferAttribute的array数组
const positions = points.geometry.attributes.position; for (let i = 0; i < positions.count; i++) { // 为每个顶点的x、y、z分别设置随机值(示例范围:-250 到 250) positions.array[i * 3] = Math.random() * 500 - 250; // x坐标 positions.array[i * 3 + 1] = Math.random() * 500 - 250; // y坐标 positions.array[i * 3 + 2] = Math.random() * 500 - 250; // z坐标 } positions.needsUpdate = true; // 必须标记更新,Three.js才会将新数据上传至GPU
方法二:使用官方提供的setX/setY/setZ方法
const positions = points.geometry.attributes.position; for (let i = 0; i < positions.count; i++) { positions.setX(i, Math.random() * 500 - 250); positions.setY(i, Math.random() * 500 - 250); positions.setZ(i, Math.random() * 500 - 250); } positions.needsUpdate = true;
额外注意:如果你的Points基于BufferGeometry创建,不要手动将geometry设置为static模式(默认非静态),否则needsUpdate标记可能无法生效。
内容的提问来源于stack exchange,提问作者Bastien
相关产品推荐
相关产品推荐

