What am i doing wrong? | model not showing up | Vuejs + modelviewer

[nshutijean]

I'm using Vuejs, model-viewer as an npm package and Brave as a browser. You can click on the button in the browser but the model is not being shown. Could it be Brave maybe?

the model is stored like this:
/src → /assets → headphone.glb

And here is the snippet:

<template>
  <div id="app">
    <model-viewer v-if="isMounted" :src="src" camera-controls></model-viewer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isMounted: false,
      src: 'assets/headphone.glb'
    }
  },
  mounted() {
    this.isMounted = true;
    this.loadComponent();
  },
  computed: {
    loadComponent() {
      return () => import('@google/model-viewer');
    }
  },
}
</script>

[elalish]

We don't test on Brave, so that's possible. Have you tried it on any other browsers?

[elalish]

I've never seen :src="src" before; what is that syntax intended to signify?

[nshutijean]

src is an attribute, which is down in the javascript snipet, it holds a path of the model (locally). So using :src="src" in html, was a way of data binding src to model-viewer's src

[shamsail]

Hi, you are using wrong path for your files. like currently you are using
/src → /assets → headphone.glb
this will not work.
Your path should be /public → /assets → headphone.glb
For this purpose, you have to make public folder (if it's not there) in the same directory as src (in root directory).
Vuejs will pick up your files from there. you can access your files like this '..assets/headphone.glb' , 'assets/headphone.glb' , '../..assets/headphone.glb' depending upon your component structure.
Note: use assets folder of 'public' not of 'src' for your files.

Edited (15-07-2021):
As suggested from the @delacrixmorgan , if you are working with Nuxt then your assets should be in the static folder and then you can access your files as above mentioned.

[nshutijean]

Thanks @shamsail now it works swiftly.

[delacrixmorgan]

I couldn't get it to work on NuxtJS, even though I've place my assets in /public/assets/Astronaut.glb. Don't think there should be a deviation between the implementation on VueJS and NuxtJS.

[delacrixmorgan]

@echtme Well, it doesn't seemed like an asset issue. Could be an import issue or something else.

[echtme]

I found the problem. The code is only working until version 1.10.1, everything afterwards breaks the code on my side.

[elalish]

This sounds like it could be related to changes in our package.json: #3200

It's a bit maddening trying to find the right combo to get all the tools working. If you notice anything wrong here, we're happy to fix it.

[echtme]

Nuxt v2.15.8
@google/model-viewer 1.11.0+ (versions less than that are working fine)

Not sure if it's help, but I have attached below the error message.

`Error in in ./node_modules/@google/model-viewer/dist/model-viewer.min.js 999:5963
Module parse failed: Unexpected token (999:5963)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

var uv=function(t,e,n,i){for(var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i,o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s<3?r(a):s>3?r(e,n,a):r(e,n))||a);return s>3&&a&&Object.defineProperty(e,n,a),a};const dv="auto",pv="manual",mv="auto",fv="eager",gv="interaction",vv=Symbol("defaultProgressBarElement"),yv=Symbol("defaultProgressMaskElement"),xv=Symbol("posterContainerElement"),bv=Symbol("defaultPosterElement"),v=Symbol("posterDismissalSource"),wv=Symbol("hidePoster"),Mv=Symbol("modelIsRevealed"),Sv=Symbol("updateProgressBar"),Tv=Symbol("lastReportedProgress"),Ev=Symbol("transitioned"),Av=Symbol("onTransitionEnd"),Rv=Symbol("ariaLabelCallToAction"),Cv=Symbol("onClick"),Lv=Symbol("onKeydown"),Pv=Symbol("onProgress");class Dv{constructor(){this.pluginCallbacks=[],this.register((function(t){return new ay(t)})),this.register((function(t){return new oy(t)})),this.register((function(t){return new ly(t)})),this.register((function(t){return new cy(t)})),this.register((function(t){return new uy(t)})),this.register((function(t){return new hy(t)}))}register(t){return-1===this.pluginCallbacks.indexOf(t)&&this.pluginCallbacks.push(t),this}unregister(t){return-1!==this.pluginCallbacks.indexOf(t)&&this.pluginCallbacks.splice(this.pluginCallbacks.indexOf(t),1),this}parse(t,e,n,i){"object"==typeof n&&(console.warn("THREE.GLTFExporter: parse() expects options as the fourth argument now."),i=n);const r=new sy,s=[];for(let t=0,e=this.pluginCallbacks.length;t<e;t++)s.push(this.pluginCallbackst);r.setPlugins(s),r.write(t,e,i).catch(n)}parseAsync(t,e){const n=this;return new Promise((function(i,r){n.parse(t,i,r,e)}))}}const Iv=0,Ov=1,Nv=2,Fv=3,Uv=4,kv=5121,Bv=5123,zv=5126,Hv=5125,Vv=34962,Gv=34963,Wv=9728,jv=9729,qv=9984,Xv=9985,$v=9986,Yv=9987,Jv=33071,Kv=33648,Zv=10497,Qv={};Qv[1003]=Wv,Qv[1004]=qv,Qv[1005]=$v,Qv[1006]=jv,Qv[1007]=Xv,Qv[1008]=Yv,Qv[1001]=Jv,Qv[1e3]=Zv,Qv[1002]=Kv;const ty={scale:"scale",position:"translation",quaternion:"rotation",morphTargetInfluences:"weights"};function ey(t,e){return t.length===e.length&&t.every((function(t,n){return t===e[n]}))}function ny(t){return 4Math.ceil(t/4)}function iy(t,e=0){const n=ny(t.byteLength);if(n!==t.byteLength){const i=new Uint8Array(n);if(i.set(new Uint8Array(t)),0!==e)for(let r=t.byteLength;r<n;r++)i[r]=e;return i.buffer}return t}let ry=null;class sy{constructor(){this.plugins=[],this.options={},this.pending=[],this.buffers=[],this.byteOffset=0,this.buffers=[],this.nodeMap=new Map,this.skins=[],this.extensionsUsed={},this.uids=new Map,this.uid=0,this.json={asset:{version:"2.0",generator:"THREE.GLTFExporter"}},this.cache={meshes:new Map,attributes:new Map,attributesNormalized:new Map,materials:new Map,textures:new Map,images:new Map}}setPlugins(t){this.plugins=t}async write(t,e,n){this.options=Object.assign({},{binary:!1,trs:!1,onlyVisible:!0,truncateDrawRange:!0,embedImages:!0,maxTextureSize:1/0,animations:[],includeCustomExtensions:!1},n),this.options.animations.length>0&&(this.options.trs=!0),this.processInput(t),await Promise.all(this.pending);const i=this,r=i.buffers,s=i.json;n=i.options;const a=i.extensionsUsed,o=new Blob(r,{type:"application/octet-stream"}),l=Object.keys(a);if(l.length>0&&(s.extensionsUsed=l),s.buffers&&s.buffers.length>0&&(s.buffers[0].byteLength=o.size),!0===n.binary){const t=new window.FileReader;t.readAsArrayBuffer(o),t.onloadend=function(){const n=iy(t.result),i=new DataView(new ArrayBuffer(8));i.setUint32(0,n.byteLength,!0),i.setUint32(4,5130562,!0);const r=iy(function(t){if(void 0!==window.TextEncoder)return(new TextEncoder).encode(t).buffer;const e=new Uint8Array(new ArrayBuffer(t.length));for(let n=0,i=t.length;n<i;n++){const i=t.charCodeAt(n);e[n]=i>255?32:i}return e.buffer}(JSON.stringify(s)),32),a=new DataView(new ArrayBuffer(8));a.setUint32(0,r.byteLength,!0),a.setUint32(4,1313821514,!0);const o=new ArrayBuffer(12),l=new DataView(o);l.setUint32(0,1179937895,!0),l.setUint32(4,2,!0);const h=12+a.byteLength+r.byteLength+i.byteLength+n.byteLength;l.setUint32(8,h,!0);const c=new Blob([o,a,r,i,n],{type:"application/octet-stream"}),u=new window.FileReader;u.readAsArrayBuffer(c),u.onloadend=function(){e(u.result)}}}else if(s.buffers&&s.buffers.length>0){const t=new window.FileReader;t.readAsDataURL(o),t.onloadend=function(){const n=t.result;s.buffers[0].uri=n,e(s)}}else e(s)}serializeUserData(t,e){if(0===Object.keys(t.userData).length)return;const n=this.options,i=this.extensionsUsed;try{const r=JSON.parse(JSON.stringify(t.userData));if(n.includeCustomExtensions&&r.gltfExtensions){void 0===e.extensions&&(e.extensions={});for(const t in r.gltfExtensions)e.extensions[t]=r.gltfExtensions[t],i[t]=!0;delete r.gltfExtensions}Object.keys(r).length>0&&(e.extras=r)}catch(e){console.warn("THREE.GLTFExporter: userData of '"+t.name+"' won't be serialized because of JSON.stringify error - "+e.message)}}getUID(t){return this.uids.has(t)||this.uids.set(t,this.uid++),this.uids.get(t)}isNormalizedNormalAttribute(t){if(this.cache.attributesNormalized.has(t))return!1;const e=new V;for(let n=0,i=t.count;n<i;n++)if(Math.abs(e.fromBufferAttribute(t,n).length()-1)>5e-4)return!1;return!0}createNormalizedNormalAttribute(t){const e=this.cache;if(e.attributesNormalized.has(t))return e.attributesNormalized.get(t);const n=t.clone(),i=new V;for(let t=0,e=n.count;t<e;t++)i.fromBufferAttribute(n,t),0===i.x&&0===i.y&&0===i.z?i.setX(1):i.normalize(),n.setXYZ(t,i.x,i.y,i.z);return e.attributesNormalized.set(t,n),n}applyTextureTransform(t,e){let n=!1;const i={};0===e.offset.x&&0===e.offset.y||(i.offset=e.offset.toArray(),n=!0),0!==e.rotation&&(i.rotation=e.rotation,n=!0),1===e.repeat.x&&1===e.repeat.y||(i.scale=e.repeat.toArray(),n=!0),n&&(t.extensions=t.extensions||{},t.extensions.KHR_texture_transform=i,this.extensionsUsed.KHR_texture_transform=!0)}buildMetalRoughTexture(t,e){if(t===e)return t;console.warn("THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.");const n=t?.image,i=e?.image,r=Math.max(n?.width||0,i?.width||0),s=Math.max(n?.height||0,i?.height||0),a=document.createElement("canvas");a.width=r,a.height=s;const o=a.getContext("2d");o.fillStyle="#00ffff",o.fillRect(0,0,r,s);const l=o.getImageData(0,0,r,s);if(n){o.drawImage(n,0,0,r,s);const t=o.getImageData(0,0,r,s).data;for(let e=2;e<t.length;e+=4)l.data[e]=t[e]}if(i){o.drawImage(i,0,0,r,s);const t=o.getImageData(0,0,r,s).data;for(let e=1;e<t.length;e+=4)l.data[e]=t[e]}o.putImageData(l,0,0);const h=(t||e).clone();return h.source=new I(a),h}processBuffer(t){const e=this.json,n=this.buffers;return e.buffers||(e.buffers=[{byteLength:0}]),n.push(t),0}processBufferView(t,e,n,i,r){const s=this.json;let a;s.bufferViews||(s.bufferViews=[]),a=e===kv?1:e===Bv?2:4;const o=ny(it.itemSizea),l=new DataView(new ArrayBuffer(o));let h=0;for(let r=n;r<n+i;r++)for(let n=0;n<t.itemSize;n++){let i;t.itemSize>4?i=t.array[rt.itemSize+n]:0===n?i=t.getX(r):1===n?i=t.getY(r):2===n?i=t.getZ(r):3===n&&(i=t.getW(r)),e===zv?l.setFloat32(h,i,!0):e===Hv?l.setUint32(h,i,!0):e===Bv?l.setUint16(h,i,!0):e===kv&&l.setUint8(h,i),h+=a}const c={buffer:this.processBuffer(l.buffer),byteOffset:this.byteOffset,byteLength:o};void 0!==r&&(c.target=r),r===Vv&&(c.byteStride=t.itemSizea),this.byteOffset+=o,s.bufferViews.push(c);return{id:s.bufferViews.length-1,byteLength:0}}processBufferViewImage(t){const e=this,n=e.json;return n.bufferViews||(n.bufferViews=[]),new Promise((function(i){const r=new window.FileReader;r.readAsArrayBuffer(t),r.onloadend=function(){const t=iy(r.result),s={buffer:e.processBuffer(t),byteOffset:e.byteOffset,byteLength:t.byteLength};e.byteOffset+=t.byteLength,i(n.bufferViews.push(s)-1)}}))}processAccessor(t,e,n,i){const r=this.options,s=this.json;let a;if(t.array.constructor===Float32Array)a=zv;else if(t.array.constructor===Uint32Array)a=Hv;else if(t.array.constructor===Uint16Array)a=Bv;else{if(t.array.constructor!==Uint8Array)throw new Error("THREE.GLTFExporter: Unsupported bufferAttribute component type.");a=kv}if(void 0===n&&(n=0),void 0===i&&(i=t.count),r.truncateDrawRange&&void 0!==e&&null===e.index){const r=n+i,s=e.drawRange.count===1/0?t.count:e.drawRange.start+e.drawRange.count;n=Math.max(n,e.drawRange.start),(i=Math.min(r,s)-n)<0&&(i=0)}if(0===i)return null;const o=function(t,e,n){const i={min:new Array(t.itemSize).fill(Number.POSITIVE_INFINITY),max:new Array(t.itemSize).fill(Number.NEGATIVE_INFINITY)};for(let r=e;r<e+n;r++)for(let e=0;e<t.itemSize;e++){let n;t.itemSize>4?n=t.array[rt.itemSize+e]:0===e?n=t.getX(r):1===e?n=t.getY(r):2===e?n=t.getZ(r):3===e&&(n=t.getW(r)),i.min[e]=Math.min(i.min[e],n),i.max[e]=Math.max(i.max[e],n)}return i}(t,n,i);let l;void 0!==e&&(l=t===e.index?Gv:Vv);const h=this.processBufferView(t,a,n,i,l),c={bufferView:h.id,byteOffset:h.byteOffset,componentType:a,count:i,max:o.max,min:o.min,type:{1:"SCALAR",2:"VEC2",3:"VEC3",4:"VEC4",16:"MAT4"}[t.itemSize]};return!0===t.normalized&&(c.normalized=!0),s.accessors||(s.accessors=[]),s.accessors.push(c)-1}processImage(t,e,n,i="image/png"){const r=this,s=r.cache,a=r.json,o=r.options,l=r.pending;s.images.has(t)||s.images.set(t,{});const h=s.images.get(t),c=i+":flipY/"+n.toString();if(void 0!==h[c])return h[c];a.images||(a.images=[]);const u={mimeType:i};if(o.embedImages){const s=ry=ry||document.createElement("canvas");s.width=Math.min(t.width,o.maxTextureSize),s.height=Math.min(t.height,o.maxTextureSize);const a=s.getContext("2d");if(!0===n&&(a.translate(0,s.height),a.scale(1,-1)),"undefined"!=typeof HTMLImageElement&&t instanceof HTMLImageElement||"undefined"!=typeof HTMLCanvasElement&&t instanceof HTMLCanvasElement||"undefined"!=typeof OffscreenCanvas&&t instanceof OffscreenCanvas||"undefined"!=typeof ImageBitmap&&t instanceof ImageBitmap)a.drawImage(t,0,0,s.width,s.height);else{1023!==e&&console.error("GLTFExporter: Only RGBAFormat is supported."),(t.width>o.maxTextureSize||t.height>o.maxTextureSize)&&console.warn("GLTFExporter: Image size is bigger than maxTextureSize",t);const n=new Uint8ClampedArray(t.heightt.width4);for(let e=0;e<n.length;e+=4)n[e+0]=t.data[e+0],n[e+1]=t.data[e+1],n[e+2]=t.data[e+2],n[e+3]=t.data[e+3];a.putImageData(new ImageData(n,t.width,t.height),0,0)}!0===o.binary?l.push(new Promise((function(t){s.toBlob((function(e){r.processBufferViewImage(e).then((function(e){u.bufferView=e,t()}))}),i)}))):u.uri=s.toDataURL(i)}else u.uri=t.src;const d=a.images.push(u)-1;return h[c]=d,d}processSampler(t){const e=this.json;e.samplers||(e.samplers=[]);const n={magFilter:Qv[t.magFilter],minFilter:Qv[t.minFilter],wrapS:Qv[t.wrapS],wrapT:Qv[t.wrapT]};return e.samplers.push(n)-1}processTexture(t){const e=this.cache,n=this.json;if(e.textures.has(t))return e.textures.get(t);n.textures||(n.textures=[]);let i=t.userData.mimeType;"image/webp"===i&&(i="image/png");const r={sampler:this.processSampler(t),source:this.processImage(t.image,t.format,t.flipY,i)};t.name&&(r.name=t.name),this.invokeAll((function(e){e.writeTexture&&e.writeTexture(t,r)}));const s=n.textures.push(r)-1;return e.textures.set(t,s),s}processMaterial(t){const e=this.cache,n=this.json;if(e.materials.has(t))return e.materials.get(t);if(t.isShaderMaterial)return console.warn("GLTFExporter: THREE.ShaderMaterial not supported."),null;n.materials||(n.materials=[]);const i={pbrMetallicRoughness:{}};!0!==t.isMeshStandardMaterial&&!0!==t.isMeshBasicMaterial&&console.warn("GLTFExporter: Use MeshStandardMaterial or MeshBasicMaterial for best results.");const r=t.color.toArray().concat([t.opacity]);if(ey(r,[1,1,1,1])||(i.pbrMetallicRoughness.baseColorFactor=r),t.isMeshStandardMaterial?(i.pbrMetallicRoughness.metallicFactor=t.metalness,i.pbrMetallicRoughness.roughnessFactor=t.roughness):(i.pbrMetallicRoughness.metallicFactor=.5,i.pbrMetallicRoughness.roughnessFactor=.5),t.metalnessMap||t.roughnessMap){const e=this.buildMetalRoughTexture(t.metalnessMap,t.roughnessMap),n={index:this.processTexture(e)};this.applyTextureTransform(n,e),i.pbrMetallicRoughness.metallicRoughnessTexture=n}if(t.map){const e={index:this.processTexture(t.map)};this.applyTextureTransform(e,t.map),i.pbrMetallicRoughness.baseColorTexture=e}if(t.emissive){const e=t.emissive.clone().multiplyScalar(t.emissiveIntensity),n=Math.max(e.r,e.g,e.b);if(n>1&&(e.multiplyScalar(1/n),console.warn("THREE.GLTFExporter: Some emissive components exceed 1; emissive has been limited")),n>0&&(i.emissiveFactor=e.toArray()),t.emissiveMap){const e={index:this.processTexture(t.emissiveMap)};this.applyTextureTransform(e,t.emissiveMap),i.emissiveTexture=e}}if(t.normalMap){const e={index:this.processTexture(t.normalMap)};t.normalScale&&1!==t.normalScale.x&&(e.scale=t.normalScale.x),this.applyTextureTransform(e,t.normalMap),i.normalTexture=e}if(t.aoMap){const e={index:this.processTexture(t.aoMap),texCoord:1};1!==t.aoMapIntensity&&(e.strength=t.aoMapIntensity),this.applyTextureTransform(e,t.aoMap),i.occlusionTexture=e}t.transparent?i.alphaMode="BLEND":t.alphaTest>0&&(i.alphaMode="MASK",i.alphaCutoff=t.alphaTest),2===t.side&&(i.doubleSided=!0),""!==t.name&&(i.name=t.name),this.serializeUserData(t,i),this.invokeAll((function(e){e.writeMaterial&&e.writeMaterial(t,i)}));const s=n.materials.push(i)-1;return e.materials.set(t,s),s}processMesh(t){const e=this.cache,n=this.json,i=[t.geometry.uuid];if(Array.isArray(t.material))for(let e=0,n=t.material.length;e<n;e++)i.push(t.material[e].uuid);else i.push(t.material.uuid);const r=i.join(":");if(e.meshes.has(r))return e.meshes.get(r);const s=t.geometry;let a;if(a=t.isLineSegments?Ov:t.isLineLoop?Nv:t.isLine?Fv:t.isPoints?Iv:t.material.wireframe?Ov:Uv,!0!==s.isBufferGeometry)throw new Error("THREE.GLTFExporter: Geometry is not of type THREE.BufferGeometry.");const o={},l={},h=[],c=[],u={uv:"TEXCOORD_0",uv2:"TEXCOORD_1",color:"COLOR_0",skinWeight:"WEIGHTS_0",skinIndex:"JOINTS_0"},d=s.getAttribute("normal");void 0===d||this.isNormalizedNormalAttribute(d)||(console.warn("THREE.GLTFExporter: Creating normalized normal attribute from the non-normalized one."),s.setAttribute("normal",this.createNormalizedNormalAttribute(d)));let p=null;for(let t in s.attributes){if("morph"===t.slice(0,5))continue;const n=s.attributes[t];t=u[t]||t.toUpperCase();if(/^(POSITION|NORMAL|TANGENT|TEXCOORD\d+|COLOR\d+|JOINTS\d+|WEIGHTS_\d+)$/.test(t)||(t="_"+t),e.attributes.has(this.getUID(n))){l[t]=e.attributes.get(this.getUID(n));continue}p=null;const i=n.array;"JOINTS_0"!==t||i instanceof Uint16Array||i instanceof Uint8Array||(console.warn('GLTFExporter: Attribute "skinIndex" converted to type UNSIGNED_SHORT.'),p=new oe(new Uint16Array(i),n.itemSize,n.normalized));const r=this.processAccessor(p||n,s);null!==r&&(l[t]=r,e.attributes.set(this.getUID(n),r))}if(void 0!==d&&s.setAttribute("normal",d),0===Object.keys(l).length)return null;if(void 0!==t.morphTargetInfluences&&t.morphTargetInfluences.length>0){const n=[],i=[],r={};if(void 0!==t.morphTargetDictionary)for(const e in t.morphTargetDictionary)r[t.morphTargetDictionary[e]]=e;for(let a=0;a<t.morphTargetInfluences.length;++a){const o={};let l=!1;for(const t in s.morphAttributes){if("position"!==t&&"normal"!==t){l||(console.warn("GLTFExporter: Only POSITION and NORMAL morph are supported."),l=!0);continue}const n=s.morphAttributes[t][a],i=t.toUpperCase(),r=s.attributes[t];if(e.attributes.has(this.getUID(n))){o[i]=e.attributes.get(this.getUID(n));continue}const h=n.clone();if(!s.morphTargetsRelative)for(let t=0,e=n.count;t<e;t++)h.setXYZ(t,n.getX(t)-r.getX(t),n.getY(t)-r.getY(t),n.getZ(t)-r.getZ(t));o[i]=this.processAccessor(h,s),e.attributes.set(this.getUID(r),o[i])}c.push(o),n.push(t.morphTargetInfluences[a]),void 0!==t.morphTargetDictionary&&i.push(r[a])}o.weights=n,i.length>0&&(o.extras={},o.extras.targetNames=i)}const m=Array.isArray(t.material);if(m&&0===s.groups.length)return null;const f=m?t.material:[t.material],g=m?s.groups:[{materialIndex:0,start:void 0,count:void 0}];for(let t=0,n=g.length;t<n;t++){const n={mode:a,attributes:l};if(this.serializeUserData(s,n),c.length>0&&(n.targets=c),null!==s.index){let i=this.getUID(s.index);void 0===g[t].start&&void 0===g[t].count||(i+=":"+g[t].start+":"+g[t].count),e.attributes.has(i)?n.indices=e.attributes.get(i):(n.indices=this.processAccessor(s.index,s,g[t].start,g[t].count),e.attributes.set(i,n.indices)),null===n.indices&&delete n.indices}const i=this.processMaterial(f[g[t].materialIndex]);null!==i&&(n.material=i),h.push(n)}o.primitives=h,n.meshes||(n.meshes=[]),this.invokeAll((function(e){e.writeMesh&&e.writeMesh(t,o)}));const v=n.meshes.push(o)-1;return e.meshes.set(r,v),v}processCamera(t){const e=this.json;e.cameras||(e.cameras=[]);const n=t.isOrthographicCamera,i={type:n?"orthographic":"perspective"};return n?i.orthographic={xmag:2t.right,ymag:2t.top,zfar:t.far<=0?.001:t.far,znear:t.near<0?0:t.near}:i.perspective={aspectRatio:t.aspect,yfov:f.degToRad(t.fov),zfar:t.far<=0?.001:t.far,znear:t.near<0?0:t.near},""!==t.name&&(i.name=t.type),e.cameras.push(i)-1}processAnimation(t,e){const n=this.json,i=this.nodeMap;n.animations||(n.animations=[]);const r=(t=Dv.Utils.mergeMorphTargetTracks(t.clone(),e)).tracks,s=[],a=[];for(let t=0;t<r.length;++t){const n=r[t],o=qo.parseTrackName(n.name);let l=qo.findNode(e,o.nodeName);const h=ty[o.propertyName];if("bones"===o.objectName&&(l=!0===l.isSkinnedMesh?l.skeleton.getBoneByName(o.objectIndex):void 0),!l||!h)return console.warn('THREE.GLTFExporter: Could not export animation track "%s".',n.name),null;const c=1;let u,d=n.values.length/n.times.length;h===ty.morphTargetInfluences&&(d/=l.morphTargetInfluences.length),!0===n.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline?(u="CUBICSPLINE",d/=3):u=2300===n.getInterpolation()?"STEP":"LINEAR",a.push({input:this.processAccessor(new oe(n.times,c)),output:this.processAccessor(new oe(n.values,d)),interpolation:u}),s.push({sampler:a.length-1,target:{node:i.get(l),path:h}})}return n.animations.push({name:t.name||"clip"+n.animations.length,samplers:a,channels:s}),n.animations.length-1}processSkin(t){const e=this.json,n=this.nodeMap,i=e.nodes[n.get(t)],r=t.skeleton;if(void 0===r)return null;const s=t.skeleton.bones[0];if(void 0===s)return null;const a=[],o=new Float32Array(16r.bones.length),l=new xt;for(let e=0;e<r.bones.length;++e)a.push(n.get(r.bones[e])),l.copy(r.boneInverses[e]),l.multiply(t.bindMatrix).toArray(o,16e);void 0===e.skins&&(e.skins=[]),e.skins.push({inverseBindMatrices:this.processAccessor(new oe(o,16)),joints:a,skeleton:n.get(s)});return i.skin=e.skins.length-1}processNode(t){const e=this.json,n=this.options,i=this.nodeMap;e.nodes||(e.nodes=[]);const r={};if(n.trs){const e=t.quaternion.toArray(),n=t.position.toArray(),i=t.scale.toArray();ey(e,[0,0,0,1])||(r.rotation=e),ey(n,[0,0,0])||(r.translation=n),ey(i,[1,1,1])||(r.scale=i)}else t.matrixAutoUpdate&&t.updateMatrix(),!1===ey(t.matrix.elements,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])&&(r.matrix=t.matrix.elements);if(""!==t.name&&(r.name=String(t.name)),this.serializeUserData(t,r),t.isMesh||t.isLine||t.isPoints){const e=this.processMesh(t);null!==e&&(r.mesh=e)}else t.isCamera&&(r.camera=this.processCamera(t));if(t.isSkinnedMesh&&this.skins.push(t),t.children.length>0){const e=[];for(let i=0,r=t.children.length;i<r;i++){const r=t.children[i];if(r.visible||!1===n.onlyVisible){const t=this.processNode(r);null!==t&&e.push(t)}}e.length>0&&(r.children=e)}this._invokeAll((function(e){e.writeNode&&e.writeNode(t,r)}));const s=e.nodes.push(r)-1;return i.set(t,s),s}processScene(t){const e=this.json,n=this.options;e.scenes||(e.scenes=[],e.scene=0);const i={};""!==t.name&&(i.name=t.name),e.scenes.push(i);const r=[];for(let e=0,i=t.children.length;e<i;e++){const i=t.children[e];if(i.visible||!1===n.onlyVisible){const t=this.processNode(i);null!==t&&r.push(t)}}r.length>0&&(i.nodes=r),this.serializeUserData(t,i)}processObjects(t){const e=new Nr;e.name="AuxScene";for(let n=0;n<t.length;n++)e.children.push(t[n]);this.processScene(e)}processInput(t){const e=this.options;t=t instanceof Array?t:[t],this._invokeAll((function(e){e.beforeParse&&e.beforeParse(t)}));const n=[];for(let e=0;e<t.length;e++)t[e]instanceof Nr?this.processScene(t[e]):n.push(t[e]);n.length>0&&this.processObjects(n);for(let t=0;t<this.skins.length;++t)this.processSkin(this.skins[t]);for(let n=0;n<e.animations.length;++n)this.processAnimation(e.animations[n],t[0]);this._invokeAll((function(e){e.afterParse&&e.afterParse(t)}))}_invokeAll(t){for(let e=0,n=this.plugins.length;e<n;e++)t(this.plugins[e])}}class ay{constructor(t){this.writer=t,this.name="KHR_lights_punctual"}writeNode(t,e){if(!t.isLight)return;if(!t.isDirectionalLight&&!t.isPointLight&&!t.isSpotLight)return void console.warn("THREE.GLTFExporter: Only directional, point, and spot lights are supported.",t);const n=this.writer,i=n.json,r=n.extensionsUsed,s={};t.name&&(s.name=t.name),s.color=t.color.toArray(),s.intensity=t.intensity,t.isDirectionalLight?s.type="directional":t.isPointLight?(s.type="point",t.distance>0&&(s.range=t.distance)):t.isSpotLight&&(s.type="spot",t.distance>0&&(s.range=t.distance),s.spot={},s.spot.innerConeAngle=(t.penumbra-1)t.angle-1,s.spot.outerConeAngle=t.angle),void 0!==t.decay&&2!==t.decay&&console.warn("THREE.GLTFExporter: Light decay may be lost. glTF is physically-based, and expects light.decay=2."),!t.target||t.target.parent===t&&0===t.target.position.x&&0===t.target.position.y&&-1===t.target.position.z||console.warn("THREE.GLTFExporter: Light direction may be lost. For best results, make light.target a child of the light with position 0,0,-1."),r[this.name]||(i.extensions=i.extensions||{},i.extensions[this.name]={lights:[]},r[this.name]=!0);const a=i.extensions[this.name].lights;a.push(s),e.extensions=e.extensions||{},e.extensions[this.name]={light:a.length-1}}}class oy{constructor(t){this.writer=t,this.name="KHR_materials_unlit"}writeMaterial(t,e){if(!t.isMeshBasicMaterial)return;const n=this.writer.extensionsUsed;e.extensions=e.extensions||{},e.extensions[this.name]={},n[this.name]=!0,e.pbrMetallicRoughness.metallicFactor=0,e.pbrMetallicRoughness.roughnessFactor=.9}}class ly{constructor(t){this.writer=t,this.name="KHR_materials_pbrSpecularGlossiness"}writeMaterial(t,e){if(!t.isGLTFSpecularGlossinessMaterial)return;const n=this.writer,i=n.extensionsUsed,r={};e.pbrMetallicRoughness.baseColorFactor&&(r.diffuseFactor=e.pbrMetallicRoughness.baseColorFactor);const s=[1,1,1];if(t.specular.toArray(s,0),r.specularFactor=s,r.glossinessFactor=t.glossiness,e.pbrMetallicRoughness.baseColorTexture&&(r.diffuseTexture=e.pbrMetallicRoughness.baseColorTexture),t.specularMap){const e={index:n.processTexture(t.specularMap)};n.applyTextureTransform(e,t.specularMap),r.specularGlossinessTexture=e}e.extensions=e.extensions||{},e.extensions[this.name]=r,i[this.name]=!0}}class hy{constructor(t){this.writer=t,this.name="KHR_materials_clearcoat"}writeMaterial(t,e){if(!t.isMeshPhysicalMaterial)return;const n=this.writer,i=n.extensionsUsed,r={};if(r.clearcoatFactor=t.clearcoat,t.clearcoatMap){const e={index:n.processTexture(t.clearcoatMap)};n.applyTextureTransform(e,t.clearcoatMap),r.clearcoatTexture=e}if(r.clearcoatRoughnessFactor=t.clearcoatRoughness,t.clearcoatRoughnessMap){const e={index:n.processTexture(t.clearcoatRoughnessMap)};n.applyTextureTransform(e,t.clearcoatRoughnessMap),r.clearcoatRoughnessTexture=e}if(t.clearcoatNormalMap){const e={index:n.processTexture(t.clearcoatNormalMap)};n.applyTextureTransform(e,t.clearcoatNormalMap),r.clearcoatNormalTexture=e}e.extensions=e.extensions||{},e.extensions[this.name]=r,i[this.name]=!0}}class cy{constructor(t){this.writer=t,this.name="KHR_materials_transmission"}writeMaterial(t,e){if(!t.isMeshPhysicalMaterial||0===t.transmission)return;const n=this.writer,i=n.extensionsUsed,r={};if(r.transmissionFactor=t.transmission,t.transmissionMap){const e={index:n.processTexture(t.transmissionMap)};n.applyTextureTransform(e,t.transmissionMap),r.transmissionTexture=e}e.extensions=e.extensions||{},e.extensions[this.name]=r,i[this.name]=!0}}class uy{constructor(t){this.writer=t,this.name="KHR_materials_volume"}writeMaterial(t,e){if(!t.isMeshPhysicalMaterial||0===t.transmission)return;const n=this.writer,i=n.extensionsUsed,r={};if(r.thicknessFactor=t.thickness,t.thicknessMap){const e={index:n.processTexture(t.thicknessMap)};n.applyTextureTransform(e,t.thicknessMap),r.thicknessTexture=e}r.attenuationDistance=t.attenuationDistance,r.attenuationColor=t.attenuationColor.toArray(),e.extensions=e.extensions||{},e.extensions[this.name]=r,i[this.name]=!0}}Dv.Utils={insertKeyframe:function(t,e){const n=.001,i=t.getValueSize(),r=new t.TimeBufferType(t.times.length+1),s=new t.ValueBufferType(t.values.length+i),a=t.createInterpolant(new t.ValueBufferType(i));let o;if(0===t.times.length){r[0]=e;for(let t=0;t<i;t++)s[t]=0;o=0}else if(e<t.times[0]){if(Math.abs(t.times[0]-e)<n)return 0;r[0]=e,r.set(t.times,1),s.set(a.evaluate(e),0),s.set(t.values,i),o=0}else if(e>t.times[t.times.length-1]){if(Math.abs(t.times[t.times.length-1]-e)<n)return t.times.length-1;r[r.length-1]=e,r.set(t.times,0),s.set(t.values,0),s.set(a.evaluate(e),t.values.length),o=r.length-1}else for(let l=0;l<t.times.length;l++){if(Math.abs(t.times[l]-e)<n)return l;if(t.times[l]<e&&t.times[l+1]>e){r.set(t.times.slice(0,l+1),0),r[l+1]=e,r.set(t.times.slice(l+1),l+2),s.set(t.values.slice(0,(l+1)i),0),s.set(a.evaluate(e),(l+1)i),s.set(t.values.slice((l+1)i),(l+2)i),o=l+1;break}}return t.times=r,t.values=s,o},mergeMorphTargetTracks:function(t,e){const n=[],i={},r=t.tracks;for(let t=0;t<r.length;++t){let s=r[t];const a=qo.parseTrackName(s.name),o=qo.findNode(e,a.nodeName);if("morphTargetInfluences"!==a.propertyName||void 0===a.propertyIndex){n.push(s);continue}if(s.createInterpolant!==s.InterpolantFactoryMethodDiscrete&&s.createInterpolant!==s.InterpolantFactoryMethodLinear){if(s.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline)throw new Error("THREE.GLTFExporter: Cannot merge tracks with glTF CUBICSPLINE interpolation.");console.warn("THREE.GLTFExporter: Morph target interpolation mode not yet supported. Using LINEAR instead."),s=s.clone(),s.setInterpolation(2301)}const l=o.morphTargetInfluences.length,h=o.morphTargetDictionary[a.propertyIndex];if(void 0===h)throw new Error("THREE.GLTFExporter: Morph target name not found: "+a.propertyIndex);let c;if(void 0===i[o.uuid]){c=s.clone();const t=new c.ValueBufferType(lc.times.length);for(let e=0;e<c.times.length;e++)t[el+h]=c.values[e];c.name=(a.nodeName||"")+".morphTargetInfluences",c.values=t,i[o.uuid]=c,n.push(c);continue}const u=s.createInterpolant(new s.ValueBufferType(1));c=i[o.uuid];for(let t=0;t<c.times.length;t++)c.values[tl+h]=u.evaluate(c.times[t]);for(let t=0;t<s.times.length;t++){const e=this.insertKeyframe(c,s.times[t]);c.values[el+h]=s.values[t]}}return t.tracks=n,t}};
`

[iglimanaj]

I am using version 1.10.1 of model-viewer and version 2.15.8 of nuxt. However, I am facing the same problem as you @echtme had with the later version. Which version of model-viewer worked successfully in your setup?