Merge pull request #32 from schm00g/3-perf-lighthouse-three-imports

three imports lighthouse perf fixes

src/scripts/webgl/TCanvas.ts

@@ -1,35 +1,35 @@
-import * as THREE from 'three'
-import { gl } from './core/WebGL'
-import { Assets, loadAssets } from './utils/assetLoader'
-import { controls } from './utils/OrbitControls'
+import * as THREE from "three";
+import { gl } from "./core/WebGL";
+import { Assets, loadAssets } from "./utils/assetLoader";
+import { controls } from "./utils/OrbitControls";
 // import vertexShader from './shader/vs.glsl'
 // import fragmentShader from './shader/fs.glsl'
-import { calcCoveredTextureScale } from './utils/coveredTexture'
+import { calcCoveredTextureScale } from "./utils/coveredTexture";
 
 export class TCanvas {
   private assets: Assets = {
-    image: { path: 'images/unsplash.jpg' },
-  }
+    image: { path: "images/unsplash.jpg" },
+  };
 
   constructor(private container: HTMLElement) {
     loadAssets(this.assets).then(() => {
-      this.init()
-      this.createObjects()
-      gl.requestAnimationFrame(this.anime)
-    })
+      this.init();
+      this.createObjects();
+      gl.requestAnimationFrame(this.anime);
+    });
   }
 
   private init() {
-    gl.setup(this.container)
-    gl.scene.background = new THREE.Color("rgb(0, 0, 0)")
-    gl.camera.position.z = 1.5
+    gl.setup(this.container);
+    gl.scene.background = new THREE.Color("rgb(0, 0, 0)");
+    gl.camera.position.z = 1.5;
   }
 
   private createObjects() {
-    const texture = this.assets.image.data as THREE.Texture
-    const scale = calcCoveredTextureScale(texture, 1 / 1)
+    const texture = this.assets.image.data as THREE.Texture;
+    const scale = calcCoveredTextureScale(texture, 1 / 1);
 
-    const geometry = new THREE.PlaneGeometry(1, 1)
+    const geometry = new THREE.PlaneGeometry(1, 1);
     const material = new THREE.ShaderMaterial({
       uniforms: {
         tImage: { value: texture },
@@ -38,18 +38,18 @@ export class TCanvas {
       // vertexShader,
       // fragmentShader,
       side: THREE.DoubleSide,
-    })
-    const mesh = new THREE.Mesh(geometry, material)
+    });
+    const mesh = new THREE.Mesh(geometry, material);
 
-    gl.scene.add(mesh)
+    gl.scene.add(mesh);
   }
 
   private anime = () => {
-    controls.update()
-    gl.render()
-  }
+    controls.update();
+    gl.render();
+  };
 
   dispose() {
-    gl.dispose()
+    gl.dispose();
   }
 }

src/scripts/webgl/core/WebGL.ts

