mrjasonweaver / react-3d-app Goto Github PK

• Loading the submarine blender model
• Changing the submarine color
• Moving the scene with mouse

• Render one cube and break out Box component
• Create a menu component that changes a current cube color state
• Refactor Box component to allow state change from menu
• Change menu colors
• Write outline for steps

• Load textures asynchronously
• Clean up UI

• #12
• #13
• #14
• #15

index.js:12 Uncaught Could not load ./textures/Metal030_1K_Color.jpg: undefined
handleAsset @ index.js:12
useAsset @ index.js:69
useLoader @ react-three-fiber.esm.js:1607
useTexture @ useTexture.js:8
Scene @ Scene.js:8
renderWithHooks @ react-reconciler.development.js:6412
mountIndeterminateComponent @ react-reconciler.development.js:9238
beginWork @ react-reconciler.development.js:10476
callCallback @ react-reconciler.development.js:12184
invokeGuardedCallbackDev @ react-reconciler.development.js:12233
invokeGuardedCallback @ react-reconciler.development.js:12292
beginWork$1 @ react-reconciler.development.js:16531
performUnitOfWork @ react-reconciler.development.js:15337
workLoopSync @ react-reconciler.development.js:15268
renderRootSync @ react-reconciler.development.js:15231
performSyncWorkOnRoot @ react-reconciler.development.js:14821
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157

Hi I read your article here - https://jasonweaver.name/loading-textures-for-3d-models-in-react-three-fiber/
which I tried to follow, though because the state is updating in the parent, is it not re-rendering the entire Scene each time it changes?

• Basic animation
• Propeller animation
• Propeller animation on up arrow

• Make the submarine appear in an ocean environment

• Load a texture for the submarine
• Add ability to change to 3 textures