feat: implement materials

temp/core/MaterialManager/example.ts → packages/components/src/core/Materials/example.ts

@@ -1,38 +1,31 @@
 import * as THREE from "three";
+import * as dat from "three/examples/jsm/libs/lil-gui.module.min.js";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Stats from "stats.js";
-// @ts-ignore
-import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
 import * as OBC from "../..";
 
 const container = document.getElementById("container")!;
 
 const components = new OBC.Components();
 
-const sceneComponent = new OBC.SimpleScene(components);
-sceneComponent.setup();
-components.scene = sceneComponent;
+const worlds = components.get(OBC.Worlds);
+const world = new OBC.SimpleWorld<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>(components);
 
-const rendererComponent = new OBC.PostproductionRenderer(components, container);
-components.renderer = rendererComponent;
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
 
-const cameraComponent = new OBC.SimpleCamera(components);
-components.camera = cameraComponent;
-components.raycaster = new OBC.SimpleRaycaster(components);
+worlds.add(world);
 
 components.init();
 
-const scene = components.scene.get();
+world.camera.controls.setLookAt(13, 13, 13, 0, 0, 0);
 
-cameraComponent.controls.setLookAt(13, 13, 13, 0, 0, 0);
-
-const directionalLight = new THREE.DirectionalLight();
-directionalLight.position.set(5, 10, 3);
-directionalLight.intensity = 0.5;
-scene.add(directionalLight);
-
-const ambientLight = new THREE.AmbientLight();
-ambientLight.intensity = 0.5;
-scene.add(ambientLight);
+world.scene.setup();
 
 /* MD
   ### 👨‍🎨 Seamless Material Control
@@ -108,7 +101,7 @@ function generateCubes() {
     cube.position.y = getRandomNumber(10);
     cube.position.z = getRandomNumber(10);
     cube.updateMatrix();
-    scene.add(cube);
+    world.scene.three.add(cube);
     cubes.push(cube);
   }
 }
@@ -120,7 +113,7 @@ function generateSpheres() {
     sphere.position.y = getRandomNumber(10);
     sphere.position.z = getRandomNumber(10);
     sphere.updateMatrix();
-    scene.add(sphere);
+    world.scene.three.add(sphere);
     spheres.push(sphere);
   }
 }
@@ -137,7 +130,7 @@ generateSpheres();
   for manipulating the materials and background. Let's create different materials for Cubes and Spheres.🎭
 
   */
-const materialManager = new OBC.MaterialManager(components);
+const materials = components.get(OBC.Materials);
 
 const backgroundColor = new THREE.Color("white");
 
@@ -165,11 +158,11 @@ const sphereMaterial = new THREE.MeshBasicMaterial({ color: sphereColor });
   Next, we'll add the necessary meshes to help **materialManager** to choose which mesh to use when applying materials.🧮
 
 */
-materialManager.addMaterial("cubeMaterial", cubeMaterial);
-materialManager.addMeshes("cubeMaterial", cubes);
+materials.addMaterial("cubeMaterial", cubeMaterial);
+materials.addMeshes("cubeMaterial", cubes);
 
-materialManager.addMaterial("sphereMaterial", sphereMaterial);
-materialManager.addMeshes("sphereMaterial", spheres);
+materials.addMaterial("sphereMaterial", sphereMaterial);
+materials.addMeshes("sphereMaterial", spheres);
 
 /* MD
   ### 🚦 Controlling the Manager Events
@@ -186,17 +179,17 @@ const gui = new dat.GUI();
 
 const actions = {
   changeSphereMaterial: () => {
-    materialManager.set(true, ["sphereMaterial"]);
+    materials.set(true, ["sphereMaterial"]);
   },
   changeCubeMaterial: () => {
-    materialManager.set(true, ["cubeMaterial"]);
+    materials.set(true, ["cubeMaterial"]);
   },
   changeBackground: () => {
-    materialManager.setBackgroundColor(backgroundColor);
+    materials.setBackgroundColor(backgroundColor, world);
   },
   reset: () => {
-    materialManager.set(false, ["cubeMaterial", "sphereMaterial"]);
-    materialManager.resetBackgroundColor();
+    materials.set(false, ["cubeMaterial", "sphereMaterial"]);
+    materials.resetBackgroundColor(world);
   },
 };
 
@@ -218,5 +211,5 @@ const stats = new Stats();
 stats.showPanel(2);
 document.body.append(stats.dom);
 stats.dom.style.left = "0px";
-rendererComponent.onBeforeUpdate.add(() => stats.begin());
-rendererComponent.onAfterUpdate.add(() => stats.end());
+world.renderer.onBeforeUpdate.add(() => stats.begin());
+world.renderer.onAfterUpdate.add(() => stats.end());

temp/core/MaterialManager/index.ts → packages/components/src/core/Materials/index.ts

@@ -1,7 +1,6 @@
 import * as THREE from "three";
-import { Component, Disposable, Event } from "../../base-types";
+import { Component, Disposable, Event, World } from "../Types";
 import { Components } from "../Components";
-import { ToolComponent } from "../ToolsComponent";
 
 // TODO: Clean up and document
 // TODO: Disable / enable instance color for instance meshes
@@ -10,42 +9,34 @@ import { ToolComponent } from "../ToolsComponent";
  * A tool to easily handle the materials of massive amounts of
  * objects and scene background easily.
  */
