reactjs React三纤维帆布是空的

4sup72z8  于 2023-02-18  发布在  React
关注(0)|答案(1)|浏览(112)

有人能给我解释一下为什么我导入的模型没有出现在画布上吗?我使用的是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>

我在控制台中没有任何错误,一切似乎文件,但屏幕只是空白

kpbwa7wx

kpbwa7wx1#

在您的模型中,第二组的比例为0

相关问题