A little bit of threejs prototyping

app/imports/api/tabletop/TabletopObjects.js

@@ -0,0 +1,43 @@
+import SimpleSchema from 'simpl-schema';
+import ChildSchema from '/imports/api/parenting/ChildSchema.js';
+
+let TabletopObjects = new Mongo.Collection('tabletopObjects');
+
+let TabletopObjectSchema = new SimpleSchema({
+  name: {
+    type: String,
+    optional: true,
+  },
+  texture: {
+    type: String,
+    regEx: SimpleSchema.RegEx.Id,
+  },
+  position: {
+    type: Object,
+    optional: true,
+  },
+  'position.x': {
+    type: Number,
+  },
+  'position.y': {
+    type: Number,
+  },
+  width: {
+    type: Number,
+  },
+  height: {
+    type: Number,
+  },
+  rotation: {
+    type: Number,
+    max: 360,
+    min: 0,
+  },
+});
+
+const schema = new SimpleSchema({});
+schema.extend(ChildSchema);
+schema.extend(TabletopObjectSchema);
+TabletopObjects.attachSchema(schema);
+
+export default TabletopObjects;

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

@@ -10,14 +10,19 @@
 <script lang="js">
 import * as THREE from 'three';
 import { Tracker } from 'meteor/tracker'
-import { MapControls } from '/imports/api/tabletop/three/OrbitControls.js';
+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: 5,
-    height: 5,
+    width: 25,
+    height: 25,
     texture: '/images/battlemap.webp',
   }
 ];
@@ -27,25 +32,65 @@ export default {
     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, 1, 1000 );
-    orthoCam.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});
+    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.MeshBasicMaterial({ 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 );

app/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dicecloud",
-  "version": "2.0.53",
+  "version": "2.0.57",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1917,7 +1917,7 @@
     "lodash.omit": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
-      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
     },
     "lodash.template": {
       "version": "4.5.0",
@@ -3742,9 +3742,9 @@
       "dev": true
     },
     "three": {
-      "version": "0.148.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.148.0.tgz",
-      "integrity": "sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw=="
+      "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",

app/package.json

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