How to Change OrbitControl target in React?

Question

I have tried using react-three-fiber and react-drei to make a model but the target of the OrbitControl is making it appear to high

import React, { useRef, useState, Suspense, useEffect } from 'react'
import { Canvas, useFrame, useLoader, useThree} from '@react-three/fiber'
import { ContactShadows, Environment, useGLTF, OrbitControls, PerspectiveCamera } from "@react-three/drei"
import { proxy, useSnapshot } from 'valtio'
import {HexColorPicker} from "react-colorful"

...

export default function App() {
  return (
    <>
    <Picker/>
    <Canvas camera>
      <PerspectiveCamera  makeDefault position={[0.1, 0.9, 1.8]} fov={60} zoom={0.9}/>
      <OrbitControls target={-0.061775 , 10, 0} />
      <ambientLight intensity={1} />
      <spotLight intensity={1} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
      <Suspense fallback={null}>
        <Bike />
        <Environment preset="city" />
        <ContactShadows rotation-x={Math.PI / 2} position={[0, -0.8, 0]} opacity={0.25} width={10} height={10} blur={1.5} far={0.8} />
      </Suspense>
      
    </Canvas>
    </>
  )
}

I have tried to change it using target variable in OrbitControls imported from @react-three/drei but the x and y axis is not working and z axis is nuts. Should I use anothe OrbitControl for React.Please help.

Nela

Answer 1

In order to change the initial target for OrbitControls, you need to wrap the prop in an array like the following:

<OrbitControls target={[-0.061775 , 10, 0]} />

thanks to r3f "Set" shortcut

Alternatively, if you wanted to declare target.x, target.y, or target.z separately, you could use the following dashed syntax:

<OrbitControls target-x={-0.061775} />

thanks to r3f "Piercing into nested properties"

Premiership