Update threejs to 0.160.0 (njibhu#218)

* Update threejs to 0.160.0

* DataTexture fixes

* Remove deprecated attribute

* Fmt

Author: njibhu

explorer/src/renderer.js

@@ -13,7 +13,7 @@ class AppRenderer {
     // Defaults
     this.fog = 25000;
     this.movementSpeed = 10000;
-    this.lightIntensity = 0.5;
+    this.lightIntensity = 1.25;
     this.loadedMapID = undefined;
     this.controllerType = "fly";
 

library/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "t3d-parser": "*",
-    "three": "0.125.0",
+    "three": "0.160.0",
     "vblob": "1.0.2",
     "web-worker": "1.0.0"
   },
@@ -22,6 +22,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@types/three": "0.160.0",
     "@typescript-eslint/eslint-plugin": "8.5.0",
     "@typescript-eslint/parser": "8.5.0",
     "rollup": "4.21.3",

library/src/dataRenderer/HavokRenderer.ts

@@ -48,7 +48,7 @@ export default class HavokRenderer extends DataRenderer {
   renderModels(models: any, title: any, callback: Function): void {
     let mat;
     if (this.settings && this.settings.visible) {
-      mat = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
+      mat = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide, flatShading: true });
     } else if (this.settings && this.settings.export) {
       mat = new THREE.MeshBasicMaterial({ visible: true });
     } else {

library/src/dataRenderer/TerrainRenderer.ts

@@ -7,7 +7,7 @@ import { FileParser } from "t3d-parser";
 import type LocalReader from "../LocalReader/LocalReader";
 import type Logger from "../Logger";
 import type { Material } from "three";
-import { SceneUtils } from "three/examples/jsm/utils/SceneUtils";
+import { createMultiMaterialObject } from "three/examples/jsm/utils/SceneUtils.js";
 
 /**
  *
@@ -219,25 +219,22 @@ export default class TerrainRenderer extends DataRenderer {
       const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
 
       /// TODO: READ FROM VO, don't default to hard coded scale
-      uniforms.uvScale = { type: "v2", value: new THREE.Vector2(8.0, 8.0) };
+      uniforms.uvScale = { value: new THREE.Vector2(8.0, 8.0) };
       uniforms.offset = {
-        type: "v2",
         value: new THREE.Vector2(pageOffetX, pageOffetY),
       };
 
       uniforms.texturePicker = {
-        type: "t",
         value: chunkTextures[pageTexName],
       };
       uniforms.texturePicker2 = {
-        type: "t",
         value: chunkTextures[pageTexName2],
       };
 
-      uniforms.texture1 = { type: "t", value: chunkTextures[fileNames[0]] };
-      uniforms.texture2 = { type: "t", value: chunkTextures[fileNames[1]] };
-      uniforms.texture3 = { type: "t", value: chunkTextures[fileNames[2]] };
-      uniforms.texture4 = { type: "t", value: chunkTextures[fileNames[3]] };
+      uniforms.texture1 = { value: chunkTextures[fileNames[0]] };
+      uniforms.texture2 = { value: chunkTextures[fileNames[1]] };
+      uniforms.texture3 = { value: chunkTextures[fileNames[2]] };
+      uniforms.texture4 = { value: chunkTextures[fileNames[3]] };
 
       if (self.settings && self.settings.export) {
         mat = new THREE.MeshBasicMaterial({ visible: true });
@@ -253,7 +250,7 @@ export default class TerrainRenderer extends DataRenderer {
       allMats.push(mat);
 
       /// -1 for faces -> vertices , -2 for ignoring outer faces
-      const chunkGeo = new THREE.PlaneBufferGeometry(cdx, cdy, chunkW - 3, chunkW - 3);
+      const chunkGeo = new THREE.PlaneGeometry(cdx, cdy, chunkW - 3, chunkW - 3);
 
       let cn = 0;
 
@@ -277,16 +274,14 @@ export default class TerrainRenderer extends DataRenderer {
       mS.elements[5] = -1;
       chunkGeo.applyMatrix4(mS);
 
-      /// Compute face normals for lighting, not used when textured
-      //@ts-ignore
-      chunkGeo.computeFaceNormals();
+      /// Compute normals for lighting
       chunkGeo.computeVertexNormals();
 
       /// Build chunk mesh!
       let chunk;
       chunk = new THREE.Mesh(chunkGeo, customMaterial);
       if (Array.isArray(mat)) {
-        chunk = SceneUtils.createMultiMaterialObject(chunkGeo as any, mat);
+        chunk = createMultiMaterialObject(chunkGeo as any, mat);
       } else {
         chunk = new THREE.Mesh(chunkGeo, mat);
       }

library/src/util/MaterialUtils.ts

@@ -18,7 +18,7 @@ import type {
   Material,
   Texture,
   MeshPhongMaterial,
-  MeshBasicMaterial,
+  MeshStandardMaterial,
 } from "three";
 import type { FileParser } from "t3d-parser";
 import type LocalReader from "../LocalReader/LocalReader";
@@ -85,7 +85,9 @@ export function generateDataTexture(width: number, height: number, color: Color)
     data[stride + 3] = a;
   }
   // used the buffer to create a DataTexture
-  return new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
+  const texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
+  texture.needsUpdate = true;
+  return texture;
 }
 
 /**
@@ -323,7 +325,10 @@ export function getMaterial(
     });
   } /// End if material and texture
 
-  let finalMaterial: (MeshPhongMaterial | MeshBasicMaterial) & { textureFilename?: number; normalMap?: Texture | null };
+  let finalMaterial: (MeshPhongMaterial | MeshStandardMaterial) & {
+    textureFilename?: number;
+    normalMap?: Texture | null;
+  };
 
   /// Create custom shader material if there are textures
   if (finalTextures) {
@@ -365,7 +370,7 @@ export function getMaterial(
 
   /// Fallback material is monocolored red
   else {
-    finalMaterial = new THREE.MeshBasicMaterial({
+    finalMaterial = new THREE.MeshStandardMaterial({
       side: THREE.FrontSide,
       color: 0xff0000,
       flatShading: true,
@@ -453,7 +458,7 @@ export function getMaterial(
     if (!(grChunk.data.flags & lightMask)) {
       // debugger;
       // console.log("no light");
-      finalMaterial = new THREE.MeshBasicMaterial({
+      finalMaterial = new THREE.MeshStandardMaterial({
         side: THREE.FrontSide,
         map: finalMaterial.map,
       });
@@ -612,8 +617,8 @@ export function loadLocalTexture(
       /// Use RGBA for all textures for now...
       /// TODO: don't use alpha for some formats!
       texture.format =
-        //eslint-disable-next-line no-constant-condition
-        dxtType === 3 || dxtType === 5 || true ? THREE.RGBAFormat : THREE.RGBFormat;
+        //dxtType === 3 || dxtType === 5 ? THREE.RGBAFormat : THREE.RGBFormat;
+        THREE.RGBAFormat;
 
       /// Update texture with the loaded image.
       //@ts-ignore

package-lock.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "jquery": "3.5.0",
-    "three": "0.125.0",
+    "three": "0.160.0",
     "w2ui": "1.4.3"
   }
 }