如何将多个3D对象添加到一个ModelViewer

发布于 2025-02-13 19:20:51 字数 477 浏览 2 评论 0原文

如何在ModelViewer中添加多个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>

原文

how to add multiple 3d objects in a modelviewer.
I tried this https://github.com/google/model-viewer/issues/482#issuecomment-551268896
but it didn't work.

code

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

</model-viewer>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鸩远一方 2025-02-20 19:20:51

将多个模型节点添加到单个＆lt; model-viewer＆gt;的功能仅是概念化的，尚未实现。

如您链接到的GitHub帖子所述：

此建议将多个模型纳入单个元素（重点是我的）...
的声明性API ...

本Github问题中的对话继续描述多个实现建议，如果它们要合并该功能。

如果您想创建一个使用多个模型的场景，则需要使用一个库，例如 triph.js < /a>直到他们熨除了此拟议功能的细节。

如果使用reactjs，则可以使用 gltfjsx ，这显着简化了与导入模型的过程多个网格节点。它使用React-three/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模型。

The feature of adding multiple model nodes into a single <model-viewer> was only conceptualized, and has not been implemented.

As stated by the Github post that you linked to:

This suggests a declarative API for incorporating multiple models into a single element (emphasis mine)...

The conversation in this Github issue goes on to describe multiple implementation suggestions if they were to incorporate the feature.

If you're looking to create a scene with multiple models, you're going to need to use a library such as three.js until they've ironed out the details of this proposed feature.

If you use ReactJS, you can use gltfjsx, which significantly simplifies the process of importing a model with multiple mesh nodes. It builds a component for you using react-three/drei, and separates out each mesh node in the component for you.

Here's an example of a component generated with 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')

This component can now be used anywhere to include your 3d model.

回复收藏 0 原文

~没有更多了~