有人能给我解释一下为什么我导入的模型没有出现在画布上吗?我使用的是next.js,我生成的tsx文件中有所有的网格,我也使用tailwind来设计样式。我已经把gltf和bin文件放在了public文件夹中。最初的模型是一个obj文件,我导入到vectary中,然后导出为gltf(找不到任何好的gltf模型)
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.1.2 .\nike.gltf -t
*/
import * as THREE from 'three'
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'
type GLTFResult = GLTF & {
nodes: {
pasted__polySurface19: THREE.Mesh
polySurface27: THREE.Mesh
pasted__polySurface28: THREE.Mesh
pasted__pPlane20: THREE.Mesh
pasted__pPlane19: THREE.Mesh
pasted__polySurface26: THREE.Mesh
pCube82: THREE.Mesh
pasted__pPlane21: THREE.Mesh
pasted__pPlane16: THREE.Mesh
pasted__pPlane13: THREE.Mesh
pasted__pPlane18: THREE.Mesh
pasted__polySurface25: THREE.Mesh
pasted__pPlane17: THREE.Mesh
pasted__pPlane12: THREE.Mesh
pasted__pPlane11: THREE.Mesh
pasted__pPlane8: THREE.Mesh
pasted__pPlane5: THREE.Mesh
pasted__pPlane4: THREE.Mesh
pasted__pPlane2: THREE.Mesh
pasted__pPlane7: THREE.Mesh
pasted__pPlane6: THREE.Mesh
pasted__polySurface22: THREE.Mesh
pasted__polySurface21: THREE.Mesh
polySurface28: THREE.Mesh
polySurface29: THREE.Mesh
pasted__polySurface3: THREE.Mesh
pasted__polySurface2: THREE.Mesh
}
materials: {
Panorama: THREE.MeshStandardMaterial
Kenya: THREE.MeshStandardMaterial
Zoya: THREE.MeshStandardMaterial
Echo: THREE.MeshStandardMaterial
Andres: THREE.MeshStandardMaterial
Opera: THREE.MeshStandardMaterial
Oxford: THREE.MeshStandardMaterial
Astra: THREE.MeshStandardMaterial
Picasso: THREE.MeshStandardMaterial
['Hidden Paradise']: THREE.MeshStandardMaterial
Backlight: THREE.MeshStandardMaterial
Harlequin: THREE.MeshStandardMaterial
['Happy Days']: THREE.MeshStandardMaterial
Spring: THREE.MeshStandardMaterial
Monet: THREE.MeshStandardMaterial
['Coastal Calm']: THREE.MeshStandardMaterial
Masterpiece: THREE.MeshStandardMaterial
['Dizzy Days']: THREE.MeshStandardMaterial
['Cold Wave']: THREE.MeshStandardMaterial
Marion: THREE.MeshStandardMaterial
['Secret Path']: THREE.MeshStandardMaterial
Zambia: THREE.MeshStandardMaterial
['Magic Moment']: THREE.MeshStandardMaterial
Argos: THREE.MeshStandardMaterial
Kashmir: THREE.MeshStandardMaterial
Kentucky: THREE.MeshStandardMaterial
Melanie: THREE.MeshStandardMaterial
}
}
export function NikeShoe(props: JSX.IntrinsicElements['group']) {
const { nodes, materials } = useGLTF('/nike.gltf') as unknown as GLTFResult
return (
<group {...props} dispose={null}>
<group rotation={[-Math.PI / 2, 0, 0]} scale={0}>
<mesh geometry={nodes.pasted__polySurface19.geometry} material={materials.Panorama} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.polySurface27.geometry} material={materials.Kenya} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface28.geometry} material={materials.Zoya} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane20.geometry} material={materials.Echo} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane19.geometry} material={materials.Andres} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface26.geometry} material={materials.Opera} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pCube82.geometry} material={materials.Oxford} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane21.geometry} material={materials.Astra} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane16.geometry} material={materials.Picasso} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane13.geometry} material={materials['Hidden Paradise']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane18.geometry} material={materials.Backlight} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface25.geometry} material={materials.Harlequin} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane17.geometry} material={materials['Happy Days']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane12.geometry} material={materials.Spring} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane11.geometry} material={materials.Monet} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane8.geometry} material={materials['Coastal Calm']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane5.geometry} material={materials.Masterpiece} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane4.geometry} material={materials['Dizzy Days']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane2.geometry} material={materials['Cold Wave']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane7.geometry} material={materials.Marion} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__pPlane6.geometry} material={materials['Secret Path']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface22.geometry} material={materials.Zambia} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface21.geometry} material={materials['Magic Moment']} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.polySurface28.geometry} material={materials.Argos} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.polySurface29.geometry} material={materials.Kashmir} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface3.geometry} material={materials.Kentucky} rotation={[Math.PI / 2, 0, 0]} />
<mesh geometry={nodes.pasted__polySurface2.geometry} material={materials.Melanie} rotation={[Math.PI / 2, 0, 0]} />
</group>
</group>
)
}
useGLTF.preload('/nike.gltf')
我的主要组件包括画布
<div className=' h-screen w-screen'>
<Canvas className=' h-screen w-screen'>
<ambientLight />
<NikeShoe/>
<meshStandardMaterial />
<OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
</Canvas>
</div>
我在控制台中没有任何错误,一切似乎文件,但屏幕只是空白
1条答案
按热度按时间kpbwa7wx1#
在您的模型中,第二组的比例为0