用react-three-fiber光纤加载gatsby站点中的gltf

Question

我一直在尝试使用react-three-fiber将GLTF模型加载到我的gatsby站点，但似乎无法加载。这看起来应该很简单，但我是Gatsby和threejs的新手，我想知道我是否可以得到一些指导。

我的模型存储为static/models/crerar.glb，我使用gltfjsx生成了一个model组件。我试过只引用‘model/crerar.glb’，但也没有成功。

在index.js中，我有：

import Layout from "../components/layout"
import SEO from "../components/seo"
import React, { Suspense, useRef, useState } from "react"
import { Canvas, useFrame, useLoader } from "react-three-fiber"
import Model from "../components/Crerar"

const IndexPage = () => (
<Layout>
  <Canvas>
    <ambientLight intensity={0.2} />
    <Model />
  </Canvas>
</Layout>
)

export default IndexPage

和Crerar.js (存储在组件中)

/*
auto-generated by: https://github.com/react-spring/gltfjsx
*/

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useLoader(GLTFLoader, '../static/models/crerar.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh material={nodes.mesh_0.material} geometry={nodes.mesh_0.geometry} />
    </group>
  )
}

Answer 1

这条路是错的。您得到的json.parse错误是因为加载器试图将HTML404fetch- error解析为GLTF.您可以通过打开dev tools和networking选项卡来确保。您应该看到它正在尝试访问您的文件，但无法访问。

如果模型在您的src文件夹中，您必须首先导入它，然后使用您获得的散列url。这是我的建议，不要摆弄公共文件，一定要导入你的东西。这样更安全，如果文件不存在，编译器会报错，而且对缓存控制也更好。

否则，如果文件在/public中，或者我猜它是gatsby中的/static (?)那么url必须是类似于"/file.glb“的内容。有时是/public/file.glb或/static/file.glb，这取决于您的捆绑环境(您可以尝试通过浏览器的url栏获取文件，如果url有效，则应将该url传递给加载程序)。

如果您的文件是draco压缩的，那么draco也必须在public或static内部。请参阅：https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h

你可以安全地使用useLoader(GLTFLoader，url)，它只是一个围绕new GLTFLoader().load(url, data => ...) + suspense的包装器。它不再是试验性的，即使它可能在Github上有这样的警告。

Answer 2

gatsby将所有内容从static复制到public文件夹，因此将您的url更改为：

const { nodes, materials } = useLoader(GLTFLoader, '/models/crerar.glb')