Examples: add reflection mask in retargeting_readyplayer (#29485)

mrdoob · Sep 24, 2024 · 9df48f2 · 9df48f2
1 parent 8f765f9
commit 9df48f2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/examples/screenshots/webgpu_animation_retargeting_readyplayer.jpg b/examples/screenshots/webgpu_animation_retargeting_readyplayer.jpg
diff --git a/examples/webgpu_animation_retargeting_readyplayer.html b/examples/webgpu_animation_retargeting_readyplayer.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { screenUV, color, vec2, reflector } from 'three/tsl';
+			import { screenUV, color, vec2, vec4, reflector, positionWorld } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -119,8 +119,10 @@
 			reflection.target.rotateX( - Math.PI / 2 );
 			scene.add( reflection.target );
 
+			const reflectionMask = positionWorld.xz.distance( 0 ).mul( .1 ).clamp().oneMinus();
+
 			const floorMaterial = new THREE.NodeMaterial();
-			floorMaterial.colorNode = reflection;
+			floorMaterial.colorNode = vec4( reflection.rgb, reflectionMask );
 			floorMaterial.opacity = .2;
 			floorMaterial.transparent = true;