Three.js是通過對WebGL接口的封裝與簡化而形成的一個易用的圖形庫。
簡單點的說法：WebGL可以看成是瀏覽器給我們提供的接口，在javascript中可以直接用這些API進行3D圖形的繪制；而Three.js就是在這些接口上又幫我們封裝得更好用一些。
既然有了WebGL，我們為什么還需要Three.js？
這是因為WebGL門檻相對較高，需要相對較多的數學知識。雖然WebGL提供的是面向前端的API，但本質上WebGL跟前端開發完全是兩個不同的方向，知識的重疊很少。相關性只是他們都在web平台上，都是用javascript而已。一個前端程序員或許還熟悉解析幾何，但是還熟悉線性代數的應該寥寥無幾了（比如求個逆轉置矩陣試試？），更何況使用中強調矩陣運算中的物理意義，這在教學中也是比較缺失的。
因此，前端工程師想要短時間上手WebGL還是挺有難度的。
於是，Three.js對WebGL提供的接口進行了非常好的封裝，簡化了很多細節，大大降低了學習成本。並且，幾乎沒有損失WebGL的靈活性。
因此，從Three.js入手是值得推薦的，這可以讓你在較短的學習后就能面對大部分需求場景。
下面是一個demo：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多樣式旋轉體</title> <script src="http://gamingJS.com/Three.js"></script> <script src="http://gamingJS.com/ChromeFixes.js"></script> </head> <body> <script> window.onload=function(){ // 定義3個基本對象(場景（scene）, 相機（camera）, 以及一個渲染器（renderer）) var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); var aspect = window.innerWidth / window.innerHeight ; camera = new THREE.PerspectiveCamera(75, aspect, 1, 1000); /* 第一個屬性75設置的是視角（field of view）; 第二個屬性設置的是相機拍攝面的長寬比（aspect ratio）; 接下來的2個屬性是近裁剪面（near clipping plane） 和 遠裁剪面（far clipping plane） * */ // 設置顏色和相機視角 camera.position.z = 500; scene.add(camera); // 創建一個幾何模型 geometry = new THREE.TorusKnotGeometry(150, 50 ,100,100,1); // geometry = new THREE.CubeGeometry(150, 50 ,100,100,1); // geometry = new THREE.SphereGeometry(150, 50 ,100); // geometry = new THREE.TorusKnotGeometry(150, 50 ,100); // geometry = new THREE.TorusGeometry(150, 50 ,100); // geometry = new THREE.TorusGeometry(150, 50 ,100,100); // 材料 material = new THREE.MeshNormalMaterial({ color: 0xf32179, }); // 網孔基礎材料 // material = new THREE.MeshBasicMaterial({ // color: 0xf32179, // }); // 網孔：mesh mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.CanvasRenderer(); renderer.setClearColorHex(0xffffff); renderer.setSize(window.innerWidth, window.innerHeight); document.body.style.margin = 0; document.body.style.overflow = 'hidden'; document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x = Date.now() * 0.0001; mesh.rotation.y = Date.now() * 0.001; mesh.rotation.z = Date.now() * 0.001; renderer.render(scene, camera); } } </script> </body> </html>