| | |
| | | import React, { useState, useEffect } from 'react'; |
| | | import { useThree } from '@react-three/fiber'; |
| | | import React, { useState, useEffect, useRef } from 'react'; |
| | | import { useThree, useFrame } from '@react-three/fiber'; |
| | | import { |
| | | PerspectiveCamera, |
| | | } from '@react-three/drei'; |
| | | import { useStore } from '@/store'; |
| | | |
| | | const Camera = (props) => { |
| | | const threeObj = useThree(); |
| | | const camera = threeObj.camera; |
| | | const cameraRef = useRef(); |
| | | const { camera } = useThree(); |
| | | |
| | | const store = useStore(); |
| | | |
| | | useFrame((state, delta) => { |
| | | const { autoCruise, lookAt } = store; |
| | | |
| | | if (autoCruise) { |
| | | cameraRef.current.position.set(lookAt.x - 0, lookAt.y + 200, lookAt.z + 500); |
| | | camera.lookAt(lookAt.x, lookAt.y + 100, lookAt.z); |
| | | } |
| | | }) |
| | | |
| | | return ( |
| | | <> |
| | | <PerspectiveCamera |
| | | ref={cameraRef} |
| | | makeDefault |
| | | position={[0, 150, 1100]} |
| | | position={[0, 600, 1150]} |
| | | fov={48} |
| | | near={1} |
| | | far={100000} |