Multiple instances of Three.js

[Dizelars]

Can you tell me how I can use model-viewer together with scene three.js, so that the same loaded three.js library is used?

At the moment I am using a page with three.js scene, and on the same page there is a model-viewer tag that pulls the necessary files from the script:

<script type=“module” src=“https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js”></script>

As a result I see 2 warnings in the console, one from three.js and one from model-viewer:

WARNING: Multiple instances of three.js being imported.

Thanks for your help)

[elalish]

You'll want to use model-viewer-module.min.js instead and import-map three.js in. You can follow our example here, though you probably don't need model-viewer-effects.

[Dizelars]

Thanks for the feedback, but I think I'm still doing something wrong and can't figure it out.
In my project I want to use three.js library to display models and scene, and use model-viewer to display models in AR, that means I need it only for that, and model-viewer tag should be on the same page with canvas from three.js.
Right now I'm using the muslCar.js file:

<script type=“module” src=“./js/fullModelScripts/muslCar.js”></script>

which contains an import of the THREE library (version 0.163.0) and its other dependencies as follows:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import Stats from 'stats.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { HDRJPGLoader } from '@monogrid/gainmap-js'
import { GroundedSkybox } from 'three/addons/objects/GroundedSkybox.js'

Then I connect the model-viewer script, which I understand does not contain three.js:

<script type=“module” src=“https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer-module.min.js”></script>

but in the end I get the same warning.
If I use the bundle as in the example, although the cdn with three.js doesn't make sense because I already have it in the project, the warning remains:

<script async src=“https://ga.jspm.io/npm:es-module-shims@1.7.1/dist/es-module-shims.js”></script>
<script type=“importmap”>
{
	{ “imports”: {
		“three": ”https://cdn.jsdelivr.net/npm/three@^0.167.1/build/three.module.min.js”
	}
}
</script>
<script type=“module” src=“https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer-module.min.js”></script>

If you remove the model-viewer scripts, the warning disappears, but of course AR doesn't work.

Can you please tell me how to set up the imports correctly, as I can't figure out how to get rid of backtracking and have all the libraries work from the same three.js file?

[elalish]

First question - do you actually need your own three.js? <model-viewer> is just an easy-to-use wrapper around three.js, so you might be able to remove a bunch of code by just using model-viewer. Second, if all you want MV for is to launch scene viewer and quick look, you might just copy the relevant functions from our ar.ts, since that's actually pretty simple.

Oh, if you don't own muslCar.js then all that probably won't work. They would need to also make three.js import-mappable like model-viewer-module does for them to share.