Проблема загрузки загрузчика gltf с тремя волокнами. Почему я не вижу свою модель? - PullRequest
Новая
       60

Проблема загрузки загрузчика gltf с тремя волокнами. Почему я не вижу свою модель?

0 голосов
/ 16 апреля 2020

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

Я продолжаю получать это в консоли: 

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

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

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

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, но, похоже, я упал на первое препятствие. Кто-нибудь, пожалуйста, спасите меня от этой головной боли! хаха.

Спасибо!

1 Ответ

0 голосов
/ 17 апреля 2020

если это коды и коробка отключить l oop защита в настройках. CSB не может загрузить большие GLTF, и ошибку невозможно отследить.

В противном случае это может быть все, если GLTF сжат драко, вам нужен драко-загрузчик, это может быть неправильный путь, отсутствующие источники света, слишком большая модель так что это не в кулачках, и т.д. c. все это действительно ужасно в начале, но вы привыкнете к этому. когда я начал три js это почти сводило меня с ума.

пс.

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

...