World Building in Three.js

擅長3D電腦圖形、跨瀏覽器的JavaScript函式庫: Three.js的學習與實驗。我傾向以「創建世界」(World Building)的觀念來使用這項工具,而且是創建「即時運算出的世界」,來反映WebGL的優勢與特性,這個世界不一定需要擬仿物理世界,但可以有自成一體的迷人。

除了流暢的3D空間營造、粒子物理特效以外,我認為尤其在於WebXR的部分很有潛力,在Three.js製作出3D空間或情境、掛到網路上產生連結,就可以直接透過無線的Oculus Quest頭戴VR顯示器直接連網體驗, 非常方便。在未來5G網速下,這是直接且快速的創意分享方式。以下是我從Three.js的example來做修改的基礎練習,以及2021年以海洋廢棄物為主題的影像動畫作品:


3D Primitives
basic_tree : a basic scene with trees

Physical Simulation
Physical_ocean : A shader that simulates ocean surface
refraction : simulating a transparent surface
Physical_light : simulating light and shadow

VR (need a VR headset to watch)
VR_Boxgeometry : a boxgeometry in VR
VR_haptics : interactive sound experience
VR_panorama basic : panorama using an equirectangular image
VR_panorama_depth_TI_LI : panorama using equirectangular image and depth map. Student Ting-Yi Li’s degree show project
VR_lorenzattractor : viewing Lorenz light trace in a dark space
VR_3DLoader_gltf : using a gltf model
VR_3DLoader_OBJ : using an OBJ model
3DAnimation_gltf : using a gltf animation
sketchUp model : walking in a sketchUp space model

Ocean Wastes (Part of my Solo Exhibition in 2021)
Ocean_Wastes_Audio : A scenario of a possible future. I Imagined the scene of human cities being flooded by the sea after the sea level has risen sharply.
Gift_For_the_Ocean_2021 (海洋禮讚):When everything is part of the circle of pollution, now even a digital object has a trace of physical pollution. In this sense, how do we understand the simulation of our ha