0

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

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

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

我已经尝试过这个解决方案，但它并没有改变任何东西https://stackoverflow.com/a/69676440/17156530

你能看看我的代码，看看我做错了什么吗？因为我正在学习 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;
4

1 回答 1

0

我是这样想的：

该scale属性实际上与<mesh>，而不是<Model>

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

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

于 2022-01-05T02:53:39.083 回答