mykethearchangel/mechalabs3dmoto

3D model rendering of MechaLabs' project 175

Requirements:

Node.js
VS Code , 
Blender ,  Blender to Web

Resources:

Flying Apartment Asset
React Three Fiber: Three.js Renderer
Drei: React Three Fiber Helpers
Three.js: 3D Engine
Vite: Static Web Server
CodeSandbox: Online Prototyping Container (optional)

Installation

npm install

Getting Started

Open a model in Blender you want to publish (places like CG Trader are a good start)
Export to public/model.glb

open a terminal to /src directory
run npx gltfjsx ../public/model.glb
rename the new Model.js to Model.jsx
run npm run dev from terminal
look at what you did, tune and repeat

Scripts

npm run dev npm run build npm run preview npm run sandbox

detailed notes for Blender -> Web3D Models

Import your model 
Models CAN be created progmatically if that makes sense to do.
Models can come from multiple files
test things with gltf export NOT glb
Split parts
    by whats separate
    by materials
    select faces + more technique
Reduce geometry
    Remove unnecessary components for 3d printing
    highlight and dissolve unnecessary vertices
    limited dissolve intricate parts
join parts and set origins logically for use later
rename parts to what's easy to recognize
parent objects based on what needs to move together
add materials (detailed separately)
add lights (detailed separately)

Materials

Materials in Blender
UVs
    bulk script on Gist
GLTF export materials
BSDF Material
Baking Materials
Materials in R3F
    Special materials
    Cloning
    Modifying
    Unique capabilities

Lighting

more lights == slower performance
use '-s' in gltfjsx transform
    include drei Instances if using -i
add these properties to each light: castShadow shadow-mapSize={[2048, 2048]} shadow-bias={-.0000001} in Model.jsx
adjust intensity values and shadow-bias
add castShadow receiveShadow to instance Merged tag in Model.jsx

Animating

useFrame lerp https://medium.com/@zmommaerts/animate-a-camera-in-react-three-fiber-7398326dad5d
Theater js https://www.theatrejs.com/
useAnimations:
    naming is everything!
    NLA tracks are a pain
    can group virtually
    onClick interactions
    play forward and backward.
Spring https:/docs.pmnd.rs/react-three-fiber/tutorials/using-with-react-spring
Drei Animations