一、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);