reactjs React-three/纤维中GLB的KTX 2纹理

pftdvrlh  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(315)

我正在尝试加载一个有ktx2纹理的glb。它似乎表明它不能加载纹理,但我不确定它试图从哪里加载它们,因为它们是glb的一部分,并且引用了正确的路径。
沙盒here
glb文件是来自threejs本身的示例文件here
相关代码:

import { Suspense } from 'react'
import { useLoader, Canvas } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
import faceUrl from './facecap.glb'

function FaceModel() {
  const result = useLoader(GLTFLoader, faceUrl, (loader) => {
    const ktxLoader = new KTX2Loader()
    ktxLoader.setTranscoderPath('three/examples/js/libs/basis/')
    loader.setKTX2Loader(ktxLoader)
    loader.setMeshoptDecoder(MeshoptDecoder)
  })
  return <primitive object={result} />
}

export default function App() {
  return (
    <Suspense fallback={null}>
      <Canvas>
        <FaceModel />
      </Canvas>
    </Suspense>
  )
}
qxsslcnc

qxsslcnc1#

在React three Fiber中使用KTX2文件的最佳方法是使用@react-three/drei中的useKTX2挂钩,如下所示

import {useKTX2} from "@react-three/drei";
const texture = useKTX2(url)
const [texture1, texture2] = useKTX2([texture1, texture2])

return <meshStandardMaterial map={texture} />

至于你的情况,我建议你只导出你的glb,不带任何纹理。从gltf.pmnd.rs生成React三纤维样板代码,并通过上述方法应用纹理。

相关问题