初識 Three.js:第一個小 demo

Ozzie發表於2019-12-19

第一次接觸 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 協議》,轉載必須註明作者和本文連結

相關文章