Merge pull request #3 from decentraland-scenes/set-up-models

Set up models

package.json

@@ -8,8 +8,8 @@
     "build": "sdk-commands build",
     "upgrade-sdk": "npm install --save-dev @dcl/sdk@latest",
     "upgrade-sdk:next": "npm install --save-dev @dcl/sdk@next",
-     "format": "prettier --config .prettierrc -c ./**/*.{ts,tsx,js,jsx}",
-  "format:fix": "prettier --config .prettierrc -w ./**/*.{ts,tsx,js,jsx}"
+    "format": "prettier --config .prettierrc -c ./**/*.{ts,tsx,js,jsx}",
+    "format:fix": "prettier --config .prettierrc -w ./**/*.{ts,tsx,js,jsx}"
   },
   "devDependencies": {
     "@dcl/asset-packs": "latest",
@@ -34,4 +34,4 @@
     "printWidth": 120,
     "trailingComma": "none"
   }
-}
+}

shared-dcl/src/som/README.md

@@ -0,0 +1,84 @@
+# SOM
+A Scene Object Model (SOM) file lists all of the GLTF or GLB models to load into a Decentraland scene. This module contains a SceneObject data structure used to define the models and their positioning in the world, and a ModelLoader class that handles the loading and positioning at runtime.
+
+## SOM JSON data
+The SOM data structure is defined in a file named som.json.
+
+Here's an example of a som.json file for a scene with two hills and a rock: 
+```javascript
+{
+  "scene": {
+    "title": "My Great Scene",
+    "hill01": {
+      "filename": "terrain/hill.glb",
+      "pos": [ 2, 14, 8 ],
+      "angles": [ 0, 270, 0 ],
+      "scale": [ 1.5, 1.5, 1.5 ]
+    },
+    "hill02": {
+      "filename": "terrain/hill.glb",
+      "pos": [ 12, 14, 8 ],
+      "angles": [ 0, 270, 0 ],
+      "scale": [ 1.5, 1.5, 1.5 ]
+    },
+    "rock01": {
+      "filename": "rock.gltf",
+      "pos": [ 7.3, 14.4, 2.2 ],
+      "angles": [ 0, 150, 0 ],
+      "scale": [ 0.25, 0.25, 0.25],
+      "throwable": true,
+      "rigidbody": true,
+      "physics": {
+        "mass": 1,
+        "bounciness": 0.4,
+        "velocity": [0, 0, 0]
+      }
+    }
+  }
+}
+```
+Note that if the same model file is referenced more than once, the ModelLoader will only load that model file once, and re-use the GLTFShape component for each instance of the model.
+
+## ModelLoader Class
+
+The ModelLoader class will instantiate the required Entities and Components, given an object from the som.json file, and place them in the scene with the given position and rotation.
+```javascript
+// instantiate the ModelLoader
+const loader:ModelLoader = new ModelLoader();
+
+// load the models and place them in the scene
+const hill01:Entity = loader.spawnSceneObject(som.scene.hill02);
+const hill02:Entity = loader.spawnSceneObject(som.scene.hill02);
+const rock1:Entity = loader.spawnSceneObject(som.scene.rock1);
+```
+The ModelLoader.spawnSceneObject() method creates an Entity, loads the model file to create a GLTFShape, attaches any optional Components (such as RigidBody or Portable), and then adds the Entity to the engine.
+
+## Game Zones
+
+Game Zones can be added to the som.json file as well. A Zone is a bounding box in 3D space. You can receive events whenever the player (camera) enters or leaves a specific zone. 
+
+Here is an example of the format for Game Zones in the som.json file:
+```javascript
+{
+  "scene": { 
+  },
+  "zones": [
+    { 
+      "name": "Bridge",
+      "zoneNum": 6,
+      "text": "The gap seems too wide to jump.",
+      "repeat": false,
+      "pos": [ 42, 13.5, -5 ],
+      "scale": [11, 4, 3 ]
+    },
+    { 
+      "name": "Courtyard",
+      "zoneNum": 7,
+      "text": "This area seems deserted, though you see\nlittle indentations in the dirt.\nPaw prints?",
+      "repeat": false,
+      "pos": [ 45, 13.5, 18 ],
+      "scale": [17, 4, 9 ]
+    }
+  ]
+}
+```

shared-dcl/src/som/modelloader.ts

@@ -0,0 +1,49 @@
+import { engine, Entity, GltfContainer, Transform } from "@dcl/sdk/ecs";
+import {SceneObject, ZoneData} from "./sceneobject";
+import { Vector3, Quaternion, Color4 } from '@dcl/sdk/math'
+/**
+ * Loads a GLTF model, given a SceneObject data structure.
+ * Optionally adds components to make the entity Portable/throwable or a RigidBody.
+ * If a GLTFShape has already been loaded, it will be reused.
+ */
+export class ModelLoader
+{
+    public cache: { [key: string]: any } = {} 
+    public filePrefix : string = "assets/models/";
+
+    spawnSceneObject(data: object, addToEngine:boolean = true): Entity
+    {
+        const so = this.populate(new SceneObject(), data); // TODO: error checking
+
+        const mod = engine.addEntity()
+
+        // check cache to see if shape is already there
+        let shape:string
+        shape = this.cache[so.filename];
+        // log("loading " + so.filename);
+
+        if (shape == undefined)
+        {   
+            shape = (this.filePrefix + so.filename);
+            this.cache[so.filename] = shape;
+        }
+        GltfContainer.create(mod,{src: shape})
+
+        Transform.create(mod,{position: Vector3.create(...so.pos),scale: Vector3.create(...so.scale)})
+        Transform.getMutable(mod).rotation = Quaternion.fromEulerDegrees(so.angles[0], so.angles[1], so.angles[2]);
+        console.log('gltf ',GltfContainer.get(mod).src, 'quaternion ',Transform.get(mod).rotation)
+        return mod;
+    }
+    populate<T>(target: T, ...sources: Partial<T>[]): T {
+        if (!target) {
+          throw new TypeError('Cannot convert undefined or null to object')
+        }
+        for (const source of sources) {
+          if (source) {
+            Object.assign(target, source)
+            console.log('file converted')
+          }
+        }
+        return target
+    }
+}

