I have a 3D model which includes a building. The problem is when I load the model the camera always looks at the yellow marked point[given image]. When I zoom in and out, rotate the model everything is happening centering that yellow point. When I extremely zoom it goes to the point. But what I want is to always look at the building whether I'm rotating or zooming it should look at the building, not that point.
I'm using a perspective camera and orbit controls with react-three/fiber. How can I solve this problem?
Here is my code:
import { Canvas } from "@react-three/fiber";
import { useLoader, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import React, { useEffect, useMemo, useRef, Suspense, useState } from "react";
import {
Environment,
OrbitControls,
PerspectiveCamera,
} from "@react-three/drei";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import model2 from "../../3D_Model/LeftBankCombined.glb";
import styles from "./style.module.scss";
import grassTexture from "../../3D_Model/textures/Grass.PNG";
import Curbs from "../../3D_Model/textures/Asphalt.PNG";
import ButtonTest from "./ButtonTest";
const textureLoader = new THREE.TextureLoader();
const grass = textureLoader.load(grassTexture);
const curbs = textureLoader.load(Curbs);
const Model = ({ hide }) => {
//gltf loader
let unitBox = [];
const gltf = useLoader(GLTFLoader, model2);
let mesh = gltf.scene;
mesh.children[0].traverse((child) => {
if (child.material) {
var name = child.material.name;
if (name.includes("Glass") || name.includes("GLASS")) {
child.material = new THREE.MeshPhysicalMaterial({
metalness: 1,
roughness: 0,
// map:grass,
envMapIntensity: 1,
transparent: true,
opacity: 0.09,
});
console.log(child.material);
}
}
});
mesh.scale.set(0.025, 0.025, 0.025);
return (
<>
<primitive object={mesh} scale={0.025} />
</>
);
};
const Axis=()=>{
const axesHelper = new THREE.AxesHelper( 5 );
axesHelper.position.x=40
axesHelper.position.y=0
axesHelper.position.z=-100
return(<>
<primitive object={axesHelper}/>
</>)
}
function Dolly() {
// This one makes the camera move in and out
let flag=true
useFrame(({ clock, camera }) => {
// camera.position.z = 100 + Math.sin(clock.getElapsedTime()) * 30
console.log(camera.position.z);
if(flag){
camera.position.z = Math.sin(clock.getElapsedTime()*0.1) * 200;
console.log(camera.position.z)
}else{
camera.position.y = Math.sin(clock.getElapsedTime()*0.1) * 200;
if(camera.position.y==150){
flag=false
}
}
},[]);
return null;
}
export default function App() {
const [hide, setHide] = useState(false);
const click = () => {
console.log("Click");
};
return (
<div className={`${styles.App}`}>
<Canvas>
<PerspectiveCamera makeDefault position={[120, 150, -200]} onUpdate={(c) => c.updateProjectionMatrix()}/>
<ambientLight intensity={0.5} />
<directionalLight position={[0, 20, 0]} />
<OrbitControls
maxPolarAngle={Math.PI / 2}
autoRotate={false}
autoRotateSpeed={0.5}
/>
{/* <Dolly /> */}
<Axis/>
<Suspense fallback={null}>
<Model hide={hide} />
{/* <Environment preset="sunset" background /> */}
</Suspense>
</Canvas>
<ButtonTest click={click} />
</div>
);
}
