feat: 修改加载方式

examples/demos/realitycapture/index.html

@@ -80,12 +80,13 @@
     </p>
   </div>
   <script src="../../resource/js/vconsole.min.js"></script>
+  <script src="../../../dist/three-loader-3dtiles.js"></script>
   <script>
     // VConsole 默认会挂载到 `window.VConsole` 上
     var vConsole = new window.VConsole();
   </script>
   <!-- <script async src="https://ga.jspm.io/npm:es-module-shims@1.4.4/dist/es-module-shims.js"></script> -->
-  <script async src="../../resource/js/es-module-shims.js"></script>
+  <!-- <script async src="../../resource/js/es-module-shims.js"></script>
   <script type="importmap">
     {
       "imports": {
@@ -234,7 +235,7 @@
     window.addEventListener('resize', onWindowResize)
 
     render();
-  </script>
+  </script> -->
   <a id="button" target="_blank" href="https://github.com/nytimes/three-loader-3dtiles/blob/master/examples/demos/realitycapture/index.html" title="View source code for demo" style=""><img src="../ic_code_black_24dp.svg"></a>
 </body>
 </html>

examples/resource/js/DRACOLoader.js

@@ -3,7 +3,7 @@ import {
 	BufferGeometry,
 	FileLoader,
 	Loader
-} from 'three';
+} from './three.js';
 
 const _taskCache = new WeakMap();
 

examples/resource/js/GLTFLoader.js

@@ -61,7 +61,7 @@ import {
 	Vector3,
 	VectorKeyframeTrack,
 	sRGBEncoding
-} from 'three';
+} from './three.js';
 
 class GLTFLoader extends Loader {
 

examples/resource/js/KTX2Loader.js

@@ -30,7 +30,7 @@ import {
 	RGB_S3TC_DXT1_Format,
 	sRGBEncoding,
 	UnsignedByteType
-} from 'three';
+} from './three.js';
 import { WorkerPool } from './WorkerPool.js';
 
 const KTX2TransferSRGB = 2;

examples/resource/js/OrbitControls.js

@@ -6,7 +6,7 @@ import {
 	TOUCH,
 	Vector2,
 	Vector3
-} from 'three';
+} from './three.js';
 
 // This set of controls performs orbiting, dollying (zooming), and panning.
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).

package.json

@@ -43,10 +43,11 @@
     "@loaders.gl/core": "^3.1.4",
     "jpeg-js": ">=0.4.0",
     "@math.gl/core": "^3.5.6",
