算了,看你们吵这么 high ,认真答一下吧。比如我认为 Three.js 的设计者就是一个牛逼的程序员。
Three.js 做了什么呢?在页面显式 3d 图像,完全不是高科技。
更 low 的是, Three.js 甚至没有自己实现 3d 引擎什么的,只是调用 WebGL 而已。用题主的话来说,就是调用 API 什么的。
在没有 Three.js 之前, WebGL 的 API 是这么调用的。
```
// Initialize WebGL Context.
var canvas = document.getElementById("c");
var gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, 640, 480);
gl.clearColor(0.2, 0.2, 0.2, 1.0); // Set clear color to (very) dark gray.
// Create the 3D model, as a GL Vertex Array Buffer and a GL Index Array Buffer.
// Vertex buffer.
var modelVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, modelVertexBuffer); // "Activate" buffer.
var vertices = [
-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0
]; // A cube.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Copy the data into the buffer (VRAM).
// Index buffer.
var modelIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, modelIndexBuffer);
var indices = [
0, 1, 1, 2, 2, 3, 3, 0,
4, 5, 5, 6, 6, 7, 7, 4,
0, 4, 1, 5, 2, 6, 3, 7
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
// Initialize the matrices.
var mvMatrix = mat4.create(); // Model-View.
var pMatrix = mat4.create(); // Projection.
mat4.perspective(30, 4.0 / 3.0, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
mat4.rotate(mvMatrix, 0.5, [1, 1, 0]);
// Initialize the shaders.
// Create a vertex shader.
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById("shader-vertex").innerHTML);
gl.compileShader(vertexShader);
// Create a fragment shader.
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById("shader-fragment").innerHTML);
gl.compileShader(fragmentShader);
// Create a shader program using the two shaders.
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// Get the attributes and uniforms from the program.
gl.useProgram(shaderProgram);
var vertexPositionAttr = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttr);
var pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
var mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
// Render the scene.
// Clear the canvas and render the model.
gl.clear(gl.COLOR_BUFFER_BIT); // Clear the scene.
gl.bindBuffer(gl.ARRAY_BUFFER, modelVertexBuffer); // "Activate" vertex buffer.
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, modelIndexBuffer); // "Activate" index buffer.
gl.vertexAttribPointer(vertexPositionAttr, 3, gl.FLOAT, false, 0, 0); // Point at the vertex.
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix); // Send the projection matrix.
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix); // Send the model-view matrix.
gl.drawElements(gl.LINES, 24, gl.UNSIGNED_SHORT, 0);
console.log("HELLO WEBGL");
```
其实 WebGL 也是从 OpenGL 抄来的,这段 API 做了什么事呢,创建了两个图形。
Three.js 做了什么事,它还是调用了这些 API 。同样的功能,对于使用者来说是这样的。
```
// Build canvas.
var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
document.getElementById("container").appendChild(renderer.domElement);
// Build scene.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(30, 640.0 / 480.0, 0.1, 1000);
camera.position.z = 7;
var mesh = new THREE.Mesh(
new THREE.BoxGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true}));
mesh.quaternion.setFromAxisAngle((new THREE.Vector3(1, 1, 0)).normalize(), 0.5);
scene.add(mesh);
// Render the scene.
renderer.render(scene, camera);
console.log("HELLO THREE.JS");
```