初識 Three.js：第一個小 demo

Ozzie發表於2019-12-19
JS

第一次接觸 Three.js，雖然目前沒有確定以後是否從事 WebGL 的工作……這個蠻好玩的，先記錄在這裡

安裝

  1. 安裝 three.js
    • 建立資料夾 ThreeJs，由於 Three.js 目前已經作為一個 npm 包來進行了釋出，我們這裡直接使用 npm 安裝
      npm install
npm install three
  2. 安裝 webpack
    • 由於瀏覽器不支援 ES6 的語法，所以這裡需要打包
      npm install webpack webpack-cli --save-dev

程式碼解析

  1. 建立 index.html
    <!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <style type="text/css">
     body: { margin: 0; }
     canvas: { width: 100%; height: 100%; }
 </style>
 <body>
     <script src="./dist/bundle.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>
  2. 建立 demo.js
    //引入檔案
var THREE = require('three')
//場景、相機、渲染器
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);
//將渲染器的元素新增到HTML文件中
document.body.appendChild(renderer.domElement);
//建立立方體物件
//這個立方體物件包含了一個立方體中所有的頂點（vertices）和麵（faces）
var geometry = new THREE.BoxGeometry(1, 1, 1);
//材質選擇MeshBasicMaterial，所有的材質都將被應用於立方體的屬性物件，為簡單起見我們在此只設定了一個color屬性
var material = new THREE.MeshBasicMaterial({
     color: 0x00ff00,
});
//建立網格（Mesh）
//網格是一個物件，它包含有一個幾何體以及應用在此幾何體上的材質
//我們可以直接將網格物件放置到我們的場景中，並讓它在場景中自由移動
var cube = new THREE.Mesh(geometry, material);
//預設情況下，當我們呼叫 scene.add()，物體會被新增到左標為 (0, 0, 0) 的位置
scene.add(cube);
//預設位置可能會使攝像機和立方體互相重疊（即相機位於立方體中），為防止這種情況發生，我們可以將攝像機稍微向外移動一些即可
camera.position.z = 5;
//渲染場景
//現在網頁中還沒有出現任何東西，因為還沒有對它進行真正的渲染
//我們需要呼叫：渲染或者動畫迴圈
var animate = function () {
     //建立迴圈：讓渲染器能夠在螢幕每次重新整理時對場景進行繪製（大多數螢幕的重新整理頻率為60次/秒）
     //用 requestAnimationFrame 來實現重新整理功能的優點就是當使用者切換到其他的標籤頁時，它會暫停，因此不用白白浪費處理器資源
     requestAnimationFrame(animate);
     //使立方體旋轉
     //現在觀察網頁，確實有一個綠色的立方體，現在我們放它旋轉起來
     cube.rotation.x += 0.01;
     cube.rotation.y += 0.01;
     renderer.render( scene, camera );
}
animate();
  3. 打包檔案
    • 由於專案比較簡單，在此就不專門配置 webpack.config.js 了，直接執行命令打包
      npx webpack --entry=./demo.js --output-filename=bundle.js --mode=development

檢視結果

瀏覽器檢視 index.html 即可檢視結果

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章