react-three/fiber 中的 GLTF 加载器不加载纹理答案

【问题标题】：GTLF Loader in react-three/fiber doesnt load texturesreact-three/fiber 中的 GLTF 加载器不加载纹理
【发布时间】：2021-11-12 11:09:36
【问题描述】：

我使用react-thee/fiber 7.0.0，并且我有一个带有 bin 文件的 GLTF 文件。当我在 gltf-viewer.donmccurdy.com 上查看我的模型时 - 我可以看到所有金属材料和透明玻璃。但是当我将它添加到画布上时，我可以看到黑色而不是金属色，并且玻璃部分没有透明度（（

这就是我加载模型的方式：

const loader = new GLTFLoader();
loader.load(modelUrl, function(obj) {setScene(obj.scene)}

这就是我的 Canvas 道具的外观：

camera={{position: [3, 2, -3], enablePan: true}}
colorManagement={true}
shadows={true}
onCreated={({ gl }) => {
  gl.outputEncoding = sRGBEncoding;
  gl.physicallyCorrectLights = true;
  gl.shadowMap.enabled = true;
  gl.shadowMap.type = PCFSoftShadowMap;
 }}

救命！！

【问题讨论】：

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

这些材料需要光。没有光，它们看起来是黑色的。您正在尝试的在线 gltf 查看器默认添加一些灯光。

你不需要加载这样的模型，如果你在渲染函数中执行那是一个错误。

import { useGLTF } from '@react-three/drei'

function Model() {
  const { scene } = useGLTF(url)
  return <primtive object={scene} />

这个钩子可以处理所有事情，它甚至可以处理用 draco 或 meshopt 压缩的 gltfs，而无需您做任何事情。

相机没有 enablePan 属性。默认情况下，画布管理颜色，“colorManagement”不作为道具存在。你不需要切换到srgb，它是默认的。您可以使用快速道具启用阴影。基本上是这样做的：

<Canvas shadows camera={{ position: [3, 2, -3] }} />

最后但同样重要的是，将您的文件压缩成一个 glb。您还可以查看 gltfjsx，它非常适合反应模型。它还有一个转换选项，可以压缩和重复数据删除。

【讨论】：