将 GLTF 转换为 JSX 组件-GLB下载网

gltfjsx-preview.mp4

一个小型命令行工具，可将 GLTF 资产转换为声明性和可重用的 react-three-fiber JSX 组件。

网络上的 GLTF 工作流程并不理想……

GLTF 被整个扔到场景中，这阻止了重复使用，在 threejs 中，对象只能挂载一次
内容只能通过遍历找到，这既繁琐又缓慢
对查询节点的更改是通过突变进行的，这会更改源数据并防止重用
重构内容、使节点有条件或添加/删除都很麻烦
模型压缩复杂且不易实现
模型通常具有不必要的节点，这些节点会导致额外的工作和矩阵更新

GLTFJSX 修复了这个问题

🧑 💻 它创建所有对象和材质的虚拟图形。现在，您可以轻松更改内容并重复使用。
🏎️ 图被修剪（空组、不必要的转换等），并且性能会更好。
⚡️ 它将选择压缩您的模型，最多可减小 70%-90% 的大小。

用法

Usage
  $ npx gltfjsx [Model.glb] [options]

Options
  --output, -o        Output file name/path
  --types, -t         Add Typescript definitions
  --keepnames, -k     Keep original names
  --keepgroups, -K    Keep (empty) groups, disable pruning
  --bones, -b         Lay out bones declaratively (default: false)
  --meta, -m          Include metadata (as userData)
  --shadows, s        Let meshes cast and receive shadows
  --printwidth, w     Prettier printWidth (default: 120)
  --precision, -p     Number of fractional digits (default: 3)
  --draco, -d         Draco binary path
  --root, -r          Sets directory from which .gltf file is served
  --instance, -i      Instance re-occuring geometry
  --instanceall, -I   Instance every geometry (for cheaper re-use)
  --exportdefault, -E Use default export
  --transform, -T     Transform the asset for the web (draco, prune, resize)
    --resolution, -R  Resolution for texture resizing (default: 1024)
    --keepmeshes, -j  Do not join compatible meshes
    --keepmaterials, -M Do not palette join materials
    --format, -f      Texture format (default: "webp")
    --simplify, -S    Mesh simplification (default: false)
      --ratio         Simplifier ratio (default: 0)
      --error         Simplifier error threshold (default: 0.0001)
  --console, -c       Log JSX to console, won't produce a file
  --debug, -D         Debug output

典型用例

首先，通过 gltfjsx 运行模型。允许您在不安装 npm 包的情况下使用 npm 包。npx

npx gltfjsx model.gltf --transform

这将创建一个文件，用于绘制所有资产内容。Model.jsx

/*
auto-generated by: https://github.com/pmdrs/gltfjsx
author: abcdef (https://sketchfab.com/abcdef)
license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
source: https://sketchfab.com/models/...
title: Model
*/

import { useGLTF, PerspectiveCamera } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/model-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <PerspectiveCamera name="camera" fov={40} near={10} far={1000} position={[10, 0, 50]} />
      <pointLight intensity={10} position={[100, 50, 100]} rotation={[-Math.PI / 2, 0, 0]} />
      <group position={[10, -5, 0]}>
        <mesh geometry={nodes.robot.geometry} material={materials.metal} />
        <mesh geometry={nodes.rocket.geometry} material={materials.wood} />
      </group>
    </group>
  )
}

useGLTF.preload('/model.gltf')

像往常一样将模型添加到文件夹中。使用该标志，它创建了它的压缩副本（在上述情况下）。如果没有标志，只需复制原始模型即可。/public--transformmodel-transformed.glb

/public
  model-transformed.glb

现在可以将组件拖放到场景中。

import { Canvas } from '@react-three/fiber'
import { Model } from './Model'

