@jdultra/threedtiles 3.0.7 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jdultra/threedtiles",
-    "version": "3.0.7",
+    "version": "3.0.8",
     "description": "An OGC 3DTiles viewer for Three.js",
     "main": "tileset.js",
     "scripts": {
@@ -24,10 +24,11 @@
     "license": "MIT",
     "dependencies": {
         "gltf-validator": ">=2.0.0-dev.3.3",
+        "js-utils-z": "1.2.1",
         "lodash": ">=4.17.20",
+        "path-browserify": "^1.0.1",
         "regenerator-runtime": ">=0.13.7",
-        "three": "0.131.0",
-        "js-utils-z": "1.2.1"
+        "three": "0.131.0"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",
@@ -38,9 +39,9 @@
         "html-loader": "^1.3.2",
         "html-webpack-plugin": "^4.5.0",
         "mini-css-extract-plugin": "^1.3.1",
-        "webpack": "4.44.2",
-        "webpack-cli": "^3.3.12",
-        "webpack-dev-server": "3.11.0",
+        "webpack": "^5.65.0",
+        "webpack-cli": "4.9.1",
+        "webpack-dev-server": "4.7.1",
         "whatwg-fetch": "^3.5.0"
     }
 }

package/src/index.js

@@ -3,6 +3,12 @@ import * as THREE from 'three';
 import Stats from 'three/examples/jsm/libs/stats.module.js';
 import { OGC3DTile } from "./tileset/OGC3DTile";
 import { MapControls, OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import back from './images/skybox/back.png';
+import front from './images/skybox/front.png';
+import top from './images/skybox/top.png';
+import bottom from './images/skybox/bottom.png';
+import right from './images/skybox/right.png';
+import left from './images/skybox/left.png';
 
 
 const scene = initScene();
@@ -21,12 +27,12 @@ animate();
 function initSkybox(controller, camera, scene) {
     const geometry = new THREE.BoxGeometry(8000, 8000, 8000);
     const textures = [
-        loadTexture("./skybox/back.png"),
-        loadTexture("./skybox/front.png"),
-        loadTexture("./skybox/top.png"),
-        loadTexture("./skybox/bottom.png"),
-        loadTexture("./skybox/right.png"),
-        loadTexture("./skybox/left.png"),
+        loadTexture(back),
+        loadTexture(front),
+        loadTexture(top),
+        loadTexture(bottom),
+        loadTexture(right),
+        loadTexture(left),
     ];
     function loadTexture(url) {
         return new THREE.TextureLoader().load(url, (texture => {
@@ -117,8 +123,8 @@ function initStats(dom) {
 
 function initCamera() {
     const camera = new THREE.PerspectiveCamera(70, window.offsetWidth / window.offsetHeight, 1, 10000);
-    camera.position.set(-60, 5, -30);
-    camera.lookAt(-100, 0, 0);
+    camera.position.set(-60, 80, -30);
+    camera.lookAt(-100, 40, 0);
 
     return camera;
 }
@@ -126,15 +132,9 @@ function initCamera() {
 function initTileset(scene) {
 
     const ogc3DTile = new OGC3DTile({
-        url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/castleX/tileset.json",
-        //url: "https://storage.googleapis.com/ogc-3d-tiles/berlinSubsetTiled/tileset.json",
         //url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/arkcnfuk9fw/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/a73faxnydqk/tileset.json",
-        //url: "https://s3.us-east-2.wasabisys.com/construkted-assets/e63mubnpmg/tileset.json",
-        //url: "https://assets.cesium.com/697512/tileset.json?v=1",
-        //url:"https://a.3d.blc.shc.eu/WAB/base_layer/cesium_mesh_2020/tileset.json",
+        //url: "https://storage.googleapis.com/ogc-3d-tiles/castleX/tileset.json",
+        url: "https://storage.googleapis.com/ogc-3d-tiles/berlinSubsetTiled/tileset.json",
         geometricErrorMultiplier: 1,
         loadOutsideView: true,
         meshCallback: mesh => {
@@ -148,7 +148,7 @@ function initTileset(scene) {
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0,1,0), -10)
     //ogc3DTile.translateOnAxis(new THREE.Vector3(1,0,0), -65)
     //ogc3DTile.translateOnAxis(new THREE.Vector3(0,0,1), -80)
-    //ogc3DTile.scale.set(0.01,0.01,0.01);
+    //ogc3DTile.scale.set(0.1,0.1,0.1);
     //ogc3DTile.rotateOnAxis(new THREE.Vector3(1, 0, 0), -Math.PI * 0.5) // Z-UP to Y-UP
     //// It's up to the user to call updates on the tileset. You might call them whenever the camera moves or at regular time intervals like here
 
@@ -177,7 +177,7 @@ function initTileset(scene) {
 function initController(camera, dom) {
     const controller = new OrbitControls(camera, dom);
 
-    controller.target.set(-20, -20, 35);
+    controller.target.set(-20, 40, 35);
     controller.minDistance = 1;
     controller.maxDistance = 500;
     controller.update();

package/webpack.config.js

@@ -83,19 +83,13 @@ module.exports = {
           }]
         },
         {
-          test: /\.(png|gif)$/,
-          use: [{
-            loader: "file-loader",
-            options: {
-              name: "images/[name].[contenthash].[ext]"
-            }
-          }]
-        }
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
       minimizer: [new TerserPlugin({
-        cache: true,
         parallel: true,
         terserOptions: {
             ecma: undefined,
@@ -119,8 +113,14 @@ module.exports = {
     devServer: {
       hot: true,
       open: true,
-      openPage: "",
       port: DEFAULT_WEBPACK_PORT
+    },
+    resolve: {
+      extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
+      fallback: {
+        "fs": false,
+        "path": require.resolve("path-browserify")
+      }
     }
   
 };