CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
aaronbiscotti
aaronbiscotti

Reputation: 711

How to position object in react-three-fiber

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?

enter image description here

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

Upvotes: 2

Views: 10833

Answers (1)

Mahmoud Youssef
Mahmoud Youssef

Reputation: 808

The mesh component just like the spotLight component takes a position property which is an array of length 3 for x, y and z co-ordinate

Upvotes: 0

Related Questions