Multiple independent elements

[migsdigs]

Hi there,

Is there functionality to have multiple different 3D objects on a canvas and interact with them separately (rather than moving the camera and altering the view of all the objects). Currenlty I have three 3D objects (cube, sphere and cylinder).

This is part of my current implementation:

<div class="grid-container">
    <SC.Canvas antialias background={new THREE.Color("rgb(34,34,36)")}>

        <!--Cube 3D component  -->
        <SC.Mesh 
            geometry={new THREE.BoxGeometry()} 
            material={new THREE.MeshStandardMaterial({ color: 0x03bafc })}
            scale={[size, size, size]}
            rotation={[spin1, spin1, spin1]}
            position={[-2.5,0,0]}
        />

        <!-- Sphere 3D Component -->
        <SC.Mesh
            geometry={new THREE.SphereGeometry()}
            material={new THREE.MeshStandardMaterial({ color: 0xfa0724 })}
            rotation={[0, -spin2, 0]}
            scale={size}
        />

        <!-- Cylinder 3D component -->
        <SC.Mesh 
            geometry={new THREE.CylinderGeometry()} 
            material={new THREE.MeshStandardMaterial({ color: 0xa670db })}
            scale={[size/2, size, size/2]}
            rotation={[spin3, spin3, spin3]}
            position={[2.5,0,0]}
        />

        <SC.PerspectiveCamera position={[0, 0, 10]} />
        <SC.OrbitControls
            target={[0, 0, 0]}
            enableZoom={false}
            enablePan={false}
            enableDamping
            maxPolarAngle={Math.PI * 0.5}
        />
        <SC.AmbientLight intensity={0.2} />
        <SC.DirectionalLight intensity={0.2} position={[-2, 3, 2]} />
    </SC.Canvas>

</div>  <!-- End of grid-container div -->

I have also tried to create separate canvases in a 1x3 grid and occupying each of these canvases with one of these shape children, which unfortunately did not work.

I would appreciate any help.