-export class MaterialManager extends Component<string[]> implements Disposable {
+export class Materials extends Component implements Disposable {
   static readonly uuid = "24989d27-fa2f-4797-8b08-35918f74e502" as const;
 
   /** {@link Component.enabled} */
   enabled = true;
 
-  private _originalBackground: THREE.Color | null = null;
+  private _originalBackground = new Map<string, THREE.Color>();
 
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event<string>();
 
+  list: {
+    [id: string]: {
+      material: THREE.Material;
+      meshes: Set<THREE.Mesh | THREE.InstancedMesh>;
+    };
+  } = {};
+
   private _originals: {
     [guid: string]: {
       material: THREE.Material[] | THREE.Material;
       instances?: any;
     };
   } = {};
 
-  private _list: {
-    [id: string]: {
-      material: THREE.Material;
-      meshes: Set<THREE.Mesh | THREE.InstancedMesh>;
-    };
-  } = {};
-
   constructor(components: Components) {
     super(components);
-    this.components.tools.add(MaterialManager.uuid, this);
-  }
-
-  /**
-   * {@link Component.get}.
-   * @return list of created materials.
-   */
-  get() {
-    return Object.keys(this._list);
+    this.components.add(Materials.uuid, this);
   }
 
   /**
@@ -54,9 +45,9 @@ export class MaterialManager extends Component<string[]> implements Disposable {
    * @param active whether to turn it on or off.
    * @param ids the ids of the style to turn on or off.
    */
-  set(active: boolean, ids = Object.keys(this._list)) {
+  set(active: boolean, ids = Object.keys(this.list)) {
     for (const id of ids) {
-      const { material, meshes } = this._list[id];
+      const { material, meshes } = this.list[id];
       for (const mesh of meshes) {
         if (active) {
           if (!this._originals[mesh.uuid]) {
@@ -80,26 +71,30 @@ export class MaterialManager extends Component<string[]> implements Disposable {
   }
 
   /** {@link Disposable.dispose} */
-  async dispose() {
-    for (const id in this._list) {
-      const { material } = this._list[id];
+  dispose() {
+    for (const id in this.list) {
+      const { material } = this.list[id];
       material.dispose();
     }
-    this._list = {};
+    this.list = {};
     this._originals = {};
-    await this.onDisposed.trigger(MaterialManager.uuid);
+    this.onDisposed.trigger(Materials.uuid);
     this.onDisposed.reset();
+    this._originalBackground.clear();
   }
 
   /**
    * Sets the color of the background of the scene.
    *
    * @param color: the color to apply.
    */
-  setBackgroundColor(color: THREE.Color) {
-    const scene = this.components.scene.get();
-    if (!this._originalBackground) {
-      this._originalBackground = scene.background as THREE.Color;
+  setBackgroundColor(color: THREE.Color, world: World) {
+    const scene = world.scene.three;
+    if (!(scene instanceof THREE.Scene)) {
+      return;
+    }
+    if (!this._originalBackground.has(world.uuid)) {
+      this._originalBackground.set(world.uuid, scene.background as THREE.Color);
     }
     if (this._originalBackground) {
       scene.background = color;
@@ -110,10 +105,14 @@ export class MaterialManager extends Component<string[]> implements Disposable {
    * Resets the scene background to the color that was being used
    * before applying the material manager.
    */
-  resetBackgroundColor() {
-    const scene = this.components.scene.get();
-    if (this._originalBackground) {
-      scene.background = this._originalBackground;
+  resetBackgroundColor(world: World) {
+    const scene = world.scene.three;
+    if (!(scene instanceof THREE.Scene)) {
+      return;
+    }
+    const color = this._originalBackground.get(world.uuid);
+    if (color) {
+      scene.background = color;
     }
   }
 
@@ -123,10 +122,10 @@ export class MaterialManager extends Component<string[]> implements Disposable {
    * @param material the material of the style.
    */
   addMaterial(id: string, material: THREE.Material) {
-    if (this._list[id]) {
+    if (this.list[id]) {
       throw new Error("This ID already exists!");
     }
-    this._list[id] = { material, meshes: new Set() };
+    this.list[id] = { material, meshes: new Set() };
   }
 
   /**
@@ -135,11 +134,11 @@ export class MaterialManager extends Component<string[]> implements Disposable {
    * @param meshes the meshes to assign to the style.
    */
   addMeshes(id: string, meshes: THREE.Mesh[]) {
-    if (!this._list[id]) {
+    if (!this.list[id]) {
       throw new Error("This ID doesn't exists!");
     }
     for (const mesh of meshes) {
-      this._list[id].meshes.add(mesh);
+      this.list[id].meshes.add(mesh);
     }
   }
 
@@ -149,13 +148,11 @@ export class MaterialManager extends Component<string[]> implements Disposable {
    * @param meshes the meshes to assign to the style.
    */
   removeMeshes(id: string, meshes: THREE.Mesh[]) {
-    if (!this._list[id]) {
+    if (!this.list[id]) {
       throw new Error("This ID doesn't exists!");
     }
     for (const mesh of meshes) {
-      this._list[id].meshes.delete(mesh);
+      this.list[id].meshes.delete(mesh);
     }
   }
 }
-
-ToolComponent.libraryUUIDs.add(MaterialManager.uuid);

packages/components/src/core/Worlds/example.ts

@@ -22,3 +22,5 @@ components.init();
 
 const cube = new THREE.Mesh(new THREE.BoxGeometry());
 world.scene.three.add(cube);
+
+world.camera.controls.setLookAt(13, 13, 13, 0, 0, 0);

packages/components/src/core/index.ts

@@ -5,3 +5,4 @@ export * from "./Types";
 export * from "./Worlds";
 export * from "./Grids";
 export * from "./Clipper";
+export * from "./Materials";