Replies: 1 comment 3 replies
-
|
very easy to do: https://codesandbox.io/s/romantic-tharp-0buje simply switch the canvas to concurrent. now everything you put into suspense will execute once everything in there has resolved: <Canvas concurrent>
<Suspense fallback={null}>
<Model />
<MoveCamera />it sucks that this doesnt work without a concurrent react root, i think they either made a mistake or couldn't quite solve it. in legacy react each thing in suspense renders immediately when its resolved. thankfully concurrent react will become the default or the norm. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, thanks for the answer. If I am understanding you correctly, this means that the MoveCamera component will only be executed once the Model component is finished loading? And if I change the props.url property (which would cause a new model to load), that would retrigger the MoveCamera component? And I'm still not sure how to access the camera in MoveCamera? |
Beta Was this translation helpful? Give feedback.
-
yes.
yes. if you reset the camera that is up to you.
and just like in the example: const vec = new THREE.Vector3()
function MoveCamera() {
useFrame(({ camera }) => {
camera.position.lerp(vec.set(0,0,10), 0.1)
})
return null
}
<Canvas concurrent camera={{ position: [0,0,200] }}>
<Suspense fallback={null}>
<Model />
<MoveCamera />this will zoom the camera from z 200 to 10 once the model has finished loading. if you load a new model, the movecam comp will be called once again, but obviously the camera is now at 10 already and the lerp isn't going to change that. but you can always reset it, from anywhere: const { camera } = useThree()
useEffect(() => void camera.position.set(0, 0, 200), [url]) |
Beta Was this translation helpful? Give feedback.
-
|
btw, this is react, you can also use mount/unmount transitions, with react-spring for instance. the same exact way you'd transition a div in react-dom. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I am new to React.js and declarative programming so this is somewhat confusing to me. I managed to load a model and render it with the code below. Now I would like to recalculate the three.js camera position once after the loading is complete. I know I can get the camera from
useThreeoruseFrame, but then those are called after canvas resizes or for every frame. I thought ofuseEffectafter I load the asset, but then how do I get the camera in there?Beta Was this translation helpful? Give feedback.
All reactions