shared-dcl/src/som/sceneobject.ts

@@ -0,0 +1,31 @@
+export class SceneObject 
+{
+    public filename:string = ""
+    public pos:number[] = []
+    public angles:number[] = [ 0, 0, 0 ];
+    public scale:number[] = [ 1, 1, 1 ];
+    public portable:boolean = false;
+    public throwable:boolean = false;
+    public rigidbody:boolean = false;
+    public physics:PhysicsData = new PhysicsData();
+    public text:string = "";
+}
+
+export class PhysicsData
+{
+    public mass:number = 1;
+    public bounciness:number = 0.4;
+    public velocity:number[] = [ 0, 0, 0 ];
+    public startStatic:boolean = true;
+}
+
+export class ZoneData
+{
+    public name:string = ""
+    public zoneNum:number = 0
+    public repeat:boolean = false;
+    public text:string = ""
+    public pos:number[] = [ 1, 1, 1 ];
+    public scale:number[] = [ 2, 2, 2 ];
+
+}

src/gamemanager.ts

@@ -1,14 +1,57 @@
 import { engine } from '@dcl/sdk/ecs'
-// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+import { som } from './som';
+import { ProjectLoader } from './projectloader';
+
 export class GameManager {
-  static instance: GameManager | null = null
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
-  constructor(titleId: string) {}
-  static createAndAddToEngine(titleId: string): GameManager {
-    if (this.instance == null) {
-      this.instance = new GameManager(titleId)
-      this.instance = engine.addEntity()
-    }
-    return this.instance
+  public loader:ProjectLoader;
+  constructor(titleId: string) {
+    this.loader = new ProjectLoader()
+  }
+  async init() {
+    this.loadScenery();
+  }
+  loadScenery(){
+    const signInstructions = this.loader.spawnSceneObject(som.scene.signInstructions);
+    const ground01 = this.loader.spawnSceneObject(som.scene.ground01);
+    const ground02 = this.loader.spawnSceneObject(som.scene.ground02);
+    const ground03 = this.loader.spawnSceneObject(som.scene.ground03);
+    const ground04 = this.loader.spawnSceneObject(som.scene.ground04);
+    const ground05 = this.loader.spawnSceneObject(som.scene.ground05);
+    const ground06 = this.loader.spawnSceneObject(som.scene.ground06);
+    const ground07 = this.loader.spawnSceneObject(som.scene.ground07);
+    const ground08 = this.loader.spawnSceneObject(som.scene.ground08);
+
+    const tree01 = this.loader.spawnSceneObject(som.scene.tree01);
+    const tree02 = this.loader.spawnSceneObject(som.scene.tree02);
+    const tree03 = this.loader.spawnSceneObject(som.scene.tree03);
+    const tree04 = this.loader.spawnSceneObject(som.scene.tree04);
+    const tree05 = this.loader.spawnSceneObject(som.scene.tree05);
+    const tree06 = this.loader.spawnSceneObject(som.scene.tree06);
+    const tree07 = this.loader.spawnSceneObject(som.scene.tree07);
+    const tree08 = this.loader.spawnSceneObject(som.scene.tree08);
+    const tree09 = this.loader.spawnSceneObject(som.scene.tree09);
+    const tree10 = this.loader.spawnSceneObject(som.scene.tree10);
+
+    const wall01 = this.loader.spawnSceneObject(som.scene.wall01);
+    const wall02 = this.loader.spawnSceneObject(som.scene.wall02);
+
+    const wallCorner01 = this.loader.spawnSceneObject(som.scene.wallCorner01);
+    const wallCorner03 = this.loader.spawnSceneObject(som.scene.wallCorner03);
+
+    const tree11 = this.loader.spawnSceneObject(som.scene.tree11);
+    const tree12 = this.loader.spawnSceneObject(som.scene.tree12);
+
+    const fence02 = this.loader.spawnSceneObject(som.scene.fence02);
+    const fence03 = this.loader.spawnSceneObject(som.scene.fence03);
+    const fence04 = this.loader.spawnSceneObject(som.scene.fence04);
+    const fence05 = this.loader.spawnSceneObject(som.scene.fence05);
+
+    const crate01 = this.loader.spawnSceneObject(som.scene.crate01);
+    const crate02 = this.loader.spawnSceneObject(som.scene.crate02);
+
+    const statue = this.loader.spawnSceneObject(som.scene.statue);
+
+    const tower = this.loader.spawnSceneObject(som.scene.tower);
+    const hammer01 = this.loader.spawnSceneObject(som.scene.hammer01);
   }
 }

src/index.ts

@@ -8,5 +8,6 @@ export function main() {
    */
 
   console.log('scene: ' + som.scene.title)
-  GameManager.createAndAddToEngine(svr.t)
+  const gameManager = new GameManager(svr.t)
+  gameManager.init()
 }