Multiple Canvases with individual models and different rotations

Questions
1

I need to position three models, each of which are rotated differently. I envisaged that I would create three functions to import and animate each of the three models and then export three canvases sized appropriately.

But this is not working for me. In the current test I have two canvases and models. I do get the two canvases but the second canvas has no model.

This is the code for the second model:
function Number4() {
console.log(“Function Number4 running”);
const group2 = useRef();
const { scene2 } = useLoader(GLTFLoader, “/models/BigW_only_mesh13July_centredScale2.glb”);
const { nodes2 } = useLoader(GLTFLoader, “/models/BigW_only_mesh13July_centredScale2.glb”);
const { model2} = “/Models/models/BigW_only_mesh13July_centredScale2.glb”;

useFrame(() => {

group2.current.rotation.y += 0.016;  // axis & speed

});

return (



);
}

This is the export code:

  <div id="divCanvas2">
    <Canvas id = "canvas2" className = "canvas2" style={{ background: "darkgreen"}} orthographic camera={{ zoom: 50, position: [0, 0, 100] }} >
      <ambientLight /> 
      <pointLight position={[10, 10, 10]} />
      <directionalLight intensity={4.16} />
      <Suspense fallback={<Loading />}>
     <Number4 />
      </Suspense>
    </Canvas>
  </div>

I am using the same model for testing.

I get this error in Chrome Dev Tools:
index.js:1 The above error occurred in the component:
in primitive (at Logo.js:58)
in group2 (at Logo.js:57)
in Number4 (at Logo.js:84)
in Suspense (at Logo.js:83)
in Canvas

Any suggestion welcomed

2

that line makes no sense, youre destructuring a string.

scene2, model2, nodes2, none of this stuff exists. you’re using es6 javascript destructuring wrong. most likely you mean

const { nodes: nodes2 } = ...

i also dont get why you would load the same model three times. you can use that in one call

const { nodes, materials, scene } = useLoader(...)

i would suggest you go back to javascript basics: Learn ES2015 · Babel

imo purely r3f related questions are better kept in r3f’s github discussions. you’ll get quicker answers since i don’t think many people use react in here

3

Ok, I will re-post in r3f - I will try and make this clearer… Thanks for the tip re multiple-loading - the two extra ones were just temporary for console logging and I can delete them now.

Stephen