更多three.js教程可以關注郭隆邦技術博客
如果你第一次接觸Three.js這款WebGL的3D引擎,那麼你肯定想先實現一個小的案例就好了,筆者寫這篇文章的目的也正在於此,通過一個麻雀雖小五臟俱全的小代碼案例來向你展示threejs的風貌。
通過threejs繪製一個立方體
你可以先把下面的代碼複製到一個.html文件中,使用任意一款瀏覽器打開,查看一下效果,注意引入three.js引擎的時候路徑要對,你可以暫時把threejs理解成和jquery一樣需要引入,只不過兩個的作用不一樣,但是都是一個可以運行瀏覽器環境下的一個JavaScript庫。
也許你第一次接觸threejs下面的代碼很難理解,這是正常的,對於大多數前端工程師是沒有3D或圖形學基礎的,當然了對於有3D基礎,比如你用過unity3D,但是不瞭解前端,對於你來說理解下面的代碼應該比較容易,主要是補充一下前端知識,對於前端工程師來說主要是學習3D的相關知識。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個three.js文件_WebGL三維場景</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隱藏body窗口區域滾動條 */
}
</style>
<!--引入three.js三維引擎-->
<script src="../../three.js-master/build/three.js"></script>
<!-- <script src="./three.js"></script> -->
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
/**
* 創建場景對象Scene
*/
var scene = new THREE.Scene();
/**
* 創建網格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //創建一個球體幾何對象
var geometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材質對象Material
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中
/**
* 光源設置
*/
//點光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點光源位置
scene.add(point); //點光源添加到場景中
//環境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
* 相機設置
*/
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 200; //三維場景顯示範圍控制係數,係數越大,顯示的範圍越大
//創建相機對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設置相機位置
camera.lookAt(scene.position); //設置相機方向(指向的場景對象)
/**
* 創建渲染器對象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//設置渲染區域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
//執行渲染操作 指定場景、相機作爲參數
renderer.render(scene, camera);
</script>
</body>
</html>
場景
場景對象主要包含模型對象和光源對象,模型對象就是你要現實的三維物體,模型對象是由幾何體和材質信息構成,光源的存在主要是爲了模擬生活中光的漫反射、鏡面反射現象,使渲染效果更逼真。
/**
* 創建場景對象Scene
*/
var scene = new THREE.Scene();
模型對象
一個立方體效果,主要要通過場景的scene方法add,把網格模型mesh插入到場景中,否則渲染的時候不會顯示。
/**
* 創建網格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //創建一個球體幾何對象
var geometry = new THREE.BoxGeometry(100, 100, 100); //創建一個立方體幾何對象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材質對象Material
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中
光源對象
光源對象和模型對象一樣需要通過add方法把光源插入到場景中,這樣的話光源對象和模型對象就是場景對象Scene的子對象,通過父對象可以訪問子對象或者遍歷子對象。
不同光的光源類型都是對生活中不同的光源進行抽象創建的光源模型。
/**
* 光源設置
*/
//點光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點光源位置
scene.add(point); //點光源添加到場景中
//環境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
相機對象
相機對象你可以簡單理解爲生活中的相機,比如一個場景是特定的,但是相機不同的拍攝角度,得到的照片是不同的,對於WebGL也是一樣的,threejs的中相機對象也是模擬生活的相機,你可以設置相機的位置,可以設置相機的觀察視線方向。當然如果你有圖形基礎,那麼應該知道相機對象實際包含的就是投影矩陣和視圖矩陣,如果你沒有圖形學基礎,你就把threejs中的相機理解成生活中的相機。
對於初學者而言,也沒有必要先去了解相機對象每一個參數,先有個大概印象就可以。
/**
* 相機設置
*/
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 200; //三維場景顯示範圍控制係數,係數越大,顯示的範圍越大
//創建相機對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設置相機位置
camera.lookAt(scene.position); //設置相機方向(指向的場景對象)
渲染器對象
聯繫實際生活,如果場景有了,相機有了,那麼就需要一個人扣動相機的拍照開關執行拍照操作,這樣就可以得到一張照片。對於three.js系統而言是一樣的,threejs引擎提供了一個渲染器對象,通過WebGLRenderer API可以創建。該渲染器對象有一個render方法,該方法執行的時候,就相當於相機的拍照動作執行,執行render方法可以得到一張圖片顯示在網頁上。render方法的參數是場景和xdji相機,程序中可能有多個相機對象或多個場景對象,render方法把哪個場景作爲參數,執行render方法,就得到哪個場景的渲染結果。
/**
* 創建渲染器對象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//設置渲染區域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
//執行渲染操作 指定場景、相機作爲參數
renderer.render(scene, camera);