1

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);
}

enter image description here

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.

Vipul Rajan
  • 494
  • 1
  • 5
  • 16

0 Answers0