Blender 模型在 THREE.js 中看起来完全不同

Question

我想在我的网站上使用一个 Blender 模型，我在其中使用 THREE.js，但是当我加载 GLTF 文件时，它看起来损坏了。东西不见了或者位置不对，灯光也似乎有点暗。我在代码中和 THREE.js editor 中尝试过。

这就是 Blender 中的样子：

这就是 THREE.js 编辑器中的样子：

我尝试过使用 GLTF 的导出设置，但没有成功。

这是我的代码，尽管我认为问题不在于这里：

import * as React from 'react';
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls, useGLTF } from '@react-three/drei';

const Model = () => {
    const gltf = useGLTF(require("../3DModel/object.glb")); // Replace with the path to your GLB model
    gltf.scene.scale.set(0.5, 0.5, 0.5);
    return <primitive object={gltf.scene} />;
};

const Umbrella = () => {
    return (
        <Canvas camera={{ position: [0, 0, 600] }} style={{backgroundColor:"none",position:"relative",width:"100%",height:"100%"}}>
            <ambientLight/>
            <pointLight position={[10, 10, 10]} />
            <Suspense fallback={null}>
                <Model />
            </Suspense>
            <OrbitControls />
        </Canvas>
    );
};

export default Umbrella;

我不是Blender专家，所以我不知道我是否忘记了一个重要的步骤。我做错了什么？

Answer 1

在我的回答中，没有单一的明确解决方案，但有一些技术应该有所帮助。最后，每种情况都有点不同，并且没有神奇的复选框可以使其全部正常工作。 GLTF 材质和光照模型与 Blender 不同，并且 ThreeJS 在导入它们方面并不完美。这就是为什么没有简单的答案。

首先，尝试尽可能清理 Blender 中的几何体：应用所有变换和修改器，检查松散的顶点，从布尔值或斜角等中删除重叠的几何体剩余物。它也有助于正确命名每个部分，因为它会有所帮助在JS中调试它。如果感觉难以承受，请尝试一次导出一个零件，看看导出-导入对于辐条、底座等是否适用。

在 ThreeJS 方面，我会尝试这个（注意调整导入场景中每个对象的场景遍历）：

const Model = () => {
  const gltf = useGLTF(require("../3DModel/object.glb"))
  gltf.scene.scale.set(0.5, 0.5, 0.5);
  //traverse all objects in the scene and fix lighting
  gltf.scene.traverse((o) => {
     if (o.material && o.material.map) {
        // you can debug too: console.log(o.name);
        o.material.map.encoding = 3001; //== THREE.LinearEncoding
     }
  });
  return <primitive object={gltf.scene} />;

我并不是说 LinearEncoding 是正确的方法，它实际上取决于您如何在场景中设置照明。但是，它应该有助于了解您可以使用哪些工具来获得最佳结果。除此之外，互联网上有很多教程教授此任务。