Artifact
🖼️

Artifact

Tags
Node.js
Three.js
JavaScript
HTML
CSS
Published
January 31, 2024
Author
Schedule

Summary

Artifact Adventure is a dynamic Three.js demo that transforms curated art from The Met Museum's API into an immersive 3D experience directly in your browser.
notion image
 

Features

In Artifact Adventure, users:
  • Navigate a first-person 3D virtual art exhibit with WASD and mouse controls.
  • Render different virtual environments instantly.
  • Lighting, shadows, textures, and reflections respond in real-time to their virtual environments.
  • View artwork from The Met Museum API rendered in 3D.
 

Instructions

Interacting with Artifact Adventure is easy and intuitive:
  • Start the demo with a left-click on your mouse.
  • Move around the 3D environment with your WASD keys.
  • Look at your surroundings with your mouse.
  • Jump with the spacebar.
  • Pause the demo by pressing ESC.
 

Object-Oriented Design Principles

Each Three.js component handles a specific part of WebGL to render high-performance 3D graphics in your browser.
Artifact Adventure is composed of the following components:
  • Camera
  • Scene
  • Lights
  • Mesh Objects
  • Environment Map
  • Renderer