Question

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

我的模型存储为static / models / crerar.glb，我使用gltfjsx生成了Model组件。我尝试仅引用“ models / 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错误是因为加载程序尝试将HTML 404提取错误解析为GLTF。您可以通过打开开发工具和网络标签来确保。您应该看到它正在尝试访问您的文件，但是不能。

如果模型位于src文件夹中，则必须首先将其导入，然后使用获得的哈希网址。这是我的建议，不要弄乱公共文件，请始终导入您的东西。这样做更安全，如果文件不存在，编译器会抱怨，这对于缓存控制会更好。

否则，如果文件在/ public内部，或者我猜它在gatsby（？）中是/ static，则URL必须为“ /file.glb”之类的东西。有时是/public/file.glb或/static/file.glb，这取决于您的捆绑环境（您可以尝试通过浏览器的网址栏获取文件，如果可以使用，则应将其传递给加载器）。

如果文件是draco压缩文件，则draco也必须位于public或static内部。参见：https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h

您可以放心使用useLoader（GLTFLoader，url），它只是new GLTFLoader().load(url, data => ...) +悬念的包装。即使已经在Github上发出警告，它也不再具有实验性。

Answer 2

Crerar.js中没有任何以图像为单位的逗号组合

1) xyz
2) yza
3) aws
...
25) flutter

Para eso，配置 webpack ，对 gatsby-node.js 进行保护，并进行以下操作：（详细说明了网址-loader instalada）

1) xyz
2) yza
3) aws
...
25 flutter

Answer 3

看看是否有任何原因：SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

基本上，您正在加载的JSON数据有问题。

或者这可以解决问题：How to solve SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data in ajax and php

还请记住，useLoader（）仍处于试验阶段，因此可能存在问题。 https://github.com/react-spring/react-three-fiber/blob/master/api.md#useloader-experimental

以下是一些替代的加载策略：https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html

Answer 4

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

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

使用react-three-fiber-fiber

4 个答案: