本文主要為大家介紹了three.js中文文件學習之創建場景的相關資料，文中透過範例程式碼介紹的非常詳細，對大家學習或使用three.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
什麼是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，會渲染一半的尺寸。
如果你想低解析度地渲染整個尺寸，你可以設定setSize 的第三個參數— uodateStyle 為false ，如果canvas 元素寬高都為100%，則會以1/2 解析度渲染應用。
再爾，我們需要在 HTML 中加入被渲染的元素。渲染器透過 canvas 來為我們展示場景。
「都很好，但之前說的立方體呢」 讓我們現在再加上。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;登入後複製
我們需要 BoxGeometry來建立立方體。這個物件包含立方體所有的點（頂點）和填充（面）。我們以後會討論。
除了幾何體外，我們還需要材質為其上色。 three.js 提供了一些材質，但我們暫且使用 MeshBasicMaterial。所有材質接受並套用一個包含所有屬性的物件。為簡單起見，我們只提供一個顏色屬性： 綠色 —— 0x00ff00 。和 CSS 和 PS 裡的一樣採用十六進制的顏色。
我們需要的第三個要素是 Mesh。 mesh 是一個將材質應用到幾何體上的對象，然後我們能將其放入場景中，並自由移動。
當我們呼叫 scene.add() ，我們新增的會預設顯示在座標（0，0,0,）。這會導致攝影機和立方體內部重疊。為了避免這一點，我們簡單地把攝影機往外移一點。
渲染場景
如果你在 HTML 檔案中複製瞭如上程式碼，螢幕不會顯示東西。因為我們還沒渲染場景。所以我們需要呼叫渲染器或動畫循環。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();登入後複製
這會建立一個讓渲染器每秒繪製一幀的循環。如果你對網頁遊戲程式設計不了解，你可能會說「為什麼不 寫setInterval 函數呢？」事實上，我們可以，但是 requestAnimationFrame 好處更多。最重要的好處是當瀏覽器切換到另一個標籤頁時，requestAnimationFrame 會暫停渲染，因此不會浪費寶貴的處理能力和電池壽命。
讓立方體動起來
如果你插入了我們剛剛創建的程式碼，你應該會看見一個綠色的立方體。讓它旋轉起來不至於單調。
在animate 函數中的 renderer.render 上加入以下程式碼：
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
登入後複製
它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。
结果
恭喜！你现在创建好了第一个 three.js 应用。很简单，但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html>
<head>
<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>
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 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>登入後複製
相关推荐：
three.js通过模块导入实例分享
three.js如何本地运行详解
实例讲解Three.js加载外部模型
以上是three.js創建場景實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
