Skip to content

Navigational experimentation in the context of an interactive web-based 3D experience. Using camera position to define state in a web application.

Notifications You must be signed in to change notification settings

mbritton/react-three-camera-lab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React / Three.js Camera Lab

A sketchbook for ideas that'll be used in real projects. Concepts in 3D navigation explored as structures accessed via programmatic camera movements.

These experiments (ab)use Zustand for state management, react-spring for animation, react-three-fiber for 3D (integrates Three.js)

Mike Britton 2023

Experiment 1 - Basic Structured Movement

Move from a central point through one of six routes.

Experiment 2 - Zoom To a Clicked Screen

Explore an arrangement of screens.

Experiment 3 - Rotatable and Slerpable Group

Explore an arrangement of randomly positioned and rotated screens. Grouping and an orbit.

Experiment 4 - Video and Webcam Fun

Webcam in a scene, on a Panel.

Experiment 5 - Zoom to full screen color

Transition between 3D nav and a traditional screen.

General

Use this Three.js editor to load the scene JSON files in the resources/json folder of this repo. https://threejs.org/editor/

Dependencies

About

Navigational experimentation in the context of an interactive web-based 3D experience. Using camera position to define state in a web application.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published