Import directly from three and only use lib/three for AFRAME.THREE ex…

…port (#5670) * Import directly from three and only use lib/three for AFRAME.THREE export * Fix GLTFLoader mocking in gltf-model.test.js unit test --------- Co-authored-by: Diego Marcos <[email protected]>
aframevr · Feb 19, 2025 · c27796f · c27796f
1 parent fd1a848
commit c27796f
Show file tree

Hide file tree

Showing 70 changed files with 109 additions and 86 deletions.
diff --git a/src/components/anchored.js b/src/components/anchored.js
@@ -1,4 +1,5 @@
-/* global THREE, XRRigidTransform, localStorage */
+/* global XRRigidTransform, localStorage */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 var warn = utils.debug('components:anchored:warn');

diff --git a/src/components/animation.js b/src/components/animation.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import anime from 'super-animejs';
 import { registerComponent, components } from '../core/component.js';
 import * as utils from '../utils/index.js';

diff --git a/src/components/camera.js b/src/components/camera.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 
 /**

diff --git a/src/components/cursor.js b/src/components/cursor.js
@@ -1,4 +1,5 @@
-/* global THREE, MouseEvent, TouchEvent */
+/* global MouseEvent, TouchEvent */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 

diff --git a/src/components/geometry.js b/src/components/geometry.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { geometries, geometryNames } from '../core/geometry.js';
 import { registerComponent } from '../core/component.js';
 

diff --git a/src/components/gltf-model.js b/src/components/gltf-model.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 var warn = utils.debug('components:gltf-model:warn');
@@ -15,7 +15,7 @@ export var Component = registerComponent('gltf-model', {
     var meshoptDecoder = this.system.getMeshoptDecoder();
     var ktxLoader = this.system.getKTX2Loader();
     this.model = null;
-    this.loader = new THREE.GLTFLoader();
+    this.loader = new GLTFLoader();
     if (dracoLoader) {
       this.loader.setDRACOLoader(dracoLoader);
     }

diff --git a/src/components/hand-controls.js b/src/components/hand-controls.js
@@ -1,4 +1,5 @@
-/* global THREE */
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { registerComponent } from '../core/component.js';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 
@@ -63,7 +64,7 @@ export var Component = registerComponent('hand-controls', {
     // Active buttons populated by events provided by the attached controls.
     this.pressedButtons = {};
     this.touchedButtons = {};
-    this.loader = new THREE.GLTFLoader();
+    this.loader = new GLTFLoader();
     this.loader.setCrossOrigin('anonymous');
 
     this.onGripDown = function () { self.handleButton('grip', 'down'); };

diff --git a/src/components/hand-tracking-controls.js b/src/components/hand-tracking-controls.js
@@ -1,4 +1,5 @@
-/* global THREE, XRHand */
+/* global XRHand */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import { AEntity } from '../core/a-entity.js';
 import { checkControllerPresentAndSetup } from '../utils/tracked-controls.js';

diff --git a/src/components/hand-tracking-grab-controls.js b/src/components/hand-tracking-grab-controls.js
@@ -1,5 +1,5 @@
 import { registerComponent } from '../core/component.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 
 registerComponent('hand-tracking-grab-controls', {
   schema: {

diff --git a/src/components/hp-mixed-reality-controls.js b/src/components/hp-mixed-reality-controls.js
@@ -1,5 +1,5 @@
 import { registerComponent } from '../core/component.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';
 

diff --git a/src/components/layer.js b/src/components/layer.js
@@ -1,4 +1,5 @@
-/* global THREE, XRRigidTransform, XRWebGLBinding */
+/* global XRRigidTransform, XRWebGLBinding */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 var warn = utils.debug('components:layer:warn');

diff --git a/src/components/light.js b/src/components/light.js
@@ -1,4 +1,5 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
+import { LightProbeGenerator } from 'three/addons/lights/LightProbeGenerator.js';
 import { diff, debug, srcLoader } from '../utils/index.js';
 import { registerComponent } from '../core/component.js';
 import * as mathUtils from '../utils/math.js';
@@ -352,7 +353,7 @@ export var Component = registerComponent('light', {
       probeCache[data.envMap] = new window.Promise(function (resolve) {
         srcLoader.validateCubemapSrc(data.envMap, function loadEnvMap (urls) {
           CubeLoader.load(urls, function (cube) {
-            var tempLightProbe = THREE.LightProbeGenerator.fromCubeTexture(cube);
+            var tempLightProbe = LightProbeGenerator.fromCubeTexture(cube);
             probeCache[data.envMap] = tempLightProbe;
             resolve(tempLightProbe);
           });

diff --git a/src/components/line.js b/src/components/line.js
@@ -1,4 +1,4 @@
-/* global THREE */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 
 export var Component = registerComponent('line', {

diff --git a/src/components/link.js b/src/components/link.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import { registerShader } from '../core/shader.js';
 var DEFAULT_PREVIEW_DISTANCE = 15.0;

diff --git a/src/components/logitech-mx-ink-controls.js b/src/components/logitech-mx-ink-controls.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';

diff --git a/src/components/look-controls.js b/src/components/look-controls.js
@@ -1,5 +1,6 @@
 /* global DeviceOrientationEvent  */
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
+import { DeviceOrientationControls } from '../../vendor/DeviceOrientationControls.js';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 
@@ -56,7 +57,7 @@ export var Component = registerComponent('look-controls', {
 
     // Only on mobile devices and only enabled if DeviceOrientation permission has been granted.
     if (utils.device.isMobile() || utils.device.isMobileDeviceRequestingDesktopSite()) {
-      magicWindowControls = this.magicWindowControls = new THREE.DeviceOrientationControls(this.magicWindowObject);
+      magicWindowControls = this.magicWindowControls = new DeviceOrientationControls(this.magicWindowObject);
       if (typeof DeviceOrientationEvent !== 'undefined' && DeviceOrientationEvent.requestPermission) {
         magicWindowControls.enabled = false;
         if (this.el.sceneEl.components['device-orientation-permission-ui'].permissionGranted) {

diff --git a/src/components/material.js b/src/components/material.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import * as utils from '../utils/index.js';
 import { registerComponent } from '../core/component.js';
 import { shaders, shaderNames } from '../core/shader.js';

diff --git a/src/components/meta-touch-controls.js b/src/components/meta-touch-controls.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';

diff --git a/src/components/obb-collider.js b/src/components/obb-collider.js
@@ -1,4 +1,5 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
+import { OBB } from 'three/addons/math/OBB.js';
 import { registerComponent } from '../core/component.js';
 
 registerComponent('obb-collider', {
@@ -60,8 +61,8 @@ registerComponent('obb-collider', {
   updateCollider: function () {
     var el = this.el;
     var boundingBoxSize = this.boundingBoxSize;
-    var aabb = this.aabb = this.aabb || new THREE.OBB();
-    this.obb = this.obb || new THREE.OBB();
+    var aabb = this.aabb = this.aabb || new OBB();
+    this.obb = this.obb || new OBB();
 
     // Defer if entity has not yet loaded.
     if (!el.hasLoaded) {

diff --git a/src/components/obj-model.js b/src/components/obj-model.js
@@ -1,6 +1,8 @@
+import * as THREE from 'three';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
 import { debug } from '../utils/index.js';
 import { registerComponent } from '../core/component.js';
-import THREE from '../lib/three.js';
 
 var warn = debug('components:obj-model:warn');
 
@@ -14,8 +16,8 @@ export var Component = registerComponent('obj-model', {
     var self = this;
 
     this.model = null;
-    this.objLoader = new THREE.OBJLoader();
-    this.mtlLoader = new THREE.MTLLoader(this.objLoader.manager);
+    this.objLoader = new OBJLoader();
+    this.mtlLoader = new MTLLoader(this.objLoader.manager);
     // Allow cross-origin images to be loaded.
     this.mtlLoader.crossOrigin = '';
 

diff --git a/src/components/pico-controls.js b/src/components/pico-controls.js
@@ -1,5 +1,5 @@
 import { registerComponent } from '../core/component.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';
 

diff --git a/src/components/raycaster.js b/src/components/raycaster.js
@@ -1,6 +1,6 @@
 /* global MutationObserver */
 
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 

diff --git a/src/components/rotation.js b/src/components/rotation.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 var degToRad = THREE.MathUtils.degToRad;
 

diff --git a/src/components/scene/ar-hit-test.js b/src/components/scene/ar-hit-test.js
@@ -1,5 +1,5 @@
 /* global ImageData, Map, Set */
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent as register } from '../../core/component.js';
 var arrowURL = 'data:image/webp;base64,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';
 var CAM_LAYER = 21;

diff --git a/src/components/scene/background.js b/src/components/scene/background.js
@@ -1,4 +1,4 @@
-/* global THREE */
+import * as THREE from 'three';
 import { registerComponent as register } from '../../core/component.js';
 
 export var Component = register('background', {

diff --git a/src/components/scene/fog.js b/src/components/scene/fog.js
@@ -1,5 +1,5 @@
 import { registerComponent as register } from '../../core/component.js';
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 
 /**
  * Fog component.

diff --git a/src/components/scene/real-world-meshing.js b/src/components/scene/real-world-meshing.js
@@ -1,5 +1,5 @@
 /* global XRPlane */
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent as register } from '../../core/component.js';
 
 /**

diff --git a/src/components/scene/reflection.js b/src/components/scene/reflection.js
@@ -1,4 +1,5 @@
-/* global THREE, XRWebGLBinding */
+/* global XRWebGLBinding */
+import * as THREE from 'three';
 import { registerComponent as register } from '../../core/component.js';
 
 // source: view-source:https://storage.googleapis.com/chromium-webxr-test/r886480/proposals/lighting-estimation.html

diff --git a/src/components/scene/screenshot.js b/src/components/scene/screenshot.js
@@ -1,6 +1,6 @@
 /* global ImageData, URL */
 import { registerComponent } from '../../core/component.js';
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 
 var VERTEX_SHADER = [
   'attribute vec3 position;',

diff --git a/src/components/shadow.js b/src/components/shadow.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 
 /**

diff --git a/src/components/sound.js b/src/components/sound.js
@@ -1,6 +1,6 @@
 import { registerComponent } from '../core/component.js';
 import { debug } from '../utils/index.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 
 var warn = debug('components:sound:warn');
 

diff --git a/src/components/text.js b/src/components/text.js
@@ -3,7 +3,7 @@ import loadBMFont from 'load-bmfont';
 
 import { registerComponent } from '../core/component.js';
 import { shaders } from '../core/shader.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import * as utils from '../utils/index.js';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 

diff --git a/src/components/valve-index-controls.js b/src/components/valve-index-controls.js
@@ -1,5 +1,5 @@
 import { registerComponent } from '../core/component.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { AFRAME_CDN_ROOT } from '../constants/index.js';
 import { checkControllerPresentAndSetup, emitIfAxesChanged, onButtonEvent } from '../utils/tracked-controls.js';
 

diff --git a/src/components/wasd-controls.js b/src/components/wasd-controls.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { KEYCODE_TO_CODE } from '../constants/keyboardevent.js';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';

diff --git a/src/components/windows-motion-controls.js b/src/components/windows-motion-controls.js
@@ -1,4 +1,4 @@
-/* global THREE */
+import * as THREE from 'three';
 import { registerComponent } from '../core/component.js';
 import * as utils from '../utils/index.js';
 import { DEFAULT_HANDEDNESS, AFRAME_CDN_ROOT } from '../constants/index.js';

diff --git a/src/core/a-assets.js b/src/core/a-assets.js
@@ -1,5 +1,5 @@
 /* global customElements */
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { ANode } from './a-node.js';
 import { debug } from '../utils/index.js';
 

diff --git a/src/core/a-entity.js b/src/core/a-entity.js
@@ -1,5 +1,5 @@
 /* global customElements */
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { ANode } from './a-node.js';
 import { components as COMPONENTS } from './component.js';
 import * as utils from '../utils/index.js';

diff --git a/src/core/geometry.js b/src/core/geometry.js
@@ -1,5 +1,5 @@
 import * as schema from './schema.js';
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 
 var processSchema = schema.process;
 export var geometries = {};  // Registered geometries.

diff --git a/src/core/scene/a-scene.js b/src/core/scene/a-scene.js
@@ -1,5 +1,5 @@
 /* global Promise, customElements, screen */
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 import { inject as initMetaTags } from './metaTags.js';
 import { initWakelock } from './wakelock.js';
 import * as loadingScreen from './loadingScreen.js';
@@ -543,7 +543,11 @@ export class AScene extends AEntity {
       };
     }
 
-    renderer = this.renderer = new (THREE.WebGLRenderer || THREE.WebGPURenderer)(rendererConfig);
+    // Trick Webpack so that it can't statically determine the exact export used.
+    // Otherwise it will conclude that one of the two exports can't be found in THREE.
+    // Only one needs to exist, and this should be determined at runtime.
+    var rendererImpl = ['WebGLRenderer', 'WebGPURenderer'].find(function (x) { return THREE[x]; });
+    renderer = this.renderer = new THREE[rendererImpl](rendererConfig);
     if (!renderer.xr.setPoseTarget) {
       renderer.xr.setPoseTarget = function () {};
     }

diff --git a/src/core/scene/loadingScreen.js b/src/core/scene/loadingScreen.js
@@ -1,4 +1,4 @@
-/* global THREE */
+import * as THREE from 'three';
 import { AFRAME_INJECTED } from '../../constants/index.js';
 import * as utils from '../../utils/index.js';
 var styleParser = utils.styleParser;

diff --git a/src/core/shader.js b/src/core/shader.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { process as processSchema } from './schema.js';
 import * as utils from '../utils/index.js';
 

diff --git a/src/extras/components/pivot.js b/src/extras/components/pivot.js
@@ -1,4 +1,4 @@
-import THREE from '../../lib/three.js';
+import * as THREE from 'three';
 import { registerComponent } from '../../core/component.js';
 
 var originalPosition = new THREE.Vector3();

diff --git a/src/geometries/box.js b/src/geometries/box.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 registerGeometry('box', {

diff --git a/src/geometries/circle.js b/src/geometries/circle.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 var degToRad = THREE.MathUtils.degToRad;

diff --git a/src/geometries/cone.js b/src/geometries/cone.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 var degToRad = THREE.MathUtils.degToRad;

diff --git a/src/geometries/cylinder.js b/src/geometries/cylinder.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 var degToRad = THREE.MathUtils.degToRad;

diff --git a/src/geometries/dodecahedron.js b/src/geometries/dodecahedron.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 registerGeometry('dodecahedron', {

diff --git a/src/geometries/icosahedron.js b/src/geometries/icosahedron.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 registerGeometry('icosahedron', {

diff --git a/src/geometries/octahedron.js b/src/geometries/octahedron.js
@@ -1,4 +1,4 @@
-import THREE from '../lib/three.js';
+import * as THREE from 'three';
 import { registerGeometry } from '../core/geometry.js';
 
 registerGeometry('octahedron', {