CubeTextureNode: Support CubeRefractionMapping. (#1102)

* CubeTextureNode: Support CubeRefractionMapping. * Update three.js * Add examples * Update patch and delete examples
three-types · Jul 21, 2024 · 287ee05 · 287ee05
1 parent 571c4bc
commit 287ee05
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -13821,6 +13821,48 @@ index 04023326..05ee79b0 100644
 
  init();
 
+diff --git a/examples-testing/examples/webgpu_materials_basic.ts b/examples-testing/examples/webgpu_materials_basic.ts
+index 0161a9c7..590f668d 100644
+--- a/examples-testing/examples/webgpu_materials_basic.ts
++++ b/examples-testing/examples/webgpu_materials_basic.ts
+@@ -1,10 +1,10 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let camera, scene, renderer;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGPURenderer;
+
+-const spheres = [];
++const spheres: THREE.Mesh[] = [];
+
+ let mouseX = 0;
+ let mouseY = 0;
+@@ -12,7 +12,13 @@ let mouseY = 0;
+ let windowHalfX = window.innerWidth / 2;
+ let windowHalfY = window.innerHeight / 2;
+
+-const params = {
++const params: {
++    color: string;
++    mapping: THREE.CubeTextureMapping;
++    refractionRatio: number;
++    transparent: boolean;
++    opacity: number;
++} = {
+     color: '#ffffff',
+     mapping: THREE.CubeReflectionMapping,
+     refractionRatio: 0.98,
+@@ -111,7 +117,7 @@ function onWindowResize() {
+     renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+-function onDocumentMouseMove(event) {
++function onDocumentMouseMove(event: MouseEvent) {
+     mouseX = (event.clientX - windowHalfX) / 100;
+     mouseY = (event.clientY - windowHalfY) / 100;
+ }
 diff --git a/examples-testing/examples/webgpu_materials_displacementmap.ts b/examples-testing/examples/webgpu_materials_displacementmap.ts
 index 54d26d65..824c087a 100644
 --- a/examples-testing/examples/webgpu_materials_displacementmap.ts

diff --git a/three.js b/three.js
diff --git a/types/three/src/nodes/accessors/MaterialNode.d.ts b/types/three/src/nodes/accessors/MaterialNode.d.ts
@@ -40,7 +40,8 @@ export type MaterialNodeScope =
     | typeof MaterialNode.POINT_WIDTH
     | typeof MaterialNode.DISPERSION
     | typeof MaterialNode.LIGHT_MAP
-    | typeof MaterialNode.AO_MAP;
+    | typeof MaterialNode.AO_MAP
+    | typeof MaterialNode.REFRACTION_RATIO;
 
 export default class MaterialNode extends Node {
     static ALPHA_TEST: "alphaTest";
@@ -80,6 +81,7 @@ export default class MaterialNode extends Node {
     static DISPERSION: "dispersion";
     static LIGHT_MAP: "light";
     static AO_MAP: "ao";
+    static REFRACTION_RATIO: "refractionRatio";
 
     scope: MaterialNodeScope;
     constructor(scope?: MaterialNodeScope);
@@ -124,4 +126,5 @@ export const materialPointWidth: ShaderNodeObject<MaterialNode>;
 export const materialDispersion: ShaderNodeObject<MaterialNode>;
 export const materialLightMap: ShaderNodeObject<MaterialNode>;
 export const materialAOMap: ShaderNodeObject<MaterialNode>;
+export const materialRefractionRatio: ShaderNodeObject<MaterialNode>;
 export const materialAnisotropyVector: ShaderNodeObject<UniformNode<Vector2>>;
diff --git a/types/three/src/nodes/accessors/ReflectVectorNode.d.ts b/types/three/src/nodes/accessors/ReflectVectorNode.d.ts
@@ -3,4 +3,7 @@ import VarNode from "../core/VarNode.js";
 import { ShaderNodeObject } from "../shadernode/ShaderNode.js";
 
 export const reflectView: ShaderNodeObject<Node>;
+export const refractView: ShaderNodeObject<Node>;
+
 export const reflectVector: ShaderNodeObject<VarNode>;
+export const refractVector: ShaderNodeObject<VarNode>;