function App() {
  return (
    <Canvas>
      <Model />

您可以重复使用它，它将重复使用开箱即用的几何形状和材料：

<Model position={[0, 0, 0]} />
<Model position={[10, 0, -10]} />

或者使模型动态化。更改其颜色，例如：

<mesh geometry={nodes.robot.geometry} material={materials.metal} material-color="green" />

或交换材料：

<mesh geometry={nodes.robot.geometry}>
  <meshPhysicalMaterial color="hotpink" />
</mesh>

使内容有条件：

{condition && <mesh geometry={nodes.robot.geometry} material={materials.metal} />}

添加事件：

<mesh geometry={nodes.robot.geometry} material={materials.metal} onClick={handleClick} />

特征

⚡️ Draco 和 meshopt 压缩 ootb

如果您的模型是 draco 压缩的，则无需执行任何作，因为默认为 draco CDN。通过添加标志，您可以引用必须驻留在 /public 文件夹中的本地二进制文件。useGLTF--draco

⚡️ 预加载您的资产以加快响应速度

默认情况下，资产将被预加载，这使得加载速度更快并缩短绘制时间。如果不需要预加载器，请将其卸下。

useGLTF.preload('/model.gltf')

⚡️ 自动变换（压缩、调整大小）

使用该标志，它创建了一个二进制打包、draco 压缩、纹理调整大小（1024×1024）、webp 压缩、重复数据删除、实例化和修剪的 *.glb，准备在网站上使用。它使用 glTF-Transform。这可以将资产规模减少 70%-90%。--transform

它不会更改原始内容，但会创建一个副本并附加 .[modelname]-transformed.glb

⚡️ 型式安全

添加标志，您的 GLTF 将是类型安全的。--types

type GLTFResult = GLTF & {
  nodes: { robot: THREE.Mesh; rocket: THREE.Mesh }
  materials: { metal: THREE.MeshStandardMaterial; wood: THREE.MeshStandardMaterial }
}

export default function Model(props: JSX.IntrinsicElements['group']) {
  const { nodes, materials } = useGLTF<GLTFResult>('/model.gltf')

⚡️ 更轻松地访问动画

如果您的 GLTF 包含动画，它将添加 drei 的钩子，它会提取所有剪辑并将它们准备为动作：useAnimations

const { nodes, materials, animations } = useGLTF('/model.gltf')
const { actions } = useAnimations(animations, group)

如果您想播放动画，您可以随时这样做：

<mesh onClick={(e) => actions.jump.play()} />

如果要混合动画：

const [name, setName] = useState("jump")
...
useEffect(() => {
  actions[name].reset().fadeIn(0.5).play()
  return () => actions[name].fadeOut(0.5)
}, [name])

⚡️ 自动实例化

使用该标志，它将查找相似的几何体并创建它们的实例。查看 drei/Merged 以了解它是如何工作的。无论您之前是否在 Blender 中实例化模型，它都会为每个具有特定几何体和/或材质的网格创建实例。--instance

--instanceall将创建所有几何体的实例。这允许您以最少的绘制调用量重用模型。

您的导出将如下所示：

const context = createContext()
export function Instances({ children, ...props }) {
  const { nodes } = useGLTF('/model-transformed.glb')
  const instances = useMemo(() => ({ Screw1: nodes['Screw1'], Screw2: nodes['Screw2'] }), [nodes])
  return (
    <Merged meshes={instances} {...props}>
      {(instances) => <context.Provider value={instances} children={children} />}
    </Merged>
  )
}

export function Model(props) {
  const instances = useContext(context)
  return (
    <group {...props} dispose={null}>
      <instances.Screw1 position={[-0.42, 0.04, -0.08]} rotation={[-Math.PI / 2, 0, 0]} />
      <instances.Screw2 position={[-0.42, 0.04, -0.08]} rotation={[-Math.PI / 2, 0, 0]} />
    </group>
  )
}

请注意，与它类似，也必须转换模型。为了使用和重用模型，请同时导入和。将所有模型放入组件中（您可以嵌套）。--transformInstancesModelInstances

下面将显示模型三次，但您只有 2 个 drawcalls 顶部。

import { Instances, Model } from './Model'

<Instances>
  <Model position={[10,0,0]}>
  <Model position={[-10,0,0]}>
  <Model position={[-10,10,0]}>
</Instance>

独立使用解析器

import { parse } from 'gltfjsx'
import { GLTFLoader, DRACOLoader } from 'three-stdlib'

const gltfLoader = new GLTFLoader()
const dracoloader = new DRACOLoader()
dracoloader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/')
gltfLoader.setDRACOLoader(dracoloader)

gltfLoader.load(url, (gltf) => {
  const jsx = parse(gltf, optionalConfig)
})

将解析器独立用于场景（object3d’s）

const jsx = parse(scene, optionalConfig)

独立使用 GLTFStructureLoader

GLTFStructureLoader 在测试 gltf 资产时可以派上用场。它允许您在没有实际二进制文件和纹理的情况下提取结构，从而可以在测试环境中运行。

import { GLTFStructureLoader } from 'gltfjsx'
import fs from 'fs/promises'

it('should have a scene with a blue mesh', async () => {
  const loader = new GLTFStructureLoader()
  const data = await fs.readFile('./model.glb')
  const { scene } = await new Promise((res) => loader.parse(data, '', res))
  expect(() => scene.children.length).toEqual(1)
  expect(() => scene.children[0].type).toEqual('mesh')
  expect(() => scene.children[0].material.color).toEqual('blue')
})

要求

必须安装 Nodejs
GLTF 文件必须存在于您的项目文件夹中/public
三个（>= 122.x）
@react三/光纤（>= 5.x）
@react-3/drei （>= 2.x）

Name
DRCMDA 合并 https://github.com/pmndrs/gltfjsx 的分支“master” f4fbfa2 · last year
.github 域名	fix（ci）：更新 Yarn v4 的 CI	last year
。纱	修复：deps up	last year
来源	修复：合并	last year
.gitignore 域名	初稿	6 years ago
.npm忽略	从 npm 中删除示例	5 years ago
.yarnrc.yml	固定：纱线	last year
许可证	使用墨水	5 years ago
cli.js	fix（cli）：删除与焊接相关的旧选项	last year
logo.svg	更新logo.svg	5 years ago
package.json	修复：deps up	last year
readme.md	fix（cli）：删除与焊接相关的旧选项	last year
rollup.config.js	添加汇总	2 years ago
纱锁	修复：deps up	last year