Class Project / FRA 500 Human Robotics Interface

Software Review : three.js (Javascript Library)

Overview

three.js เป็น Javascript library ที่มีไว้เพื่อทำให้การสร้าง 2D และ 3D content บน webpage เป็นเรื่องที่ง่ายยิ่งขึ้น โดย three.js ใช้ WebGL ในการวาด 3D content (WebGL เป็น low-level system ที่ใช้ในการวาดจุด เส้น และสามเหลี่ยม) ซึ่งสิ่งที่ three.js เข้ามาช่วยจัดการคือ ฉาก, แสง, เงา, วัสดุ, การคำนวณ 3D และอื่น ๆ โดยสามารถแสดงเป็นโครงสร้างได้ดังนี้

รูปแสดงโครงสร้างของ three.js app อย่างง่าย

Fundamental Features

  • Primitives
  • Screen Graph
  • Materials
  • Textures
  • Lights
  • Cameras
  • Shadows
  • Fog
  • Render Targets
  • Custom Geometry

Examples

Kubota Future Cube: https://www.kubota.com/futurecube/

Eyes on the solar system: https://eyes.nasa.gov/apps/solar-system/#/home

Windland: https://windland-neotix.vercel.app/

Design the next iPhone: https://neal.fun/design-the-next-iphone/

Tutorial: