CODEWITHSUNDEEP
reactjstypescriptthree.jsreact-three-fiberdrei
C.V.Alkan
C.V.Alkan

Reputation: 99

How to move the camera using react-three-fiber and @react-three/drei?

I'm drawing a 3d model with the following configuration.

The following is a CodeSandBox with a model drawn.
CodeSandBox-A

The drawn model is close to the top of the canvas, and I want to center it.

canvas

Could you please tell me how to center the model on the canvas?
This is the first time I've touched Three.js, so I'm sure I may have made some elementary mistakes.

The code is as follows.
I referred to the following document for the props of the Canvas component.
React Three Fiber Documentation

import { useMemo, Suspense } from "react";
import "./style.css";
import { Canvas } from "@react-three/fiber";
const { useGLTF, OrbitControls, Stage } = require("@react-three/drei");

const CanvasContainer = () => {
  const { scene } = useGLTF("/scene.glb");
  return (
    <Canvas camera={{ fov: 70, position: [0, 1000, 1000] }}>
    // No matter what I put in this "position" value, I could not see any change in the canvas.
      <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
      <Stage>
        <group dispose={null}>
          <primitive scale={[1, 1, 1]} object={scene} />
        </group>
      </Stage>
    </Canvas>
  );
};

const App = () => {
  const isWindow = typeof window === "undefined";
  const memoCanvas = useMemo(() => <CanvasContainer />, []);

  return (
    <>
      <h1>Canvas</h1>
      <div className="canvas_container">
        {!isWindow && <Suspense fallback={<div />}>{memoCanvas}</Suspense>}
      </div>
    </>
  );
};

export default App;

setDefaultCamera removed in v6.x. · Issue #1147 · pmndrs/react-three-fiber
I also tried the code to use useThree as described in the above Issue.
The following is its CodeSandBox.
CodeSandBox-B
As you can see from the CodeSandBox, I was unable to move the camera.

Upvotes: 3

Views: 12360

Answers (1)

hpalu
hpalu

Reputation: 1435

give orbitcontrols the "makeDefault" prop, then it should in the center. otherwise check out dreis Bounds component. see: https://twitter.com/0xca0a/status/1453807293074661385

the memocanvas thing btw makes no sense, don't put jsx into usememo.

Upvotes: 4

Related Questions