WebGLRenderer: Add support for rotating env maps. (#838)

* WebGLRenderer: Add support for rotating env maps.

* Format

types/three/src/materials/MeshBasicMaterial.d.ts

@@ -1,7 +1,9 @@
 import { Combine } from "../constants.js";
 import { Color, ColorRepresentation } from "../math/Color.js";
+import { Euler } from "../math/Euler.js";
 import { Texture } from "../textures/Texture.js";
 import { Material, MaterialParameters } from "./Material.js";
+
 /**
  * parameters is an object with one or more properties defining the material's appearance.
  */
@@ -17,6 +19,7 @@ export interface MeshBasicMaterialParameters extends MaterialParameters {
     alphaMap?: Texture | null | undefined;
     fog?: boolean | undefined;
     envMap?: Texture | null | undefined;
+    envMapRotation?: Euler | undefined;
     combine?: Combine | undefined;
     reflectivity?: number | undefined;
     refractionRatio?: number | undefined;
@@ -86,6 +89,11 @@ export class MeshBasicMaterial extends Material {
      */
     envMap: Texture | null;
 
+    /**
+     * The rotation of the environment map in radians. Default is `(0,0,0)`.
+     */
+    envMapRotation: Euler;
+
     /**
      * @default THREE.MultiplyOperation
      */

types/three/src/materials/MeshLambertMaterial.d.ts

@@ -1,5 +1,6 @@
 import { Combine, NormalMapTypes } from "../constants.js";
 import { Color, ColorRepresentation } from "../math/Color.js";
+import { Euler } from "../math/Euler.js";
 import { Vector2 } from "../math/Vector2.js";
 import { Texture } from "../textures/Texture.js";
 import { Material, MaterialParameters } from "./Material.js";
@@ -25,6 +26,7 @@ export interface MeshLambertMaterialParameters extends MaterialParameters {
     specularMap?: Texture | null | undefined;
     alphaMap?: Texture | null | undefined;
     envMap?: Texture | null | undefined;
+    envMapRotation?: Euler | undefined;
     combine?: Combine | undefined;
     reflectivity?: number | undefined;
     refractionRatio?: number | undefined;
@@ -152,6 +154,11 @@ export class MeshLambertMaterial extends Material {
      */
     envMap: Texture | null;
 
+    /**
+     * The rotation of the environment map in radians. Default is `(0,0,0)`.
+     */
+    envMapRotation: Euler;
+
     /**
      * @default THREE.MultiplyOperation
      */

types/three/src/materials/MeshPhongMaterial.d.ts

@@ -1,5 +1,6 @@
 import { Combine, NormalMapTypes } from "../constants.js";
 import { Color, ColorRepresentation } from "../math/Color.js";
+import { Euler } from "../math/Euler.js";
 import { Vector2 } from "../math/Vector2.js";
 import { Texture } from "../textures/Texture.js";
 import { Material, MaterialParameters } from "./Material.js";
@@ -29,6 +30,7 @@ export interface MeshPhongMaterialParameters extends MaterialParameters {
     specularMap?: Texture | null | undefined;
     alphaMap?: Texture | null | undefined;
     envMap?: Texture | null | undefined;
+    envMapRotation?: Euler | undefined;
     combine?: Combine | undefined;
     reflectivity?: number | undefined;
     refractionRatio?: number | undefined;
@@ -165,6 +167,11 @@ export class MeshPhongMaterial extends Material {
      */
     envMap: Texture | null;
 
+    /**
+     * The rotation of the environment map in radians. Default is `(0,0,0)`.
+     */
+    envMapRotation: Euler;
+
     /**
      * @default THREE.MultiplyOperation
      */

types/three/src/materials/MeshStandardMaterial.d.ts

@@ -1,5 +1,6 @@
 import { NormalMapTypes } from "../constants.js";
 import { Color, ColorRepresentation } from "../math/Color.js";
+import { Euler } from "../math/Euler.js";
 import { Vector2 } from "../math/Vector2.js";
 import { Texture } from "../textures/Texture.js";
 import { Material, MaterialParameters } from "./Material.js";
@@ -28,6 +29,7 @@ export interface MeshStandardMaterialParameters extends MaterialParameters {
     metalnessMap?: Texture | null | undefined;
     alphaMap?: Texture | null | undefined;
     envMap?: Texture | null | undefined;
+    envMapRotation?: Euler | undefined;
     envMapIntensity?: number | undefined;
     wireframe?: boolean | undefined;
     wireframeLinewidth?: number | undefined;
@@ -170,6 +172,11 @@ export class MeshStandardMaterial extends Material {
      */
     envMap: Texture | null;
 
+    /**
+     * The rotation of the environment map in radians. Default is `(0,0,0)`.
+     */
+    envMapRotation: Euler;
+
     /**
      * @default 1
      */

types/three/src/renderers/shaders/UniformsLib.d.ts

@@ -23,6 +23,7 @@ export const UniformsLib: {
     };
     envmap: {
         envMap: IUniform<unknown>;
+        envMapRotation: IUniform<Matrix3>;
         flipEnvMap: IUniform<number>;
         reflectivity: IUniform<number>;
         ior: IUniform<number>;

types/three/src/scenes/Scene.d.ts

@@ -1,6 +1,7 @@
 import { Object3D } from "../core/Object3D.js";
 import { Material } from "../materials/Material.js";
 import { Color } from "../math/Color.js";
+import { Euler } from "../math/Euler.js";
 import { CubeTexture } from "../textures/CubeTexture.js";
 import { Texture } from "../textures/Texture.js";
 import { FogBase } from "./Fog.js";
@@ -68,13 +69,25 @@ export class Scene extends Object3D {
      */
     background: Color | Texture | CubeTexture | null;
 
+    /**
+     * The rotation of the background in radians. Only influences environment maps assigned to {@link .background}.
+     * Default is `(0,0,0)`.
+     */
+    backgroundRotation: Euler;
+
     /**
      * Sets the environment map for all physical materials in the scene.
      * However, it's not possible to overwrite an existing texture assigned to {@link THREE.MeshStandardMaterial.envMap | MeshStandardMaterial.envMap}.
      * @defaultValue `null`
      */
     environment: Texture | null;
 
+    /**
+     * The rotation of the environment map in radians. Only influences physical materials in the scene when
+     * {@link .environment} is used. Default is `(0,0,0)`.
+     */
+    environmentRotation: Euler;
+
     /**
      * Convert the {@link Scene} to three.js {@link https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 | JSON Object/Scene format}.
      * @param meta Object containing metadata such as textures or images for the scene.