如何向一个模型查看器中添加多个3d对象

Question

如何在模型查看器中添加多个3d对象。我试过这个https://github.com/google/model-viewer/issues/482#issuecomment-551268896，但没成功。

代码

<model-viewer>
<model-node src="a.glb"></model-node>
<model-node src="b.glb"></model-node>

</model-viewer>

Answer 1

将多个模型节点添加到单个<model-viewer>中的特性仅仅是概念化的，尚未实现。

正如你所链接的Github帖子所指出的：

这就提出了一个声明性API，用于将多个模型合并到一个元素中(重点是我).

这个Github问题中的对话继续描述了多个实现建议，如果它们要包含这个特性的话。

如果您想要创建一个包含多个模型的场景，那么您需要使用一个库(如three.js )，直到它们解决了这个提议的特性的细节。

如果使用ReactJS，则可以使用格尔茨，这大大简化了使用多个网格节点导入模型的过程。它使用react 3/drei为您构建一个组件，并为您分离组件中的每个网格节点。

下面是一个用gltfjsx生成的组件的示例：

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

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/example-3d.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <group scale={56.66}>
        <mesh geometry={nodes.Curve001_1.geometry} material={materials.Material} />
        <mesh geometry={nodes.Curve001_2.geometry} material={materials['Material.002']} />
      </group>
    </group>
  )
}

useGLTF.preload('/example-3d.glb')

这个组件现在可以在任何地方使用，包括你的3d模型。