Merge pull request #179 from Benjythebee/upgrade/three-version

Working!!, great job! :)
M3-org · Oct 30, 2024 · 44673e0 · 44673e0
2 parents 96f9d4f + 6172409
commit 44673e0
Show file tree

Hide file tree

Showing 9 changed files with 6,123 additions and 20,994 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@ethersproject/providers": "^5.5.1",
-    "@pixiv/three-vrm": "^3.1.1",
+    "@pixiv/three-vrm": "^3.1.4",
     "@react-spring/three": "^9.2.4",
     "@use-gesture/react": "^10.0.0-beta.22",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
@@ -33,20 +33,19 @@
     "i18next-browser-languagedetector": "^7.0.1",
     "jszip": "^3.10.1",
     "ktx2-encoder": "^0.0.6",
-    "postprocessing": "^6.29.1",
+    "postprocessing": "^6.36.3",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
     "react-i18next": "^12.1.5",
-    "react-scripts": "^5.0.0",
     "sepia-speechrecognition-polyfill": "^1.0.0",
     "short-uuid": "^4.2.0",
     "squaresplit": "^1.0.2",
     "styled-components": "^5.3.1",
-    "three": "^0.149.0",
-    "three-mesh-bvh": "^0.5.21",
+    "three": "^0.169.0",
+    "three-mesh-bvh": "^0.8.2",
     "use-sound": "^4.0.1",
     "vite-plugin-mkcert": "^1.10.1",
     "vite-react-jsx": "1.1.2",

diff --git a/src/library/ar.js b/src/library/ar.js
@@ -135,7 +135,7 @@ const customThreejsPipelineModule = () => {
     })
     renderer.autoClear = false
     renderer.setSize(canvasWidth, canvasHeight)
-    renderer.outputEncoding = window.THREE.sRGBEncoding
+    renderer.outputColorSpace = window.THREE.SRGBColorSpace
 
     scene3 = {scene, camera, renderer}
     engaged = true

diff --git a/src/library/characterManager.js b/src/library/characterManager.js
@@ -1449,7 +1449,7 @@ class TraitLoadingManager{
                           new Promise((resolve) => {
                               this.textureLoader.load(textureDir, (txt) => {
                                   txt.flipY = false;
-                                  txt.encoding = THREE.sRGBEncoding;
+                                  txt.colorSpace = THREE.SRGBColorSpace;
                                   resolve(txt);
                               },null,(err)=>{
                                 console.error("error loading texture: ", err)

diff --git a/src/library/merge-geometry.js b/src/library/merge-geometry.js
@@ -862,7 +862,7 @@ function mergeSourceAttributes({ sourceAttributes }) {
     });
     const destAttributes = {};
     Array.from(propertyNames.keys()).map((name) => {
-        destAttributes[name] = BufferGeometryUtils.mergeBufferAttributes(allSourceAttributes.map((sourceAttributes) => sourceAttributes[name]).flat().filter((attr) => attr !== undefined));
+        destAttributes[name] = BufferGeometryUtils.mergeAttributes(allSourceAttributes.map((sourceAttributes) => sourceAttributes[name]).flat().filter((attr) => attr !== undefined));
     });
     return destAttributes;
 }
@@ -937,7 +937,7 @@ function mergeSourceMorphAttributes({ meshes, sourceMorphTargetDictionaries, sou
     propertyNames.forEach((propName) => {
         merged[propName] = [];
         for (let i =0; i < Object.entries(destMorphTargetDictionary).length ; i++){
-            merged[propName][i] = BufferGeometryUtils.mergeBufferAttributes(unmerged[propName][i]);
+            merged[propName][i] = BufferGeometryUtils.mergeAttributes(unmerged[propName][i]);
             const buffArr = merged[propName][i].array;
             for (let j = 0; j < buffArr.length; j+=3){
                 buffArr[j] *= scale;

diff --git a/src/library/sceneInitializer.js b/src/library/sceneInitializer.js
@@ -1,14 +1,13 @@
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { CharacterManager } from "./characterManager";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
 
 export function sceneInitializer(canvasId) {
     const scene = new THREE.Scene()
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    const ambientLight = new THREE.AmbientLight(0xffffff, 2);
     scene.add(ambientLight);
 
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
     // rotate the directional light to be a key light
     directionalLight.position.set(0, 1, 1);
     scene.add(directionalLight);
@@ -58,7 +57,7 @@ export function sceneInitializer(canvasId) {
     window.addEventListener("resize", handleResize);
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setPixelRatio(window.devicePixelRatio);
-    renderer.outputEncoding = THREE.sRGBEncoding;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
 
     const animate = () => {
         requestAnimationFrame(animate);

diff --git a/src/library/screenshotManager.js b/src/library/screenshotManager.js
@@ -23,7 +23,7 @@ class PixelRenderer{
 
     const screenshotResolution = new THREE.Vector2(screenshotSize,screenshotSize);
     pixelRenderer.setClearColor( 0x000000, 0);
-    pixelRenderer.outputEncoding = THREE.LinearEncoding;
+    pixelRenderer.outputColorSpace = THREE.LinearSRGBColorSpace;
     pixelRenderer.setSize(screenshotResolution.x, screenshotResolution.y);
     pixelRenderer.setPixelRatio(window.devicePixelRatio);
     //pixelRenderer.shadowMap.enabled = true
@@ -81,7 +81,7 @@ export class ScreenshotManager {
     this.renderer.premultipliedAlpha = false;
     this.scene = scene;
     this.characterManager = characterManager;
-    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
 
     this.renderer.setSize(screenshotSize, screenshotSize);
 

diff --git a/src/library/textureImageDataRenderer.js b/src/library/textureImageDataRenderer.js
@@ -60,13 +60,7 @@ export default class TextureImageDataRenderer {
     }
 
     this.rtTexture = new THREE.WebGLRenderTarget(width, height)
-    if('encoding' in this.rtTexture.texture){
-        // for THREE version < 0.151
-        this.rtTexture.texture.encoding = sRGBEncoding ? THREE.sRGBEncoding : THREE.NoColorSpace;
-    }else if ('colorSpace' in this.rtTexture.texture) {
-        // for THREE version > 0.151
-        this.rtTexture.texture.colorSpace = sRGBEncoding ? THREE.SRGBColorSpace : THREE.NoColorSpace;
-    }
+    this.rtTexture.texture.colorSpace = sRGBEncoding ? THREE.SRGBColorSpace : THREE.NoColorSpace;
 
     if(this.material){
       this.material.map = texture

diff --git a/src/library/utils.js b/src/library/utils.js
@@ -33,7 +33,7 @@ export async function setTextureToChildMeshes(scene, url){
 
   // Load the image as a texture
   const texture = await textureLoader.load(url);
-  texture.encoding = THREE.sRGBEncoding;
+  texture.colorSpace = THREE.SRGBColorSpace;
   texture.flipY = false;
 
   // Traverse through the child meshes in the scene