I have a cube mesh on a canvas here and I would like to move it to the left (change its X-axis) without changing its point of rotation. I have tried applying the argument position={[1,0,0]} to the mesh component in the box component but it seems that it only shifted the box away from the point of rotation, which is at the center of the canvas. I am planning on creating more 3d boxes similar to the one in the image below in the future, so how would I position them while also keeping each box's point of rotation at the center of the box, separately?
Here is my code:
import React from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
function Box() { return ( <mesh> <boxBufferGeometry attach="geometry" /> <meshLambertMaterial attacah="material" color="white" /> </mesh> );
}
const Background= () => { return ( <Canvas> <OrbitControls enableZoom={false} rotateSpeed={2} autoRotate={true} autoRotateSpeed={5} /> <ambientLight intensity={0.5} /> <spotLight position={[10, 15, 10]} angle={0.3} /> <Box /> </Canvas> );
};
export default Background;I am new to using React Three Fiber so any references/documentation or suggestions would be very helpful. Thanks
1 Related questions 1 Three-react-fiber Setting the rotation axis to the centre of the model 1 how to swap elements on React Three Fiber / ThreeJs 2 react-three-fiber rotate around a certain axis Related questions 1 Three-react-fiber Setting the rotation axis to the centre of the model 1 how to swap elements on React Three Fiber / ThreeJs 2 react-three-fiber rotate around a certain axis 0 Position sprite at bottom center of orthographic camera 0 Objects don't overlap when rotating 3 Reposition camera to object & lookAt() (React three fiber) 2 react three fiber lock object position in canvas 1 Why setFromMatrix() position doesn't work? 2 How to make character to move around 3D world in React Three Fiber? 1 Moving an object by changing its position in useFrame does not work Load 7 more related questions Show fewer related questions Reset to default
