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.