# Google's \<model-viewer\> via Reagent

**URL:** https://clojureverse.org/t/googles-model-viewer-via-reagent/8737
**Category:** How to?
**Tags:** reagent, clojurescript
**Created:** [March 17, 2022, 12:07pm UTC](https://clojureverse.org/t/googles-model-viewer-via-reagent/8737 "2022-03-17T12:07:08Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![BorisKourt](https://clojureverse.org/user_avatar/clojureverse.org/boriskourt/32/4287_2.png) [@BorisKourt](https://clojureverse.org/u/BorisKourt)
#### Post date: [March 17, 2022, 12:07pm UTC](https://clojureverse.org/t/googles-model-viewer-via-reagent/8737/1 "2022-03-17T12:07:08Z")

</div>

Google’s [\<model-viewer\>](https://modelviewer.dev/) provides all the key features I need without having to write a custom solution via something like `react-three-fiber` or directly in three.js.

I am struggling with how to properly integrate it into a Reagent (and React for that matter) structure. In order to make it easy to use with vanilla JS it is built as a web component and is largely controlled via the attributes on its html element. Normally that wouldn’t be much of a problem, but with the overhead of 3D and loading large models re-rendering this is expensive and in many cases functionality-breaking.

I’ve tried to naively use it inside a component and trying to eliminate the possibility of re-rendering. Using a ref to mutate it directly.

I have also tried setting it up as a separate html element from the Reagent controlled application and reference it in various events.

Both of these options introduced a lot of hacks and were not ideal in a single page application.

**I am wondering if anyone has any tips on how to best wrap this in a Reagent shell, while still having access to the core element to use their underlying JS api.**

* * *

Here is the example of its usage from their page:

```auto
<model-viewer 
  alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
  src="shared-assets/models/NeilArmstrong.glb" 
  ar ar-modes="webxr scene-viewer quick-look" environment-image="shared-assets/environments/moon_1k.hdr" 
  poster="shared-assets/models/NeilArmstrong.webp" 
  seamless-poster 
  shadow-intensity="1" 
  camera-controls>
</model-viewer>

```

Thanks for any tips.

* * *

Additional discussion on [Clojurians Slack](https://clojurians.slack.com/archives/C03S1L9DN/p1647518978387869) (link requires access to Slack).

Question is also on [Stack Overflow](https://stackoverflow.com/questions/71512752/integrating-googles-model-viewer-with-react-reagent)

---

<div class="post-metadata">

### Author: ![joinr](https://clojureverse.org/user_avatar/clojureverse.org/joinr/32/1861_2.png) [@joinr](https://clojureverse.org/u/joinr)
#### Post date: [March 17, 2022, 3:38pm UTC](https://clojureverse.org/t/googles-model-viewer-via-reagent/8737/2 "2022-03-17T15:38:30Z")

</div>

I wonder if you could just extract the [model viewer base element](https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/model-viewer-base.ts#L219) and create it manually inside a form 3 component in reagent. I did something similar with Vega and Cesium, but they weren’t built around web component (they expect to be passed a container element and then invoke a ctor/load method).

---

<div class="post-metadata">

### Author: ![system](https://clojureverse.org/uploads/default/original/2X/5/51079bf9e4b7d9466242c06cf1e43b9f8bd6da14.png) [@system](https://clojureverse.org/u/system)
#### Post date: [September 16, 2022, 3:38am UTC](https://clojureverse.org/t/googles-model-viewer-via-reagent/8737/3 "2022-09-16T03:38:58Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.