什么是Three.js？
如果你正在讀這篇文章，你可能對Three.js有一定的了解，那我們來簡單地介紹下Three.js是什么.
Three.js是一個庫，使得WebGL的3D效果在瀏覽器中運用很容易。而在原始的WebGL中一個簡單的立方體會變成數百Javascript和著色器代碼的行，而一個Three.js只需要一點點代碼.
本節目標是為 three.js 做簡介。我們從使用旋轉立方體來搭建場景開始。如果遇到困難需要幫助，頁面底部有可參考的源碼。
一個場景至少需要的三種類型組件
相機/決定哪些東西將在屏幕上渲染 光源/他們會對材質如何顯示，以及生成陰影時材質如何使用產生影響 物體/他們是在相機透視圖里主要的渲染隊形：方塊、球體等開始前
在計算機中保存如下 HTML 代碼，并在 js 目錄下包含 three.js，然后在瀏覽器中打開
<html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body></html>接下來的代碼都會下載 script 標簽中
創建示例場景
為了利用three.js來進行展示，我們需要三種元素：場景，攝像機，渲染器，以便來渲染攝像機中的場景。
var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
讓我們花點時間來解釋發生了什么。我們現在創建了場景，攝像機和渲染器。
在 three.js 中有幾種攝像機。我們暫時用的是 PerspectiveCamera （透視攝像機）
它的第一個屬性是視圖角（FOV)，它 是能看見的視圖范圍，其值表示角度大小。
第二個屬性是寬高比。大多數情況你想要使用被高除過之后的寬度，不然會發生像在寬屏電視上放舊電影的情況 —— 圖像看起來被壓扁了。
后面兩個屬性是近景面和遠景面。只會渲染這兩個面之間的區域。目前你不必關心這些，使用這些參數能提高性能。
接下來談談渲染器。這便是神奇之處。除了我們這里用的 WebGLRenderer 外， three.js 還提供一些渲染器用在不支持 WebGL 的老舊瀏覽器上。
除了創建渲染器實例，我們也需要設置應用渲染的尺寸。推薦使用填充整個應用的寬高 —— 本例中是瀏覽器窗口的寬高。對于性能優先的應用，你能使用 setSize 來設置更小的值，比如 window.innerHeight/2， window.innerWidth/2，會渲染一半的尺寸。
新聞熱點
疑難解答
圖片精選
