笔记:threejs 版本不同用法

最新推荐文章于 2025-10-29 14:32:33 发布

转载最新推荐文章于 2025-10-29 14:32:33 发布 · 973 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/popstarqq/article/details/121951574

文章标签：

#图形渲染

ThreeJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Three.js从旧版本到新版本的主要变更点，包括创建多点、几何体的不同方式及属性设置的方法变化。同时提供了两种实用的顶点赋值示例，帮助开发者顺利过渡到新版。

1 不同版本创建多点

旧版本：

mesh=new THREE.POINTCLOUD()

新版本:

mesh=new THREE.POINTS()

2 不同版本创建几何体

旧版本：

geometry=new THREE.Geometry()

对应的顶点赋值方式 :

geometry.vertices = points;

新版本:

geometry= new THREE.BufferGeometry()

对应的顶点赋值方式:

geometry.setFromPoints(points);

3 不同版本设置属性

旧版本:

bufferGeometry=new THREE.BufferGeometry()
bufferGeometry.addAttribute()

新版本：

bufferGeometry=new THREE.BufferGeometry()
bufferGeometry.setAttribute()

顺便记录一下:

因为设置属性里面的数据要符合webgl风格，方便webgl引擎渲染，所以选择了Float32Array;

方式一: new THREE.BufferAttribute(）

let positions = new Float32Array(points.length * 3);
for (let i = 0; i < points.length; i+=1){
   /// percents[i] = 
}
bufferGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

方式二: new THREE.Float32BufferAttribute()

let vertices=[];
points.forEach((pt)=>{
 vertices.push(pt.x,pt.y,pt.z)
})
geo.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

显然方式二方便开发，将数组和每个分量的长度传入，Float32BufferAttribute方法会自动将数组转换为Float32Array格式；