@@ -1,19 +1,33 @@
-import * as THREE from "three";
+import {
+  WebGLRenderer,
+  Scene,
+  PerspectiveCamera,
+  Clock,
+  Color,
+  Mesh,
+  PlaneGeometry,
+  MeshBasicMaterial,
+  PointLight,
+  SphereGeometry,
+  MeshPhongMaterial,
+  Material,
+  BufferGeometry,
+} from "three";
 import Stats from "three/examples/jsm/libs/stats.module";
 import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
 import { AsciiEffect } from "three/examples/jsm/effects/AsciiEffect";
 
 class WebGL {
-  public renderer: THREE.WebGLRenderer;
-  public scene: THREE.Scene;
-  public camera: THREE.PerspectiveCamera;
+  public renderer: WebGLRenderer;
+  public scene: Scene;
+  public camera: PerspectiveCamera;
   public time = { delta: 0, elapsed: 0 };
   public start: number = Date.now();
   public effect: any;
   public sphere: any;
   public controls: any;
 
-  private clock = new THREE.Clock();
+  private clock = new Clock();
   private resizeCallback?: () => void;
   private stats?: Stats;
 
@@ -27,38 +41,38 @@ class WebGL {
 
     window.addEventListener("resize", this.onWindowResize);
 
-    this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
+    this.camera = new PerspectiveCamera(70, width / height, 1, 1000);
     this.camera.position.y = 150 + 300;
     this.camera.position.z = 500 + 300;
 
-    this.scene = new THREE.Scene();
-    this.scene.background = new THREE.Color(0, 0, 0);
+    this.scene = new Scene();
+    this.scene.background = new Color(0, 0, 0);
 
-    const pointLight1 = new THREE.PointLight(0xffffff, 3, 0, 0);
+    const pointLight1 = new PointLight(0xffffff, 3, 0, 0);
     pointLight1.position.set(500, 500, 500);
     this.scene.add(pointLight1);
 
-    const pointLight2 = new THREE.PointLight(0xffffff, 1, 0, 0);
+    const pointLight2 = new PointLight(0xffffff, 1, 0, 0);
     pointLight2.position.set(-500, -500, -500);
     this.scene.add(pointLight2);
 
-    this.sphere = new THREE.Mesh(
-      new THREE.SphereGeometry(200, 20, 10),
-      new THREE.MeshPhongMaterial({ flatShading: true })
+    this.sphere = new Mesh(
+      new SphereGeometry(200, 20, 10),
+      new MeshPhongMaterial({ flatShading: true })
     );
     this.scene.add(this.sphere);
 
     // Plane
 
-    const plane = new THREE.Mesh(
-      new THREE.PlaneGeometry(400, 400),
-      new THREE.MeshBasicMaterial({ color: 0xe0e0e0 })
+    const plane = new Mesh(
+      new PlaneGeometry(400, 400),
+      new MeshBasicMaterial({ color: 0xe0e0e0 })
     );
     plane.position.y = -200;
     plane.rotation.x = -Math.PI / 2;
     this.scene.add(plane);
 
-    this.renderer = new THREE.WebGLRenderer();
+    this.renderer = new WebGLRenderer();
     this.renderer.setSize(width, height);
 
     this.effect = new AsciiEffect(this.renderer, " .:-+*=%@#", {
@@ -106,11 +120,8 @@ class WebGL {
     this.resizeCallback = callback;
   }
 
-  getMesh<T extends THREE.Material>(name: string) {
-    return this.scene.getObjectByName(name) as THREE.Mesh<
-      THREE.BufferGeometry,
-      T
-    >;
+  getMesh<T extends Material>(name: string) {
+    return this.scene.getObjectByName(name) as Mesh<BufferGeometry, T>;
   }
 
   render() {
@@ -123,8 +134,8 @@ class WebGL {
     // this.controls.update();
 
     this.scene.background = document.documentElement.classList.contains("dark")
-      ? new THREE.Color("black")
-      : new THREE.Color("white");
+      ? new Color("black")
+      : new Color("white");
 
     this.effect.render(this.scene, this.camera);
   }

yarn.lock

@@ -1333,15 +1333,10 @@ camelcase@^6.2.0:
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001449:
-  version "1.0.30001476"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001476.tgz"
-  integrity sha512-JmpktFppVSvyUN4gsLS0bShY2L9ZUslHLE72vgemBkS43JD2fOvKTKs+GtRwuxrtRGnwJFW0ye7kWRRlLJS9vQ==
-
-caniuse-lite@^1.0.30001464:
-  version "1.0.30001477"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001477.tgz"
-  integrity sha512-lZim4iUHhGcy5p+Ri/G7m84hJwncj+Kz7S5aD4hoQfslKZJgt0tHc/hafVbqHC5bbhHb+mrW2JOUHkI5KH7toQ==
+caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
+  version "1.0.30001565"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz"
+  integrity sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==
 
 ccount@^2.0.0:
   version "2.0.1"