@needle-tools/engine 4.4.0-alpha.4 → 4.4.0-beta

package/src/engine/engine_utils_format.ts

@@ -59,13 +59,21 @@ export async function tryDetermineFileTypeFromURL(url: string, useExtension: boo
         }
     }
 
+    
     // If the URL doesnt contain a filetype we need to check the header
     // This is the case for example if we load a file from a data url
-    const newUrl = new URL(url);
-    // Adding a URL parameter to avoid the brower to bust the full cache
-    // If we don't do this the file that might already be disc cached will be deleted from the cache
-    newUrl.searchParams.append("range", "true");
-    const header = await fetch(newUrl, {
+
+    if(url.startsWith("blob:")) {
+        // We can't modify the blob URL
+    }
+    else {
+        const newUrl = new URL(url);
+        // Adding a URL parameter to avoid the brower to bust the full cache
+        // If we don't do this the file that might already be disc cached will be deleted from the cache
+        newUrl.searchParams.append("range", "true");
+        url = newUrl.toString();
+    }
+    const header = await fetch(url, {
         method: "GET",
         headers: {
             "range": "bytes=0-32"

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -697,7 +697,7 @@ export class NeedleMenuElement extends HTMLElement {
                 if (res == true && hasCommercialLicense() && !debugNonCommercial) {
                     let visible = this._userRequestedLogoVisible;
                     if (visible === undefined) visible = false;
-                    this.#onSetLogoVisible(visible);
+                    this.___onSetLogoVisible(visible);
                 }
             }));
         } catch (e) {
@@ -827,10 +827,10 @@ export class NeedleMenuElement extends HTMLElement {
                 if (!localNetwork) return;
             }
         }
-        this.#onSetLogoVisible(visible);
+        this.___onSetLogoVisible(visible);
     }
 
-    #onSetLogoVisible(visible: boolean) {
+    private ___onSetLogoVisible(visible: boolean) {
         this.logoContainer.style.display = "";
         this.logoContainer.style.opacity = "1";
         this.logoContainer.style.visibility = "visible";

package/src/engine-components/Camera.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, Euler, Frustum, Matrix4, OrthographicCamera, PerspectiveCamera, Ray, Vector3 } from "three";
+import { Color, EquirectangularReflectionMapping, Euler, Frustum, Matrix4, OrthographicCamera, PerspectiveCamera, Ray, Vector3 } from "three";
 import { Texture } from "three";
 
 import { showBalloonMessage } from "../engine/debug/index.js";
@@ -289,15 +289,18 @@ export class Camera extends Behaviour implements ICamera {
     public get backgroundColor(): RGBAColor | null {
         return this._backgroundColor ?? null;
     }
-    public set backgroundColor(val: RGBAColor | null) {
+    public set backgroundColor(val: RGBAColor | Color | null) {
         if (!val) return;
         if (!this._backgroundColor) {
-            if (!val.clone) return;
-            this._backgroundColor = val.clone();
+            this._backgroundColor = new RGBAColor(1, 1, 1, 1);
         }
-        else this._backgroundColor.copy(val);
+
+        this._backgroundColor.copy(val);
+
         // set background color to solid if provided color doesnt have any alpha channel
-        if (val.alpha === undefined) this._backgroundColor.alpha = 1;
+        if ((!("alpha" in val) || val.alpha === undefined)) {
+            this._backgroundColor.alpha = 1;
+        }
         this.applyClearFlagsIfIsActiveCamera();
     }
 

package/src/engine-components/CameraUtils.ts

@@ -1,15 +1,17 @@
-import { PerspectiveCamera } from "three";
+import { Color, PerspectiveCamera, PMREMGenerator } from "three";
 
 import { getCameraController } from "../engine/engine_camera.js";
 import { addNewComponent, getOrAddComponent } from "../engine/engine_components.js";
 import { Context } from "../engine/engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { NeedleEngineHTMLElement } from "../engine/engine_element.js";
+import { createFlatTexture, createTrilightTexture } from "../engine/engine_shaders.js";
 import type { ICamera, IContext } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
 import { RGBAColor } from "../engine/js-extensions/index.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { OrbitControls } from "./OrbitControls.js";
+import EnvironmentScene from "./utils/EnvironmentScene.js";
 
 const debug = getParam("debugmissingcamera");
 
@@ -30,27 +32,47 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
 
     const camInstance = new Camera();
     camInstance.sourceId = evt.files?.[0]?.src ?? "unknown"
+    camInstance.fieldOfView = 35;
 
+    const transparentAttribute = evt.context.domElement.getAttribute("transparent");
+    if (transparentAttribute != undefined) {
+        camInstance.clearFlags = ClearFlags.Uninitialized;
+    }
     // Set the clearFlags to a skybox if we have one OR if the user set a skybox image attribute
-    if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
+    else if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
         camInstance.clearFlags = ClearFlags.Skybox;
+        // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
+        // e.g. when we export a scene from blender without a camera in the scene
+        camInstance.backgroundBlurriness = .2; // same as in blender 0.5
     }
-    else
-        // TODO provide a nice default skybox
+    else {
         camInstance.clearFlags = ClearFlags.SolidColor;
-    camInstance.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
-    camInstance.fieldOfView = 35;
 
-    const transparentAttribute = evt.context.domElement.getAttribute("transparent");
-    if (transparentAttribute != undefined) {
-        camInstance.clearFlags = ClearFlags.Uninitialized;
+        let backgroundColor = "#efefef";
+        if(typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            backgroundColor = "#1f1f1f";
+        }
+        scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
+
+        // Generate a default environment map if none is set
+        if (!scene.environment) {
+            // const backgroundColorAttribute = evt.context.domElement.getAttribute("background-color") ?? "#fff";
+            // const backgroundColor = new Color(backgroundColorAttribute);
+            const pmremGenerator = new PMREMGenerator(evt.context.renderer);
+            const env = new EnvironmentScene("neutral");
+            // const background = scene.background;
+            // const col0 = new Color(.1, .1, .1);
+            // const col1 = new Color(.3, .3, .3);
+            // const col2 = new Color(1, 1, 1);
+            // const envmap = createTrilightTexture(col0, col1, col2, 32, 32);
+            // scene.background = envmap;
+            scene.environment = pmremGenerator.fromScene(env, .025).texture;
+            // scene.background = background;
+        }
     }
 
-    // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
-    // e.g. when we export a scene from blender without a camera in the scene
-    camInstance.backgroundBlurriness = .2; // same as in blender 0.5
-    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
 
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
     cameraObject.position.x = 0;
     cameraObject.position.y = 1;
     cameraObject.position.z = 2;

package/src/engine-components/Component.ts

@@ -1128,7 +1128,8 @@ export abstract class Component implements IComponent, EventTarget,
     }
 
     /**
-     * Gets the position of this component's GameObject in world space
+     * Gets the position of this component's GameObject in world space.    
+     * Note: This is equivalent to calling `this.gameObject.worldPosition`
      */
     get worldPosition(): Vector3 {
         return threeutils.getWorldPosition(this.gameObject);
@@ -1154,6 +1155,7 @@ export abstract class Component implements IComponent, EventTarget,
 
     /**
      * Gets the rotation of this component's GameObject in world space as a quaternion
+     * Note: This is equivalent to calling `this.gameObject.worldQuaternion`
      */
     get worldQuaternion(): Quaternion {
         return threeutils.getWorldQuaternion(this.gameObject);
@@ -1194,7 +1196,8 @@ export abstract class Component implements IComponent, EventTarget,
     }
 
     /**
-     * Gets the rotation of this component's GameObject in world space as Euler angles (in degrees)
+     * Gets the rotation of this component's GameObject in world space as Euler angles (in degrees)  
+     * Note: This is equivalent to calling `this.gameObject.worldRotation`
      */
     get worldRotation(): Vector3 {
         return this.gameObject.worldRotation;

package/src/engine-components/ContactShadows.ts

@@ -17,9 +17,15 @@ import { Behaviour, GameObject } from "./Component.js";
 const debug = getParam("debugcontactshadows");
 
 onStart(ctx => {
-    const val = ctx.domElement.getAttribute("contactshadows");
+    const val = ctx.domElement.getAttribute("contactshadows") || ctx.domElement.getAttribute("contact-shadows");
     if (val != undefined && val != "0" && val != "false") {
-        ContactShadows.auto(ctx);
+        console.debug("Auto-creating ContactShadows because of `contactshadows` attribute");
+        const shadows = ContactShadows.auto(ctx);
+        const intensity = parseFloat(val);
+        if (!isNaN(intensity)) {
+            shadows.opacity = intensity;
+            shadows.darkness = intensity;
+        }
     }
 })
 

package/src/engine-components/OrbitControls.ts

@@ -316,6 +316,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
                 if (DeviceUtilities.isMobileDevice()) this.doubleClickToFocus = true;
             }
             this._controls.addEventListener("start", this.onControlsChangeStarted);
+            this._controls.addEventListener("end", this.onControlsChangeEnded);
 
             if (!this._startedListeningToKeyEvents && this.enableKeys) {
                 this._startedListeningToKeyEvents = true;
@@ -346,6 +347,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this._controls.enabled = false;
             this._controls.autoRotate = false;
             this._controls.removeEventListener("start", this.onControlsChangeStarted);
+            this._controls.removeEventListener("end", this.onControlsChangeEnded);
             try {
                 this._controls.stopListenToKeyEvents();
             } catch { /** this fails if we never listened to key events... */ }
@@ -366,7 +368,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         this._activePointerEvents.push(_evt);
     }
     private _onPointerDownLate = (evt: NEPointerEvent) => {
-        if(evt.used && this._controls) {
+        if (evt.used && this._controls) {
             // Disabling orbit controls here because otherwise we get a slight movement when e.g. using DragControls
             this._controls.enabled = false;
         }
@@ -413,22 +415,45 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this.setTargetFromRaycast();
         }
         // Automatically update the camera focus
-        else if (!evt.used && this.autoTarget) {
-            const ray = new Ray(this._cameraObject?.worldPosition, this._cameraObject?.worldForward.multiplyScalar(-1));
-            const hits = this.context.physics.raycastFromRay(ray);
-            const hit = hits.length > 0 ? hits[0] : undefined;
-            if(hit && hit.distance > this.minZoom && hit.distance < this.maxZoom) {
-                if(debug) Gizmos.DrawWireSphere(hit.point, 0.1, 0xff0000, 2);
-                this._controls?.target.copy(hits[0].point);
-            }
-        }
+        // else if (!evt.used && this.autoTarget) {
+        //     this.updateTargetNow();
+        // }
     };
 
+    private updateTargetNow() {
+        const ray = new Ray(this._cameraObject?.worldPosition, this._cameraObject?.worldForward.multiplyScalar(-1));
+        const hits = this.context.physics.raycastFromRay(ray);
+        const hit = hits.length > 0 ? hits[0] : undefined;
+        if (hit && hit.distance > this.minZoom && hit.distance < this.maxZoom) {
+            if (debug) Gizmos.DrawWireSphere(hit.point, 0.1, 0xff0000, 2);
+            this._controls?.target.copy(hits[0].point);
+        }
+    }
+
+    private _orbitStartAngle: number = 0;
     private onControlsChangeStarted = () => {
+        if (this._controls) {
+            this._orbitStartAngle = this._controls.getAzimuthalAngle() + this._controls.getPolarAngle();
+        }
         if (this._syncedTransform) {
             this._syncedTransform.requestOwnership();
         }
     }
+    private onControlsChangeEnded = () => {
+
+        if (this._controls) {
+            if (this.autoTarget) {
+                const newAngle = this._controls.getAzimuthalAngle() + this._controls.getPolarAngle();
+                const delta = newAngle - this._orbitStartAngle;
+                if (Math.abs(delta) < .01) {
+                    if (debug) console.debug("OrbitControls: No movement detected, updating target now");
+                    this.updateTargetNow();
+                }
+                else if(debug) console.debug("OrbitControls: Movement detected", delta);
+            }
+        }
+
+    }
 
     private _shouldDisable: boolean = false;
     private afterHandleInput(evt: CustomEvent<AfterHandleInputEvent>) {

package/src/engine-components/SyncedTransform.ts

@@ -51,7 +51,7 @@ onUpdate((ctx) => {
     const threshold = isRunningOnGlitch ? 10 : 40;
     FAST_INTERVAL = Math.floor(FAST_ACTIVE_SYNCTRANSFORMS / threshold);
     FAST_ACTIVE_SYNCTRANSFORMS = 0;
-    if(debug && FAST_INTERVAL > 0) console.log("Sync Transform Fast Interval", FAST_INTERVAL);
+    if (debug && FAST_INTERVAL > 0) console.log("Sync Transform Fast Interval", FAST_INTERVAL);
 })
 
 /**
@@ -62,20 +62,20 @@ onUpdate((ctx) => {
  */
 export class SyncedTransform extends Behaviour {
 
-    
+
     // public autoOwnership: boolean = true;
     /** When true, overrides physics behavior when this object is owned by the local user */
     public overridePhysics: boolean = true
-    
+
     /** Whether to smoothly interpolate position changes when receiving updates */
     public interpolatePosition: boolean = true;
-    
+
     /** Whether to smoothly interpolate rotation changes when receiving updates */
     public interpolateRotation: boolean = true;
-    
+
     /** When true, sends updates at a higher frequency, useful for fast-moving objects */
     public fastMode: boolean = false;
-    
+
     /** When true, notifies other clients when this object is destroyed */
     public syncDestroy: boolean = false;
 
@@ -135,8 +135,9 @@ export class SyncedTransform extends Behaviour {
         this._targetRotation = new Quaternion();
 
         // sync instantiate issue was because they shared the same last pos vector!
-        this.lastWorldPos = new Vector3();
-        this.lastWorldRotation = new Quaternion();
+        this.lastPosition = new Vector3();
+        this.lastRotation = new Quaternion();
+        this.lastScale = new Vector3();
 
         this.rb = GameObject.getComponentInChildren(this.gameObject, Rigidbody);
         if (this.rb) {
@@ -207,6 +208,11 @@ export class SyncedTransform extends Behaviour {
                     if (!this.interpolateRotation || !this._receivedDataBefore)
                         setWorldEuler(this.gameObject, this.tempEuler);
                 }
+
+                const scale = transform.scale();
+                if (scale) {
+                    this.gameObject.scale.set(scale.x(), scale.y(), scale.z());
+                }
             }
             this._receivedDataBefore = true;
 
@@ -221,8 +227,9 @@ export class SyncedTransform extends Behaviour {
      * Initializes tracking of position and rotation when component is enabled
      */
     onEnable(): void {
-        this.lastWorldPos.copy(this.worldPosition);
-        this.lastWorldRotation.copy(this.worldQuaternion);
+        this.lastPosition.copy(this.worldPosition);
+        this.lastRotation.copy(this.worldQuaternion);
+        this.lastScale.copy(this.gameObject.scale);
         this._needsUpdate = true;
         // console.log("ENABLE", this.guid, this.gameObject.guid, this.lastWorldPos);
         if (this._model) {
@@ -241,8 +248,9 @@ export class SyncedTransform extends Behaviour {
 
 
     private receivedUpdate = false;
-    private lastWorldPos!: Vector3;
-    private lastWorldRotation!: Quaternion;
+    private lastPosition!: Vector3;
+    private lastRotation!: Quaternion;
+    private lastScale!: Vector3;
 
     /** 
      * @internal 
@@ -264,24 +272,27 @@ export class SyncedTransform extends Behaviour {
             this._model.requestOwnership();
         }
 
-        const wp = this.worldPosition;
-        const wr = this.worldQuaternion;
+        const pos = this.worldPosition;
+        const rot = this.worldQuaternion;
+        const scale = this.gameObject.scale;
         if (this._model.isOwned && !this.receivedUpdate) {
-            const worlddiff = wp.distanceTo(this.lastWorldPos);
-            const worldRot = wr.angleTo(this.lastWorldRotation);
             const threshold = this._model.hasOwnership || this.fastMode ? .0001 : .001;
-            if (worlddiff > threshold || worldRot > threshold) {
+            if (pos.distanceTo(this.lastPosition) > threshold ||
+                rot.angleTo(this.lastRotation) > threshold ||
+                scale.distanceTo(this.lastScale) > threshold) {
                 // console.log(worlddiff, worldRot);
                 if (!this._model.hasOwnership) {
 
                     if (debug)
-                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastWorldPos);
+                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastPosition);
 
-                    this.worldPosition = this.lastWorldPos;
-                    wp.copy(this.lastWorldPos);
+                    this.worldPosition = this.lastPosition;
+                    pos.copy(this.lastPosition);
 
-                    this.worldQuaternion = this.lastWorldRotation;
-                    wr.copy(this.lastWorldRotation);
+                    this.worldQuaternion = this.lastRotation;
+                    rot.copy(this.lastRotation);
+
+                    this.gameObject.scale.copy(this.lastScale);
 
                     InstancingUtil.markDirty(this.gameObject, true);
                     this._needsUpdate = false;
@@ -323,12 +334,13 @@ export class SyncedTransform extends Behaviour {
 
 
         this.receivedUpdate = false;
-        this.lastWorldPos.copy(wp);
-        this.lastWorldRotation.copy(wr);
+        this.lastPosition.copy(pos);
+        this.lastRotation.copy(rot);
+        this.lastScale.copy(scale);
 
 
         if (!this._model) return;
-        
+
         if (!this._model || this._model.hasOwnership === undefined || !this._model.hasOwnership) {
             // if we're not the owner of this synced transform then don't send any data
             return;

package/src/engine-components/utils/EnvironmentScene.ts

@@ -0,0 +1,246 @@
+// https://github.com/google/model-viewer/blob/c61dd1459b59cd74f539eb31658f943fd13c702e/packages/model-viewer/src/three-components/EnvironmentScene.ts#L198
+
+/* @license
+ * Copyright 2021 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {BackSide, BoxGeometry, Mesh, MeshBasicMaterial, MeshStandardMaterial, PointLight, Scene} from 'three';
+
+interface Box {
+  position: [number, number, number];
+  rotation: number;
+  scale: [number, number, number];
+}
+
+interface Light {
+  intensity: number;
+  position: [number, number, number];
+  scale: [number, number, number];
+}
+
+interface Env {
+  topLight: {
+    intensity: number,
+    position: [number, number, number],
+  };
+  room: {
+    position: [number, number, number],
+    scale: [number, number, number],
+  };
+  boxes: Box[];
+  lights: Light[];
+}
+
+const legacy = {
+  topLight: {
+    intensity: 500,
+    position: [0.418, 16.199, 0.300],
+  },
+  room: {
+    position: [-0.757, 13.219, 0.717],
+    scale: [31.713, 28.305, 28.591],
+  },
+  boxes: [
+    {
+      position: [-10.906, 2.009, 1.846],
+      rotation: -0.195,
+      scale: [2.328, 7.905, 4.651],
+    },
+    {
+      position: [-5.607, -0.754, -0.758],
+      rotation: 0.994,
+      scale: [1.970, 1.534, 3.955],
+    },
+    {
+      position: [6.167, 0.857, 7.803],
+      rotation: 0.561,
+      scale: [3.927, 6.285, 3.687],
+    },
+    {
+      position: [-2.017, 0.018, 6.124],
+      rotation: 0.333,
+      scale: [2.002, 4.566, 2.064],
+    },
+    {
+      position: [2.291, -0.756, -2.621],
+      rotation: -0.286,
+      scale: [1.546, 1.552, 1.496],
+    },
+    {
+      position: [-2.193, -0.369, -5.547],
+      rotation: 0.516,
+      scale: [3.875, 3.487, 2.986],
+    },
+  ],
+  lights: [
+    {
+      intensity: 50,
+      position: [-16.116, 14.37, 8.208],
+      scale: [0.1, 2.428, 2.739],
+    },
+    {
+      intensity: 50,
+      position: [-16.109, 18.021, -8.207],
+      scale: [0.1, 2.425, 2.751],
+    },
+    {
+      intensity: 17,
+      position: [14.904, 12.198, -1.832],
+      scale: [0.15, 4.265, 6.331],
+    },
+    {
+      intensity: 43,
+      position: [-0.462, 8.89, 14.520],
+      scale: [4.38, 5.441, 0.088],
+    },
+    {
+      intensity: 20,
+      position: [3.235, 11.486, -12.541],
+      scale: [2.5, 2.0, 0.1],
+    },
+    {
+      intensity: 100,
+      position: [0.0, 20.0, 0.0],
+      scale: [1.0, 0.1, 1.0],
+    },
+  ]
+} as Env;
+
+const neutral = {
+  topLight: {
+    intensity: 400,
+    position: [0.5, 14.0, 0.5],
+  },
+  room: {
+    position: [0.0, 13.2, 0.0],
+    scale: [31.5, 28.5, 31.5],
+  },
+  boxes: [
+    {
+      position: [-10.906, -1.0, 1.846],
+      rotation: -0.195,
+      scale: [2.328, 7.905, 4.651],
+    },
+    {
+      position: [-5.607, -0.754, -0.758],
+      rotation: 0.994,
+      scale: [1.970, 1.534, 3.955],
+    },
+    {
+      position: [6.167, -0.16, 7.803],
+      rotation: 0.561,
+      scale: [3.927, 6.285, 3.687],
+    },
+    {
+      position: [-2.017, 0.018, 6.124],
+      rotation: 0.333,
+      scale: [2.002, 4.566, 2.064],
+    },
+    {
+      position: [2.291, -0.756, -2.621],
+      rotation: -0.286,
+      scale: [1.546, 1.552, 1.496],
+    },
+    {
+      position: [-2.193, -0.369, -5.547],
+      rotation: 0.516,
+      scale: [3.875, 3.487, 2.986],
+    },
+  ],
+  lights: [
+    {
+      intensity: 80,
+      position: [-14.0, 10.0, 8.0],
+      scale: [0.1, 2.5, 2.5],
+    },
+    {
+      intensity: 80,
+      position: [-14.0, 14.0, -4.0],
+      scale: [0.1, 2.5, 2.5],
+    },
+    {
+      intensity: 23,
+      position: [14.0, 12.0, 0.0],
+      scale: [0.1, 5.0, 5.0],
+    },
+    {
+      intensity: 16,
+      position: [0.0, 9.0, 14.0],
+      scale: [5.0, 5.0, 0.1],
+    },
+    {
+      intensity: 80,
+      position: [7.0, 8.0, -14.0],
+      scale: [2.5, 2.5, 0.1],
+    },
+    {
+      intensity: 80,
+      position: [-7.0, 16.0, -14.0],
+      scale: [2.5, 2.5, 0.1],
+    },
+    {
+      intensity: 1,
+      position: [0.0, 20.0, 0.0],
+      scale: [0.1, 0.1, 0.1],
+    },
+  ]
+} as Env;
+
+export default class EnvironmentScene extends Scene {
+  constructor(name: 'legacy'|'neutral') {
+    super();
+
+    this.position.y = -3.5;
+
+    const geometry = new BoxGeometry();
+    geometry.deleteAttribute('uv');
+
+    const roomMaterial =
+        new MeshStandardMaterial({metalness: 0, side: BackSide});
+    const boxMaterial = new MeshStandardMaterial({metalness: 0});
+
+    const data = name == 'legacy' ? legacy : neutral;
+
+    const mainLight = new PointLight(0xffffff, data.topLight.intensity, 28, 2);
+    mainLight.position.set(...data.topLight.position);
+    this.add(mainLight);
+
+    const room = new Mesh(geometry, roomMaterial);
+    room.position.set(...data.room.position);
+    room.scale.set(...data.room.scale);
+    this.add(room);
+
+    for (const box of data.boxes) {
+      const box1 = new Mesh(geometry, boxMaterial);
+      box1.position.set(...box.position);
+      box1.rotation.set(0, box.rotation, 0);
+      box1.scale.set(...box.scale);
+      this.add(box1);
+    }
+
+    for (const light of data.lights) {
+      const light1 =
+          new Mesh(geometry, this.createAreaLightMaterial(light.intensity));
+      light1.position.set(...light.position);
+      light1.scale.set(...light.scale);
+      this.add(light1);
+    }
+  }
+
+  createAreaLightMaterial(intensity: number): MeshBasicMaterial {
+    const material = new MeshBasicMaterial();
+    material.color.setScalar(intensity);
+    return material;
+  }
+}