KTX2纹理GLB在反应三/纤维

Question

我正在尝试加载一个具有ktx2纹理的glb。这似乎表明它无法加载纹理，但我不确定它是从哪里加载它们的，因为它们是glb的一部分，并且用正确的路径引用。

这里的沙盒

facecap.glb文件是threejs本身的示例文件，这里是

相关代码：

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

Answer 1

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

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三纤维样板代码，并通过上述方法应用纹理。