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

Posted 2023-02-21

【中文标题】我想做一个用react-three-fiber放大的地球仪

【英文标题】：I want to make a earth globe which zooms in with 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;

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

【参考方案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