three.js學習：初學three.js，從立方體開始
阿新 • • 發佈：2019-02-09
clas 拍攝 span png article dir idt 教程 type
目前three.js是瀏覽器展現3D效果的一個很強大的js工具，遺憾的是沒有特別系統而全面的文檔（threejs官方文檔感覺有些缺漏，可以和WebGL中文網的threejs教程對比著看）。好了，根據WebGL中文網的threejs教程開始學習，因為教程裏的部分代碼已經不適用（過時）了，導致學習的時候有些磕磕絆絆，故記錄下自己編寫的代碼，以便以後查閱。
1、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試</title> <script src="js/three.min.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; /*background-color: blue;*/ } </style> </head> <body> <canvas></canvas> </body> <script src="js/chapter1.2.js"></script> </html>
2、js代碼中應該有什麽元素
three.js寫的代碼通常含有三項元素：scene、camera和renderer三項，這三者的關系可以用WebGL中文網教程中的一段話表示：
Three.js中的場景是一個物體的容器，開發者可以將需要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理著其在場景中的位置。
相機的作用就是面對場景，在場景中取一個合適的景，把它拍下來。
渲染器的作用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。如圖：
3、chapter1.2.js
three.js學習：初學three.js，從立方體開始