如何加载具有多个 bin 和纹理文件的 gltf 文件答案

【问题标题】：How do I load a gltf file that has multiple bin and texture files如何加载具有多个 bin 和纹理文件的 gltf 文件
【发布时间】：2021-03-21 19:40:25
【问题描述】：

此代码加载一个独立的 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>

我认为这段代码的问题是

，有20个网格文件。我认为这可能是几何问题，如何加载？

【问题讨论】：

three.js GLTFLoader 将自动获取每个 .bin 或纹理资源。除非您在浏览器的控制台中看到网络错误，否则该部分可能工作正常。问题很可能与您如何处理所需模型的特定部分有关，nodes.mesh_0_18.geometry。我无法猜测这是否正确；调试可能需要现场演示。

标签： reactjs three.js gltf react-three-fiber

【解决方案1】：

您必须在web.config 文件中添加您使用的每个文件的类型。像下面的代码

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

或任何其他类型的文件。

【讨论】：

我不明白这个。我正在使用反应，我如何/在哪里添加它，因为我没有 web.config 文件