Update colorSpace

yandeu · yandeu · commit 82e7c9556427 · 2025-05-07T17:09:27.000+02:00
diff --git a/src/examples/car-using-physics-constraints.html b/src/examples/car-using-physics-constraints.html
@@ -95,6 +95,7 @@
           this.warpSpeed('-ground')
 
           const grass = await this.load.texture('grass')
+          grass.colorSpace = THREE.SRGBColorSpace
           grass.wrapS = grass.wrapT = 1000 // RepeatWrapping
           grass.offset.set(0, 0)
           grass.repeat.set(50, 50)
diff --git a/src/examples/create-3d-geometry-from-png-file.html b/src/examples/create-3d-geometry-from-png-file.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -42,6 +42,7 @@
 
           // load grass texture
           const grass = await this.third.load.texture('/assets/img/grass.jpg')
+          grass.colorSpace = THREE.SRGBColorSpace
           grass.wrapS = THREE.RepeatWrapping
           grass.wrapT = THREE.RepeatWrapping
           grass.repeat.set(4, 4)
diff --git a/src/examples/first-phaser-game-3d-version.html b/src/examples/first-phaser-game-3d-version.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -47,7 +47,10 @@
           this.third.physics.debug.enable()
 
           // add background image
-          this.third.load.texture('sky').then(sky => (this.third.scene.background = sky))
+          this.third.load.texture('sky').then(sky => {
+            sky.colorSpace = THREE.SRGBColorSpace
+            this.third.scene.background = sky
+          })
 
           // add score text
           this.scoreText = this.add.text(32, this.cameras.main.height - 32, 'score: 0', {
diff --git a/src/examples/load-and-use-textures.html b/src/examples/load-and-use-textures.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -17,7 +17,7 @@
   <body>
     <div id="info-text">(scene restarts every 5 seconds)</div>
     <script>
-      const { enable3d, Scene3D, Canvas } = ENABLE3D
+      const { enable3d, Scene3D, Canvas, THREE } = ENABLE3D
 
       class MainScene extends Scene3D {
         constructor() {
@@ -42,6 +42,7 @@
           // get the texture and add the ground
 
           this.third.load.texture('grass').then(grass => {
+            grass.colorSpace = THREE.SRGBColorSpace
             grass.wrapS = grass.wrapT = 1000 // RepeatWrapping
             grass.offset.set(0, 0)
             grass.repeat.set(2, 2)
diff --git a/src/examples/phaser-gltf-loader-with-animation-speed.html b/src/examples/phaser-gltf-loader-with-animation-speed.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -17,7 +17,7 @@
   <body>
     <div id="info-text">Loads the drone and play all of its animation at the same time.</div>
     <script>
-      const { enable3d, Scene3D, Canvas, ExtendedObject3D, LinearEncoding } = ENABLE3D
+      const { enable3d, Scene3D, Canvas, ExtendedObject3D, THREE } = ENABLE3D
 
       class MainScene extends Scene3D {
         constructor() {
@@ -66,7 +66,7 @@
               child.material.metalness = 0
               child.material.roughness = 1
 
-              if (child.material.map) child.material.map.encoding = LinearEncoding
+              if (child.material.map) child.material.map.colorSpace = THREE.SRGBColorSpace
             })
 
             drone.scale.set(0.05, 0.05, 0.05)
diff --git a/src/examples/project-options-and-multiple-scenes.html b/src/examples/project-options-and-multiple-scenes.html
@@ -61,6 +61,7 @@
 
           // add grass
           const grass = await this.load.texture('grass')
+          grass.colorSpace = THREE.SRGBColorSpace
           grass.wrapS = grass.wrapT = 1000 // RepeatWrapping
           grass.offset.set(0, 0)
           grass.repeat.set(2, 2)
@@ -72,12 +73,14 @@
           robot.name = 'robot'
           robot.add(gltf.scene.children[0])
           robot.traverse(child => {
-            if (child.isMesh) child.castShadow = child.receiveShadow = true
+            if (child instanceof THREE.Mesh) {
+              child.castShadow = child.receiveShadow = true
+            }
           })
           robot.position.set(0, 5, 0)
           robot.scale.set(0.5, 0.5, 0.5)
           this.add.existing(robot)
-          this.physics.add.existing(robot, { shape: 'box', offset: { y: -0.5 } })
+          this.physics.add.existing(robot, { shape: 'box', offset: { y: -0.3 } })
 
           // load the next level after 3 seconds
           setTimeout(() => {
diff --git a/src/examples/raycast-vehicle.html b/src/examples/raycast-vehicle.html
@@ -192,16 +192,17 @@
           // this.physics.debug?.enable()
 
           const grass = await this.load.texture('/assets/img/grass.jpg')
+          grass.colorSpace = THREE.SRGBColorSpace
           const grassGround = grass.clone()
           grassGround.needsUpdate = true
           grassGround.wrapS = grassGround.wrapT = 1000 // RepeatWrapping
           grassGround.offset.set(0, 0)
           grassGround.repeat.set(10, 10)
 
-          this.physics.add.ground({ y: -1, width: 100, height: 100 }, { lambert: { map: grassGround } })
+          this.physics.add.ground({ y: -1, width: 120, height: 120 }, { lambert: { map: grassGround } })
 
-          const ramp = this.add.box({ width: 5, height: 10, z: -20 }, { lambert: { map: grass } })
-          ramp.rotateX(-Math.PI / 3)
+          const ramp = this.add.box({ width: 8, height: 10, z: 20 })
+          ramp.rotateX(Math.PI / 3)
           this.physics.add.existing(ramp, { collisionFlags: 1, mass: 0 })
 
           const gltf = await this.load.gltf('/assets/glb/car.glb')
diff --git a/src/examples/standalone/texture-cube.html b/src/examples/standalone/texture-cube.html
@@ -30,16 +30,16 @@
 
           // create the texture cube
           const leftRight = await this.load.texture('side')
-          leftRight.encoding = THREE.sRGBEncoding
+          leftRight.colorSpace = THREE.SRGBColorSpace
           leftRight.needUpdate = true
           // if we clone a texture, we have to manually set needsUpdate to true
           const backFront = leftRight.clone()
           backFront.needsUpdate = true
           const top = await this.load.texture('top')
-          top.encoding = THREE.sRGBEncoding
+          top.colorSpace = THREE.SRGBColorSpace
           top.needUpdate = true
           const bottom = await this.load.texture('bottom')
-          bottom.encoding = THREE.sRGBEncoding
+          bottom.colorSpace = THREE.SRGBColorSpace
           bottom.needUpdate = true
 
           const textureCube = this.misc.textureCube([leftRight, leftRight, top, bottom, backFront, backFront])
diff --git a/src/examples/switch-camera-between-2d-and-3d.html b/src/examples/switch-camera-between-2d-and-3d.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -101,7 +101,7 @@
 
           // add background image
           this.third.load.texture('sky').then(sky => {
-            sky.encoding = THREE.sRGBEncoding
+            sky.colorSpace = THREE.SRGBColorSpace
             sky.needUpdate = true
             this.third.scene.background = sky
           })
diff --git a/src/examples/texture-on-a-plane.html b/src/examples/texture-on-a-plane.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -28,6 +28,7 @@
           this.physics.debug.enable()
 
           const texture = await this.load.texture('grass')
+          texture.colorSpace = THREE.SRGBColorSpace
           texture.wrapS = THREE.RepeatWrapping
           texture.wrapT = THREE.RepeatWrapping
           texture.repeat.set(2, 2)
