s3ththompson / 3d-interactivity-lab

3D Interactivity Lab for GSAPP CDP

3D Interactivity Lab

Setup

Download Node.js. Run the following commands:

# Install dependencies (only the first time)
npm install

# Run the local server at http://localhost:5173
npm run dev

# Build for production in the dist/ directory
npm run build

Starter Template vs. Final Examples

The main branch of this repository is a series of templates for different lessons.

The final examples can be found on the final branch.

Lessons

1. Introduction to React (src/1-react.jsx)
2. Building With Components (src/2-components.jsx)
3. Three.js in React (src/3-three.jsx)
4. Building a Scene with Models (src/4-model.jsx)
5. Debugging in 3D Space (src/5-debug.jsx)

References

• React Beta Docs
• Three.js docs
• React Three Fiber docs
• Drei: Useful Helpers for React Three Fiber
• React Three Fiber examples
• JavaScript.info

Exporting Models from Rhino

1. Organize model materials into separate Rhino layers

2. Select desired objects for export

3. File > Export Selected > Save as OBJ (*.obj)

4. In the OBJ Export Options, check the following settings to ensure that layers are exported as separate parts of the model

   • Naming
     • Export Rhino object names: Do not export object names
     • Export Rhino layer/group names: Layers as OBJ groups
   • Mesh
     • Use render meshes