javascript - 将 GLTF 模型添加到简单的 React 三纤维场景中

Question

我只是想将具有漫反射和凹凸纹理的模型添加到 React 3 光纤中的简单场景中。

我真的不知道我做错了什么。

继承人沙箱：https ://codesandbox.io/s/three-point-lighting-in-react-three-fiber-forked-qeqlx?file=/src/index.js

该模型是一个 GLTF 月亮，其中包含烘焙的纹理。月亮只是一个球体，但我想使用 GLTF 模型。目前，场景显示背景和灯光，但没有模型。

如果您对此有任何见解，我将不胜感激！

Answer 1

乍一看，您似乎正在导入GLTFLoaderand moon，但您从未使用过它们。这就是那些曲折的黄线的含义：

确保按照文档中的说明实施它们：

const loader = new GLTFLoader();
loader.load(
    moon,
    function(gltf) {
        scene.add(gltf.scene);
    }
);

Answer 2

好吧，我想通了。感谢@Marquizzo

问题：

1. .gltf 文件不在正确的目录中。它需要在公共目录中，因为我使用的是“npx @react-three/gltfjsx”脚本。

2. .gltf 相对于场景来说非常大。在 Cinema 4d 中，它的大小非常合适。但是在 three.js 中，它大约是 99 倍大。

3. 网格的位置在相机后面。我不知道您可以使用轨道控制来移动相机并手动找到对象。我还将对象定位在 [0,0,0]。

4. 我使用的模板场景来自大约一年前的教程。所以从那以后有一些重大的发展导致了运行时的简单错误。所以我更新了依赖项。

我仍然存在的问题：

1. 未从烘焙的 .gltf 文件加载纹理。

我增加了照明，似乎照明不是问题。

继承人的固定沙箱：固定

我学到的是：

1. 轨道控制
2. OBJLoader的使用
3. 使用像 CameraHelper 这样的助手