0

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>
lunix
  • 151
  • 1
  • 14

1 Answers1

0

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.

silencedogood
  • 3,209
  • 1
  • 11
  • 36
  • oh isnt there something simpler – lunix Jul 14 '22 at 15:10
  • @Jotham Not really. You could try a CMS like [sketchfab](https://sketchfab.com/blogs/enterprise/news/getting-started-with-sketchfab) that helps streamline the process of embedding 3d models. However, I'm not sure if that will include the functionality you're looking for. – silencedogood Jul 14 '22 at 17:36