我想做一个用react-three-fiber放大的地球仪答案

【问题标题】：I want to make a earth globe which zooms in with react-three-fiber我想做一个用react-three-fiber放大的地球仪
【发布时间】：2021-08-27 13:37:28
【问题描述】：

我正在画布上制作一个地球仪。我想从很远的地方放大到地球。

例如：地球的位置在 [0,0,0] 并且相机在 [0,0,100] 现在我希望当页面加载时相机慢慢地向它缩放以创建漂亮的动画。

我写了这么多代码：

import './App.css';
import {Canvas} from '@react-three/fiber'
import {OrbitControls} from '@react-three/drei'
import Earth from './models/Earth'
import {Suspense,useState} from 'react'
function App() {
  
  return (
    <Canvas concurrent
    colorManagement style={{backgroundColor:"black",height:"100vh",width:"100vw"}}
     orthographic camera={{ zoom: 1, position: [0, 0, 25] }}
    >
    <ambientLight intensity={0.5} />
    <OrbitControls />
    <Suspense fallback={null} ><Earth size={0.1} /></Suspense>
</Canvas>
  );
}

export default App;

主要问题是如何在页面加载时动态更改缩放？

【问题讨论】：

标签： javascript reactjs camera zooming react-three-fiber

【解决方案1】：

这实际上是内置在 React 中的，悬念可以做到。 https://twitter.com/0xca0a/status/1402558012519337989

<Suspense fallback={null}>
  <ComponentThatLoadsModel />
  <Zoom />
</Suspense>

function Zoom() {
  return useFrame(state => state.camera......

一旦悬念块中的所有内容都加载完毕，缩放组件就会挂载，这使得之后执行动作变得微不足道。您只需将缩放组件放入即可。

这是一个例子：https://codesandbox.io/s/cranky-newton-k7f9x?file=/src/App.tsx

【讨论】：