three.js加载3d模型_ThreeJS:几何体相关(BufferGeometry)

使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销

可以自定义顶点位置, 面片索引, 法向量, 颜色值

作者:随遇丿而安

出处:https://www.cnblogs.com/xiaxiangx/p/13849204.html

1. BufferGeometry使用初体验

在之前的学习中, 我是已经了解到建立一个3d场景, 不知道屏幕前的你是否有了解到, threejs需要做的有, 第一: 渲染器renderer; 第二: 场景Scene; 第三, 光源Light; 第四, 物质有点线面三个部分.

在实际的开发过程中, 自己创建几何体这种情况很少见, 大部分情况是载入已有的模型, 对模型进行操作, 导入的模型可能很大, 这个时候就需要优化, 优化可以从几何体入手, 也可以从材质入手, 但是优化主要针对的就是几何体, 占内存的也是几何体而不是材质, 因此了解几何体是非常有必要的, 几何体英文( geometry ).

对于Threejs, 官方说明, 使用buffergeometry能够有效减少向GPU传输几何体相关数据所需要的开销, 同时, 用户可以自定义集合体的顶点位置, 名片索引, 法向量, 颜色值

下面创建一个简单的buffergeometry吧

// 顶点个数var particles = 500000;var geometry = new THREE.BufferGeometry();// 每个顶点位置let positions = [];// 颜色值var colors = [];// 临时颜色类型var color = new THREE.Color();var n = 1000, n2 = n / 2; for ( var i = 0; i < particles; i ++ ) { // positions, 形成一个长方体, x, y, z的范围都是从-500到500, 形成的长方体的长宽高都为500 var x = Math.random() * n - n2; var y = Math.random() * n - n2; var z = Math.random() * n - n2; positions.push( x, y, z ); // colors, 设置颜色, 同理, 从0到1 var vx = ( x / n ) + 0.5; var vy = ( y / n ) + 0.5; var vz = ( z / n ) + 0.5; color.setRGB( vx, vy, vz ); colo