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