Как мне загрузить файл gltf, содержащий несколько файлов bin и текстур

#reactjs #three.js #gltf #react-three-fiber

#reactjs #three.js #глтф #реагирующий-трехволоконный

Вопрос:

Этот код загружает отдельный файл gltf, но у меня есть файл, содержащий несколько файлов bin и текстур

  import React from "react";
import { useLoader } from "react-three-fiber";

let GLTFLoader;
/**
 * @name Scene
 * @param {*} url received
 * @returns {html} primitive
 */
function Scene({ url }) {
  GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader;
  const gltf = useLoader(GLTFLoader, url);
  const { nodes } = gltf;
  
  return (
    <group>
      <mesh visible >
        <bufferGeometry attach="geometry" {...nodes.mesh_0_18.geometry} />
        <meshStandardMaterial
          attach="material"
          color="white"
          roughness={0.3}
          metalness={0.3}
        />
      </mesh>
    </group>
  );
}

export default Scene;

Я показываю этот файл здесь:

   <Canvas style={{height:"400px",width:"100%", background: "#ccc"}}>
                      <directionalLight intensity={0.5} />
                      <Suspense fallback={ <Loading /> }>
                        <Scene url="/static/avatars/polka-dot-slip-dress/polka-dot-slip-dress_Colorway-1.gltf"/>
                      </Suspense>
                    </Canvas>

Я считаю, что проблема с этим кодом заключается в следующем

<BufferGeometry attach=»geometry» {…nodes.mesh_0_18.geometry} /> , есть 20 меш-файлов. Как мне загрузить это, поскольку я думаю, что это может быть проблема с геометрией?

1. three.js GLTFLoader автоматически извлекает каждый файл .bin или ресурс текстуры. Если вы не видите сетевые ошибки в консоли вашего браузера, скорее всего, эта часть работает нормально. Проблема, скорее всего, связана с тем, как вы обращаетесь к конкретной части модели, которую вы хотите nodes.mesh_0_18.geometry . Я не могу догадаться, правильно ли это; для отладки может потребоваться живая демонстрация.

Ответ №1:

Вы должны добавить тип каждого файла, который вы используете в web.config file. Как в приведенном ниже коде

 <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".obj" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".tga" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".hdr" mimeType="application/octet-stream"/>
      <mimeMap fileExtension=".gltf" mimeType="application/octet-stream"/>
    </staticContent>
  </system.webServer>

или любой другой тип файлов.