model-viewer | Easily display interactive 3D models on the web and in AR | Augmented Reality library

I'm trying to useState in my MERN project, and I have defaultSize defined in MongoDB, and am trying to useState by product.defaultSize. If I change some of my code (like adding console.log("hello")) and save it, the error disapears and loads fine. But if I refresh the page the error comes back?

Google's provides all the key features I need without having 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, 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 manually created html element from the Reagent/React controlled application and reference it in various events via its dom element.

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 React/Reagent shell, while still having access to the core element to use their underlying JS api.

Answers don't have to be in ClojureScript.

Here is the example of its usage from their page:

You guys know what may cause this error? Help will be highly appreciated. This error suddenly started and can't figure out why. Any source I find related to this topic also didn't help, such as npm clear cache etc.

Using model-viewer (https://modelviewer.dev/examples/loading/index.html#glbModel) I want to give loading color of my model-viewer as red but I did not find anything related to that in the documentation.

Here is codepen link: https://codepen.io/luxonauta/pen/vYKYppq?editors=1010

I've got some dynamic buttons that are a child component, and get assigned a value="URL" based off of my MongoDB. How do I go about passing that generated value to my parent/web component src={currentSrc}? When I assign it, it says that currentSrc is not defined?

Here's the SizeOptions:

Im trying to convert my static product configurator into a dynamic one using the MERN stack, and I am really close to being done with the test version finally! I have everything working, but I am having trouble making it even more dynamic. In my configurator here for example, I have the ability to change colors through a list of hard coded buttons that trigger an event. This gets tedious with the amount of products that I will be trying to deploy to our website, and some products are only available in one, two, or three materials. I have successfully uploaded an array to MongoDB and is structured like so:

So my main question is, how would I go about generating a list of buttons that are nested inside of an accordion like in my example above, while each "section" of the accordion would have the correlating name of that material selection.

Here is my hardcoded snipit of the HTML as well as some of the functions I have currently:

I made a static webpage app that I have been slowly converting to React (MERN stack) to make it more dynamic/so I won't have to configure each and every HTML document. It's a product configurator that uses Google's model-viewer.

I'm fairly new to using a full-stack workflow but have found it pretty fun so far! I am having trouble however understanding on how to convert some of my vanilla JS to work within React. This particular script will change a source/3D model when a user clicks on a button. Below is a code snipit of what I have working currently on a static webpage.

I am trying to create a product configurator for the company I work for, and so far I have Google's Model Viewer doing just what I want! I am able to change the size and color of the product, however, I am wanting to change the "dropdown" of the variant selector to a "grid" to act more like buttons rather than a dropdown list. As I now only have about a months worth of history working in HTML, CSS, and JS I am not sure how to go about this. I have images for each swatch of color that I am wanting to populate the options with.

I've also tried using DDSlick Jquery to act more as a dropdown list that has images (for the swatch colors) but I couldn't figure out how to get that to work either.

Any help with this would be greatly appreciated!

I have a vue.js project created with Vue CLI and npm run serveit always run on localhost.

I want to access from my phone (another IP inside the same network), so I want the serve to run on 0.0.0.0. I tried adding the vue.config.js file and setting the host: