I am using the @react-three/fiber to create a canvas and then some objects inside the canvas. In certain cases I want the scene to be inverted in front of me. I tried using the useThree
hook but that doesn't seem to work at all.
Here's my canvas
<Canvas >
<OrbitControls maxDistance={900} minDistance={30} enablePan={true} ></OrbitControls>
{(props.socketType == constants.socketNames.leroyMerlin) && <LampLoader index={0} />}
{(props.socketType == constants.socketNames.e27) && <LampLoader index={1} />}
<pointLight position={[0, 200, 200]} intensity={0.5} />
<ambientLight intensity={0.3} />
<Environment near={1} far={1000} resolution={256} preset="warehouse" />
<mesh >
<sphereBufferGeometry />
<meshStandardMaterial color="hotpink" />
</mesh>
{
props.meshObject != undefined ? <primitive object={props.meshObject} position={[0, 0, 0]} /> : <></>
}
<CameraRotator />
</Canvas>
Here's the camera rotator function:
function CameraRotator() {
const stuff = useThree();
stuff.camera.rotateOnWorldAxis(new Vector3(0, 0, 1), Math.PI) //doesn't work
// stuff.camera.rotateOnAxis(new Vector3(0, 0, 1), Math.PI) doesn't work
// stuff.scene.rotateOnAxis(new Vector3(0, 0, 1), Math.PI) doesn't work
// stuff.scene.rotateOnWorldAxis(new Vector3(0, 0, 1), Math.PI) doesn't work
console.log(stuff);
}
This is the lamp, I just want to flip it upside down is all. before you ask, yes I've tried taking out the orbit controls and it still doesn't work but ideally I want a solution where the orbit controls work and the object is flipped.