iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

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

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

引入Z軸創造體積、呈現空間感外,光影也是 3D 重要元素,光的強弱、位置、角度、色彩等,會與物體的「材質」一同影響呈現的樣子;除了物體與光源變化外,也可以操作觀者的畫面視角,這邊通常會用「攝影機」來形容,由視角的變化轉換與空間的利用,也能創造出有趣的效果。

在網際網路、設備與相關技術的發展下,運算效率提升讓瀏覽器能建立出精緻的畫面效果,3D網頁技術發展至今具有一定的成熟度,同時,專注於3D技術的 JavaScript Library 也逐漸豐富多元,接下來將使用相當有名的 Three.js。

剛剛提到的三軸維度、光源效果、攝影機與物體材質,也會在接下來的使用中提到這些元素,讓我們開始吧!

在2D畫面創造三維世界

安裝Three.js

可以利用npm下載安裝用於專案中,也可以利用CDN的方式將Three.js引入;另外,因 Three.js 使用的是 ES module,因此在使用時在HTML的script標籤需將type標示為module

<script type="module">
  import * as THREE from 'https://cdn.skypack.dev/pin/three@v0.133.1-dCIBIz3pnzocx0lNrLHe/mode=imports/optimized/three.js';
</script>

最新版本的連結可以在 https://cdn.skypack.dev/three 查詢,或是可以使用cdnjs網站提供的CDN: https://cdnjs.com/libraries/three.js


建立基礎場景 (scene、camera、renderer)

接下來,就可以直接在<script></script>之間建立基礎的場景,Three.js的基礎場景包含「場景 scene」、「攝影機camera」、「渲染器renderer」三個主要元素,皆使用new建構出來即可。

攝影機camera
要能在2D螢幕上呈現3D立體圖像,需要搭配物體投影的成像方法,而不同投影類型則控制在攝影機中。Three.js主要提供能呈現最接近人眼所見場景的透視投影PerspectiveCamera,和正投影(正射投影)的OrthographicCamera;另外,還有包含兩個攝影機的StereoCamera、六個CubeCamera,而包含一組攝影機的ArrayCamera,則適合運用在VR等類型的場景中。

PerspectiveCamera()需傳入四個參數,用於定義投影的錐形體,分別為垂直角度、錐體的長寬比例、近端面面積、遠端面面積;而OrthographicCamera()則需分別傳入左、右、上、下、近、遠共六個面的參數。

//建立使用透視投影的攝影機
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

渲染器renderer
利用new將THREE.WebGLRenderer()建構出基礎渲染器,可以使用setSize()函式設定渲染的大小,最後再將將渲染器的domElement屬性放置到HTML中,即可完成場景的建立。

//建構場景
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 );
//將渲染器的domElement屬性放置到HTML
document.body.appendChild( renderer.domElement );

場景建立完成後,再將立體物件建立出來、加進場景中,再透過渲染器進行渲染,就能在場景中加入靜態3D物件囉!


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

尚未有邦友留言

立即登入留言