0

此代码加载一个独立的 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个网格文件。我认为这可能是几何问题，我该如何加载它？

4

1 回答 1

0

您必须在文件中添加您使用的每个文件的类型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>

或任何其他类型的文件。

于 2020-12-10T15:30:55.383 回答