Import directly from three and only use lib/three for AFRAME.THREE export (#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 <diego.marcos@gmail.com>

Author: mrxz

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');

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';

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';
 
 /**

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';
 

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';
 

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);
     }

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'); };

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';

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: {

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';