How do I load a gltf file that has multiple bin and texture files

Question

This code loads a standalone gltf file, but I have a file that contains multiple bin and texture files

 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;

I’m displaying this file here:

  <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>

I believe the problem with this code is

<bufferGeometry attach="geometry" {...nodes.mesh_0_18.geometry} /> , there are 20 mesh files. How do I get this to load as I think it might be a geometry issue?

three.js GLTFLoader will automatically fetch each .bin or texture resource. Unless you see network errors in your browser's console, it's likely that part is working fine. The problem most likely is related to how you're addressing the particular part of the model you want, `nodes.mesh_0_18.geometry`. I can't guess whether that's right; a live demo may be necessary to debug. — Don McCurdy, Dec 10 '20 at 22:14

score 0 · Answer 1 · answered Dec 10 '20 at 15:30

You must add the type of each file you use in web.config file. Like the code below

<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>

or any other type of files.

I don't understand this. I am using react, how/where do I add this as I do not have a web.config file — ebzeal, Dec 10 '20 at 19:31

How do I load a gltf file that has multiple bin and texture files

1 Answers1