From d299ebe5928aeb8e60d57ce38c9c97f7a4b565f0 Mon Sep 17 00:00:00 2001 From: Diego Teran Date: Wed, 3 Jun 2026 14:57:41 -0700 Subject: [PATCH] Multi model example --- packages/modelviewer.dev/data/examples.json | 10 + .../modelviewer.dev/examples/multimodel.html | 27 ++ .../examples/multimodel/index.html | 277 ++++++++++++++++++ .../src/docs-and-examples/sidebar.ts | 3 +- 4 files changed, 316 insertions(+), 1 deletion(-) create mode 100644 packages/modelviewer.dev/examples/multimodel.html create mode 100644 packages/modelviewer.dev/examples/multimodel/index.html diff --git a/packages/modelviewer.dev/data/examples.json b/packages/modelviewer.dev/data/examples.json index 476e060bd0..28e733f1fd 100644 --- a/packages/modelviewer.dev/data/examples.json +++ b/packages/modelviewer.dev/data/examples.json @@ -285,6 +285,16 @@ } ] }, + { + "name": "Multiple Models", + "htmlName": "multimodel", + "examples": [ + { + "htmlId": "multimodel-actions", + "name": "Multiple Models Actions" + } + ] + }, { "name": "Post Process Effects", "htmlName": "postprocessing", diff --git a/packages/modelviewer.dev/examples/multimodel.html b/packages/modelviewer.dev/examples/multimodel.html new file mode 100644 index 0000000000..852c19ff78 --- /dev/null +++ b/packages/modelviewer.dev/examples/multimodel.html @@ -0,0 +1,27 @@ + + + + + + + + + +

Please follow this link.

+ + diff --git a/packages/modelviewer.dev/examples/multimodel/index.html b/packages/modelviewer.dev/examples/multimodel/index.html new file mode 100644 index 0000000000..c89b5ba213 --- /dev/null +++ b/packages/modelviewer.dev/examples/multimodel/index.html @@ -0,0 +1,277 @@ + + + + + + <model-viewer> Multiple Models + + + + + + + + + + + + + + +
+ +
+ +
+
+
+
+
+

+ Multiple Models. + Load and control multiple 3D models within a single <model-viewer> canvas. +

+
+

Interact with Multiple Models

+

+ By placing declarative <extra-model> elements inside + <model-viewer>, you can load multiple separate 3D models into a single scene. + Each model has its own position offset, orientation, and scale, and can be manipulated + individually. +

+

+ This example displays three models, each showcasing a different type of interaction: +

+
    +
  • Sphere (Base Model): Changing material base color factor dynamically.
    • +
  • Robot (Extra Model 1): Targeting animation play/pause to a specific model index.
    • +
  • Astronaut (Extra Model 2): Animating the position offset of a model over time.
    • +
+
+ + + +
+
+
+ +
+ +
©Copyright 2018-2026 Google Inc. Licensed under the Apache + License 2.0.
+ +
+
+
+ + + + + + + + + + + + + diff --git a/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts b/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts index 08d572c36e..608f1fbfda 100644 --- a/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts +++ b/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts @@ -70,7 +70,8 @@ const identicalCategories = [ 'annotations', 'lightingandenv', 'animation', - 'scenegraph' + 'scenegraph', + 'multimodel' ]; export function getSidebarCategoryForNewPage(): string {