当前位置：首页 > news >正文

three.js与webgl在buffer上的对应关系

news 来源：原创 2025/4/20 16:28:45

一、three.js的类名

最近开始接触three.js

看到three.js中的一些类名和webgl的很相似

不自觉的就想对比一下

二、three.js中绘制4个点

// 创建点的几何体
const vertices = new Float32Array([0.0, 0.0, 0.0,    // 点11.0, 0.0, 0.0,    // 点20.0, 1.0, 0.0,    // 点30.0, 0.0, 1.0     // 点4
]);
const geometry = new THREE.BufferGeometry();
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.setAttribute('position', attribute);// 创建点的材质
const material = new THREE.PointsMaterial({color: 0xff0000,   // 红色size: 0.1          // 点的大小
});// 创建点对象
const points = new THREE.Points(geometry, material);
scene.add(points);

三、webgl中绘制4个点

var vertices = new Float32Array([0.0, 0.0, 0.0,    // 点11.0, 0.0, 0.0,    // 点20.0, 1.0, 0.0,    // 点30.0, 0.0, 1.0     // 点4
]);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(program, "a_Position");
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);gl.drawArrays(gl.POINTS, 0, 3);

四、代码比较

先声明一下：

three.js本身进行了一定的封装，

下面的对比，只是辅助理解

在代码具体实现上，不是等价的关系

// 创建点的几何体
const vertices = new Float32Array([0.0, 0.0, 0.0,    // 点11.0, 0.0, 0.0,    // 点20.0, 1.0, 0.0,    // 点30.0, 0.0, 1.0     // 点4
]);
//比较1：three.js
const geometry = new THREE.BufferGeometry();
//比较1：webgl
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);//比较2：three.js
const attribute = new THREE.BufferAttribute(vertices, 3);
geometry.setAttribute('position', attribute);
//比较2：webgl
var a_Position = gl.getAttribLocation(program, "a_Position");
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);