iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 27

JS Library 學習筆記:Three.js 初見面,在2D畫面創造三維世界 (二)

上一篇建立了基礎的場景後,接下來讓我們來建立物件後將物件放入場景中。Three.js提供了多種幾何圖形,可以直接建構相關物件做使用,而若希望運用更複雜的圖像,可以從3D圖庫找尋或是在3D軟體中建模輸出成glTF(或是FBX、OBJ等檔案類型),利用Loader載入使用。

在基礎場景中,放上立體幾何圖型

事前準備:scene、camera、renderer建立基礎場景

1. 建立圖型物件
Three.js內建多個立體幾何圖形,包含立方體BoxGeometry、圓錐體ConeGeometry、圓柱體CylinderGeometry、球體SphereGeometry、圓環TorusGeometry等,皆利用new建構出相關圖型,不同圖型的所需參數不同,以立方體為例,可以分別傳入x軸寬度、y軸高度、z軸深度,另外也可再傳入寬度、高度、深度表面的分段數,主要影響非平面的表面呈現,分段數越高,呈現曲度的精細度也越高。

const boxGeometry = new THREE.BoxGeometry(2,3,1); //傳入x軸寬度2、y軸高度3、z軸深度1 (預設為1)。

2. 物件掛上mesh表面網格
建構出相基礎圖型骨架後,需利用THREE.Mesh()將mesh網格套上基礎圖型上,讓物件具有表面網格,才能算是完成基礎物件的建立。

const boxGeometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh( boxGeometry );

3. 放進場景中並調整位置
另外,若沒有特別設定物體的位置的話,預設狀態可能與攝影機重疊,因此,可以將攝影機的z軸位置一並調整。

const boxGeometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh( boxGeometry );
scene.add( cube );
camera.position.z = 5;

4. render 進行場景和攝影機渲染
最後,利用渲染器渲染場景和攝影機,就能看到物件出現在場景中囉!

renderer.render( scene, camera );

到這裡就大功告成囉! 可以在場景中發現一個白色立方體的正面(因camera的視角關係,看起來像是2D平面),我們可以也調整一下攝影機的x、y軸位置,稍微調整一下方向,就能依照攝影機的透視投影方式,呈現對應的投影圖像。

<script type="module">
import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

//建立基礎場景(準備scene、camera、renderer)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//建構立體圖形(立方體)
const boxGeometry = new THREE.BoxGeometry();

//mesh生成物件的表面網格
const cube = new THREE.Mesh( boxGeometry );

//把物件加進場景scene中
scene.add( cube );

//調整攝影機camera位置
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 5;

//利用renderer渲染場景與攝影機
renderer.render( scene, camera );
</script>

上一篇
JS Library 學習筆記:Three.js 初見面,在2D畫面創造三維世界 (一)
下一篇
JS Library 學習筆記:Three.js 初見面,在2D畫面創造三維世界 (三)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言