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

Question

这段代码加载了一个独立的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="；几何形状"；{…nodes.mesh_0_18.geometry}/>，有20个网格文件。我认为这可能是一个几何问题，如何加载它？

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

或任何其他类型的文件。