React-Three-Fiber (R3F): проблема загрузки загрузчика GLTF. Почему я не вижу свою модель?

Я пытаюсь загрузить модель gltf в react-three-fiber (R3F), и мне снится кошмар. Я попытался найти ответ, и были люди с подобной проблемой, но я не смог решить свою проблему.

Я все время получаю это в консоли:

    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:35829)

Насколько мне известно, с моим кодом все в порядке. Я пробовал писать загрузку в модель разными способами. Создатель response-three-fiber загрузил модель в свой codeandbox несколько дней назад вот так: https://codesandbox.io/s/r3f-gltf-useloader-8nb5i - так что я чувствую, что это не может быть проблемой с R3F. Я заметил, что он использовал glb, а не файл gltf, поэтому я пошел и нашел модель glb, чтобы проверить, будет ли это иметь значение. Я понял, что мне также нужно иметь свою модель в общей папке, что я тоже сделал. К сожалению, это не повлияло на ситуацию, и проблема до сих пор не устранена.

Я пробовал вот так:

import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import * as THREE from "three";

import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";

import Controls from "./Components/Controls.Component";

import "./App.css";

const Chair = () => {
  const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
  return (
    <mesh geometry={nodes.Cube.geometry}>
      <meshStandardMaterial attach="material" color="lightblue" />
    </mesh>
  );
};

function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 5] }}
      onCreated={({ gl }) => {
        gl.shadowMap.enabled = true;
        gl.shadowMap.type = THREE.PCFSoftShadowMap;
      }}
    >
      <fog attach="fog" args={["pink", 5, 15]} />
      <Plane />
      <Controls />
      <Box />
      <Suspense fallback={null}>
        <Chair />
      </Suspense>
    </Canvas>
  );
}

export default App;

Вот человек, у которого была аналогичная проблема: https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10, но я все еще не совсем понять, как решить эту проблему.

Любая помощь будет принята с благодарностью, я так ждал возможности поиграть с R3F, но, похоже, я упал на первом же препятствии. Кто-нибудь, пожалуйста, избавьте меня от этой головной боли! ха-ха.

Спасибо!

Источник

4 ответа

Здесь много "если", но если вы сохранили mindbreaker.glb в своем "общедоступном" каталоге и используете приложение create-react-app, то путь к файлу должен быть useLoader(GLTFLoader, "mindbreaker.glb")

Источник

Если кто-то еще найдет эту ветку при поиске ответа на эту проблему, я решил некоторые проблемы с загрузкой, сначала импортировав свой файл glb. Я еще не слишком хорошо разбираюсь в реакции, но я думаю, что это потому, что реакция изменяет относительный путь к файлу, и поэтому его импорт, как показано ниже (например), может сработать.

          import modelPath from "../public/mindbreaker.glb";
    
    //----------//

    // Use your loader with the imported model variable, instead of a hardcoded path
    useLoader(GLTFLoader, modelPath)
Источник

Если это codeandbox отключите защиту от петель в настройках. csb не может загрузить большие файлы gltf, и ошибку невозможно отследить.

в противном случае это может быть все, если gltf сжат draco, вам нужен загрузчик draco, это может быть неправильный путь, отсутствующие огни, слишком большая модель, поэтому ее нет в кулачке и т. д. все это вначале действительно ужасно, но ты к этому привыкнешь. когда я начал работать с threejs, это чуть не свело меня с ума.

пс.

../public/ выглядит подозрительно. это либо /..., либо /public/...

Источник

У меня была та же проблема, поэтому я перешел на простой HTTP-сервер, чтобы продолжить работу. В моем случае модели в конечном итоге будут обслужены, так что это не слишком неудобно.

http-сервер. -p 8000 --корс

и в реакции укажите URL-адрес для useLoader.

Дополнительную информацию можно найти на https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally.

Источник
Другие вопросы по тегам