-    "@math.gl/culling": "^3.5.6"
+    "@math.gl/culling": "^3.5.6",
+    "three": "^0.137.0"
   },
   "peerDependencies": {
-    "three": "^0.137.0"
+    
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.13.16",

src/gradients.ts

@@ -1,4 +1,4 @@
-import { Color } from 'three'
+import { Color } from '../examples/resource/js/three.js' //'../../resource/js/three.js'
 type Gradient = Array<[number, Color]>;
 
 const Gradients: {[key: string] : Gradient } = {

src/index.ts

@@ -1,3 +1,9 @@
+
+import { OrbitControls } from '../examples/resource/js/OrbitControls.js';
+import { CameraRig, FreeMovementControls } from '../examples/resource/js/three-story-controls.js' //'../../examples/resource/js/three-story-controls.js'
+import Stats from '../examples/resource/js/stats.module.js';
+import StatsWidget from '../examples/resource/js/stats-widget.js' //'@probe.gl/stats-widget';
+
 import { load } from '@loaders.gl/core';
 import { CesiumIonLoader, Tiles3DLoader } from '@loaders.gl/3d-tiles';
 import { Tileset3D, TILE_TYPE, TILE_CONTENT_STATE } from '@loaders.gl/tiles';
@@ -6,6 +12,9 @@ import  { _PerspectiveFrustum as PerspectiveFrustum}  from '@math.gl/culling';
 import { Matrix4 as MathGLMatrix4 } from '@math.gl/core';
 import * as Util from './util';
 import {
+  Scene, 
+  Clock,
+  sRGBEncoding,
   Object3D,
   Group,
   Matrix4,
@@ -27,11 +36,11 @@ import {
   WebGLRenderer,
   Texture,
   Euler
-} from 'three';
+} from '../examples/resource/js/three.js';
 
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
-import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+import { GLTFLoader } from '../examples/resource/js/GLTFLoader.js';
+import { DRACOLoader } from '../examples/resource/js/DRACOLoader.js';
+import { KTX2Loader } from '../examples/resource/js/KTX2Loader.js';
 
 import { Gradients } from './gradients';
 
@@ -739,3 +748,118 @@ function disposeNode(node) {
 }
 
 export { Loader3DTiles, PointCloudColoring, Shading, Runtime, GeoCoord, GeoTransform, LoaderOptions, LoaderProps };
+
+
+//------------------------------------------------------test
+
+const queryParams = new URLSearchParams(document.location.search);
+
+    const canvasParent = document.querySelector('#canvas-parent') as HTMLElement;
+    const statsParent = document.querySelector('#stats-widget') as HTMLElement
+
+    const scene = new Scene();
+    const camera = new PerspectiveCamera(
+      35,
+      1,
+      0.01,
+      1000,
+    );
+
+    const renderer = new WebGLRenderer();
+    renderer.outputEncoding = sRGBEncoding;
+
+    const clock = new Clock()
+    const rig = new CameraRig(camera, scene)
+    
+    let controls = undefined;
+
+    if (queryParams.get('orbit')) {
+      controls = new OrbitControls( camera, canvasParent);
+      controls.listenToKeyEvents( document.body );
+      camera.position.set(0,200,0);
+      controls.update();
+    } else {
+      controls = new FreeMovementControls(rig, {
+        panDegreeFactor: 2,
+        wheelScaleFactor: 0.01,
+        keyboardScaleFactor: 0.015,
+        keyboardDampFactor: 0
+      });
+      controls.enable();
+    }
+    
+    canvasParent.appendChild(renderer.domElement);
+
+    const threeJsStats = new Stats();
+    threeJsStats.domElement.style.position = 'absolute';
+    threeJsStats.domElement.style.top = '10px';
+    threeJsStats.domElement.style.left = '10px';
+
+    canvasParent.appendChild( threeJsStats.domElement );
+
+
+    let tilesRuntime = undefined;
+    let statsRuntime = undefined;
+
+    if (queryParams.get('tilesetUrl')) {
+      (document.querySelector('#example-desc') as HTMLElement).style.display = 'none';
+    }
+
+    loadTileset();
+
+
+    async function loadTileset() {
+      const result = await Loader3DTiles.load(
+        {
+          url:
+            queryParams.get('tilesetUrl') ??
+           //'https://int.nyt.com/data/3dscenes/ONA360/TILESET/0731_FREEMAN_ALLEY_10M_A_36x8K__10K-PN_50P_DB/tileset_tileset.json',
+           'https://testgis.4dage.com/LVBADUI_qp/tileset.json',
+          renderer: renderer,
+          options: {
+            dracoDecoderPath: 'https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/libs/draco',
+            basisTranscoderPath: 'https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/libs/basis',
+            maximumScreenSpaceError: 48 //queryParams.get('sse') ?? 48,
+          }
+        }
+      );
+
+      const {model, runtime} = result;
+      model.rotation.set(-Math.PI / 2, 0, Math.PI / 2);
+
+      if (!queryParams.get('tilesetUrl')) {
+        model.position.set(-1, 4, -16);
+      }
+
+     tilesRuntime = runtime;
+      scene.add(model);
+
+      statsRuntime = new StatsWidget(runtime.getStats(), {container: statsParent });
+      statsParent.style.visibility = 'visible';
+    }
+
+    function render(t) {
+      const dt = clock.getDelta()
+      controls.update(t);
+      if (tilesRuntime) {
+        tilesRuntime.update(dt, renderer, camera);
+      }
+      if (statsRuntime) {
+        statsRuntime.update();
+      }
+      renderer.render(scene, camera);
+      threeJsStats.update();
+      window.requestAnimationFrame(render);
+
+    }
+
+    onWindowResize();
+
+    function onWindowResize() {
+      renderer.setSize(canvasParent.clientWidth, canvasParent.clientHeight);
+      camera.aspect = canvasParent.clientWidth / canvasParent.clientHeight;
+      camera.updateProjectionMatrix();
+    }
+    window.addEventListener('resize', onWindowResize)
+
+    render(undefined);

src/util.ts

@@ -18,7 +18,7 @@ import {
   Group,
   ArrowHelper,
   Color
-} from 'three';
+} from '../examples/resource/js/three.js';
 import { Tile3D } from '@loaders.gl/tiles';
 import { Plane as MathGLPlane } from '@math.gl/culling';
 import { Matrix3 as MathGLMatrix3 } from '@math.gl/core';

tsconfig.json

@@ -8,7 +8,6 @@
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
     "paths": {
       "@math.gl/culling": ["./node_modules/@math.gl/culling/src/index.js"]
     }