在 React 中调整 3D 模型的大小

Question

我正在使用 React，这是我第一次尝试 Three.js / @react-three/fiber / @react-three/drei.

我使用从 Sketchfab.com 下载的 this 3D 模型，它对我的网站来说太大了。

我想缩小模型尺寸，但找不到任何解决方案。

我试过这个解决方案，但它没有任何改变

你能看看我的代码，看看我哪里做错了吗？因为我正在学习 2020 年的教程，所以可能有些功能现在无法使用。

谢谢大家！ :)

这是我网站的截图：

我的文件树的屏幕截图:

这是我的代码:

    import React, { Suspense } from 'react' 
    import './App.css'; 
    import Header from './components/Header' 
    import { Section } from './components/Section' 
    import { Canvas } from '@react-three/fiber' 
    import { Html, useGLTF } from '@react-three/drei'
    
    const Model = () => {   const gltf = useGLTF('/angel.gltf')   return <primitive object={gltf.scene} dispose={null} /> }
    
    const Lights = () => {   return (
        <>
          <ambientLight intensity={0.3} />
          <directionalLight position={[10, 10, 5]} intensity={1} />
          <directionalLight position={[0, 10, 0]} intensity={1.5} />
          <spotLight intensity={1} position={[1000, 0, 0]} />
        </>
    
      ) }
    
    const HTMLContent = () => {   return (
        <Section factor={1.5} offset={1}>
          <group position={[0, 46, 0]}>
            <mesh position={[0, -40, 0]}>
              <Model scale={[0.1, 0.1, 0.1]} />
            </mesh>
            <Html fullscreen>
              <div className="container">
                <h1 className="title">Hello</h1>
              </div>
            </Html>
          </group>
        </Section>   ) }
    
    function App() {   
     return (
        <>
          <Header />
          <Canvas
            colorManagement
            camera={{position: [0, 0, 20], fov: 70}}
          >
            <Lights />
            <Suspense fallback={null}>
              <HTMLContent />
            </Suspense>
          </Canvas>
        </>   
     );
   }
 
    export default App;

Answer 1

我是这样想出来的：

scale 属性实际上与 <mesh> 一起使用，而不是 <Model>

 <mesh position={[0, -40, 0]} scale={100}>
   <Model modelPath="/model.gltf />
 </mesh>

scale 值可以是数字或 scale={[x, y, z]}

在 React 中调整 3D 模型的大小

Resize 3D Model in React

3d

three.js

reactjs

react-three-fiber

drei