運用 ThreeJS 貼圖材質特性，將電影平面海報視覺 3D 化
ThreeJS 簡介
ThreeJS 是一套基於 WebGL 開發出的 Javascript 函式庫，讓網頁 3D 的開發者能在各瀏覽器中建立 3D 場景、動畫。
基本元素要素
場景 Scene、相機 Camera、燈光 Light、幾何結構 Geometry、材質 Material、渲染 Renderer
相機透視觀念
透視相機(perspective Projection) 畫面有遠近感，遠的物體比較小，近的比較大，符合現實人眼睛觀看的視角。
正交投影相機(Orthographic Projection) 畫面沒有遠近差異，全部物體看起來都在同樣的距離上。
範例
ThreeJS 其實是主要製作出3D互動畫面，但因為手邊沒3D模型。
剛好最近看到電影主題，覺得很適合運用 ThreeJS 貼圖材質特性與滑鼠移動來呈現偽3D效果。
安裝
使用 npm 安裝 threeJs 與 dat.gui
import './style.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
設置相機
PerspectiveCamera( fov, aspect, near, far )
/**
* Camera
*/
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 3
// z 數值越大，相機越遠
scene.add(camera)
匯入圖片
運用TextureLoader引入圖片
// Texture loader
const loader = new THREE.TextureLoader();
const kingKong = loader.load('/img_kong.png')
const kingKong_grey = loader.load('/img_kong_grey.png')
const kingKong_alpha = loader.load('/img_kong_grey.png')
const godzilla = loader.load('/img_godzilla.png')
const godzilla_grey = loader.load('/img_godzilla_grey.png')
const godzilla_alpha = loader.load('/img_godzilla_grey.png')
const bg = loader.load('/scene.png')
輔助
畫面右上角，方面一邊看畫面一邊調整數值
// Debug
const gui = new dat.GUI()
宣告畫布
// Canvas
const canvas = document.querySelector('canvas.webgl')
設定場景並設定背景圖
// Scene
const scene = new THREE.Scene()
scene.background = bg;
主角設置效果
產生一張幾何平面給予寬高。
PlaneBufferGeometry(width , height , widthSegments, heightSegments )
接下來是讓平面圖產生立體效果：
displacement 使用黑白圖像作為模型的凹凸貼圖
AlphaMap 運用色彩灰階來表現透明度，黑色完全透明，白色反之。
以下兩張圖，可以看出金剛的凹凸感與背景的融合度的差異
除了這些設定，還可至官網參考更多詳細介紹。
// Objects kingkong
const geometry = new THREE.PlaneBufferGeometry(3.5, 4, 64, 64);
// Materials kingkong
const material = new THREE.MeshStandardMaterial({
color: 'grey', // 灰階
map: kingKong, // 貼圖，顏色由color調節
displacementMap: kingKong_grey, // 凹凸材質
displacementScale: .3, // 材質凹凸數值設定
alphaMap: kingKong_alpha, // 透明度設定
transparent: true // 是否將幾何物件以外變成透明
})
// Objects godzilla
const geometry_god = new THREE.PlaneBufferGeometry(5, 3.5, 80, 40);
// Materials godzilla
const material_god = new THREE.MeshStandardMaterial({
color: 'grey',
map: godzilla,
displacementMap: godzilla_grey,
displacementScale: .3,
alphaMap: godzilla_alpha,
transparent: true
})
接下來將加主角加到場景裡，並設定位置
// Mesh
const plane = new THREE.Mesh(geometry,material)
const plane_god = new THREE.Mesh(geometry_god, material_god)
scene.add(plane)
scene.add(plane_god)
plane.position.x = 1.8
plane.position.y = -0.2
plane.rotation.x = 0
plane.rotation.y = 0.2
plane_god.position.x = -2.8
plane_god.position.y = -0.6
利用滑鼠移動，增加一些互動效果
/**
* mouseMove
*/
document.addEventListener('mousemove', mouseMove)
let mouseX = 0;
let mouseY = 0;
function mouseMove(event) {
mouseX = event.clientX
mouseY = event.clientY
}
最後透過 requestAnimationFrame() 週期性的調用render方法將畫面渲染出。
const tick = () =>
{
plane.rotation.y = mouseX * 0.00003
plane.rotation.x = mouseY * 0.00003
plane_god.rotation.x = mouseY * 0.00003
plane_god.rotation.y = mouseX * 0.00003
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
結語
ThreeJs 具備輕量函式庫的特性，可以運用在網頁需要3D的商品或場景上，像是小遊戲、品牌官網、強烈的視覺網站，等等。
它的優點就是對 WebGL 進行了良好的封裝，簡化了 WebGL 與 Javascript 之間的溝通與操作。
巧妙的運用 ThreeJs 不僅讓網頁視覺風格明確，更能加深瀏覽者的深刻印象。
以下提供一些應用的場景範例：
品牌官網：
https://fremtidensuddannelser.dk/en
小遊戲範例：
https://tympanus.net/Tutorials/TheAviator/
圖片出處
參考資料
