Removed example 3D map, see feature-react-three branch for vtt work

app/imports/client/ui/tabletop/TabletopMap.vue

@@ -1,134 +1,8 @@
 <template>
-  <div>
-    <canvas
-      ref="map"
-      class="tabletop-map"
-    />
-  </div>
+  <div />
 </template>
 
 <script lang="js">
-import * as THREE from 'three';
-import { Tracker } from 'meteor/tracker'
-import TabletopObjects from '/imports/api/tabletop/TabletopObjects.js';
-import TabletopMaps from '/imports/api/tabletop/TabletopMaps.js';
-import { OrbitControls } from '/imports/api/tabletop/three/OrbitControls.js';
-import { DragControls } from 'three/examples/jsm/controls/DragControls.js';
-import { MapControls } from 'three/examples/jsm/controls/MapControls.js';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
 
-const maps = [
-  {
-    name: 'first map',
-    position: { x: 0, y: 0 },
-    width: 25,
-    height: 25,
-    texture: '/images/battlemap.webp',
-  }
-];
-
-export default {
-  mounted(){
-    const scene = new THREE.Scene();
-    const perspectiveCam = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
-    perspectiveCam.position.z = 5;
-    const orthoCam = new THREE.OrthographicCamera( -2, 2, 2, -2, 0, 1000 );
-    orthoCam.position.z = 500
-    const activeCamera = orthoCam;
-
-
-    const renderer = new THREE.WebGLRenderer({ canvas: this.$refs.map });
-    renderer.shadowMap.enabled = true;
-
-    activeCamera.up.set( 0, 0, 1 ); // Use z as upwards
-    const controls = new MapControls( activeCamera, renderer.domElement );
-
-    maps.forEach(map => {
-      const texture = new THREE.TextureLoader().load( map.texture );
-      const material = new THREE.MeshStandardMaterial({ map: texture });
-      material.map.needsUpdate = true;
-      const plane = new THREE.Mesh(new THREE.PlaneGeometry(map.width, map.height), material);
-      plane.overdraw = true;
-      plane.receiveShadow = true;
-      scene.add(plane);
-    });
-
-    // Example model
-    const loader = new STLLoader()
-    loader.load(
-        '/models/example-mini.stl',
-      function (geometry) {
-        const material = new THREE.MeshStandardMaterial({
-          color: 0xb2ffc8,
-        });
-        const mesh = new THREE.Mesh(geometry, material);
-        mesh.castShadow = true;
-        scene.add(mesh)
-        const light = new THREE.PointLight()
-        light.position.set(0, 0, 50)
-        light.castShadow = true;
-        scene.add(light)
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
-        directionalLight.position.set(20, 50, 100)
-        directionalLight.castShadow = true;
-        scene.add( directionalLight );
-        const dragControls = new DragControls([mesh], activeCamera, renderer.domElement);
-        dragControls.addEventListener( 'dragstart', function ( event ) {
-          controls.enabled = false;
-        });
-        dragControls.addEventListener( 'dragend', function ( event ) {
-        controls.enabled = true;
-        });
-        },
-        (xhr) => {
-            console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
-        },
-        (error) => {
-            console.log(error)
-        }
-    )
-    //controls.enabled = false;
-    
-    //});
-
-  /*
-    const axesHelper = new THREE.AxesHelper( 5 );
-    scene.add( axesHelper );
-  */
-
-    function resizeCanvasToDisplaySize() {
-      const canvas = renderer.domElement;
-      // look up the size the canvas is being displayed
-      const width = canvas.clientWidth;
-      const height = canvas.clientHeight - 50;
-
-      // adjust displayBuffer size to match
-      if (canvas.width !== width || canvas.height !== height) {
-        // you must pass false here or three.js sadly fights the browser
-        perspectiveCam.aspect = width / height;
-        orthoCam.left= width / -200;
-        orthoCam.right = width / 200;
-        orthoCam.top = height / 200;
-        orthoCam.bottom = height / -200;
-        perspectiveCam.updateProjectionMatrix();
-        orthoCam.updateProjectionMatrix();
-        controls.update();
-        renderer.setSize(width, height, false);
-      }
-    }
-    function animate() {
-      resizeCanvasToDisplaySize();
-      renderer.render( scene, activeCamera );
-      requestAnimationFrame( animate );
-    }
-    animate();
-  },
-}
+export default { }
 </script>
-
-<style>
-  .tabletop-map {
-    height: 100%;
-    width: 100%;
-  }
-</style>

app/package-lock.json

@@ -6021,7 +6021,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "dev": true
     },
     "is-fullwidth-code-point": {
@@ -7140,7 +7140,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
     "natural-compare-lite": {
@@ -7941,11 +7941,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "three": {
-      "version": "0.156.1",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz",
-      "integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ=="
-    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

app/package.json

@@ -56,7 +56,6 @@
     "simpl-schema": "^1.13.1",
     "source-map-support": "^0.5.21",
     "speakingurl": "^14.0.1",
-    "three": "^0.156.1",
     "vivagraphjs": "^0.12.0",
     "vue": "2.6.14",
     "vue-meteor-tracker": "^2.0.0",