Modelviewer as npm import

Question

I am trying Modelviewer, no issues when using in html:

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer src="./3dobjects/someObject.glb">        
</model-viewer>

What I want is to use javascript (along with vitejs) but I am not sure how to do it...

After adding modelviewer:

npm install @google/model-viewer

I wrote this code:

import { ModelViewerElement } from "@google/model-viewer"
const modelV = new ModelViewerElement 
modelV.src = "./3dobjects/someObject.glb"
modelV.exposure = 1.25
modelV.autoRotate
modelV.autoRotateDelay = 1.0
...
...
document.querySelector('#model').insertAdjacentHTML(
    'beforeend',
    modelV  
  )

So I am trying to insert an object to my HTML? how to show my 3d on my HTML?

score 1 · Answer 1 · edited Apr 24 '23 at 16:58

For a Vite project, you don't need to put your import in your main.js or the vite.config.js but if you want to make it accessible in the entire project, you can. It works for me simply like this :

<template>
    <model-viewer src="./3dobjects/someObject.glb" auto-rotate></model-viewer>
</template>

<script>
import { ModelViewerElement } from '@google/model-viewer';
</script>

<style scoped>
</style>

Maybe it is because your attribute are wrong somehow, I know that for the AutoRotate, you just have to put it in the tag like above. I recommend you to check the doc to find what you need : https://modelviewer.dev/docs/

Modelviewer as npm import

1 Answers1