WebXR: Renamed and improved haptics example.

mrdoob · Apr 12, 2023 · 443cb7d · 443cb7d
1 parent fa0cafc
commit 443cb7d
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 15 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -366,7 +366,6 @@
 		"webxr_vr_handinput_pointerclick",
 		"webxr_vr_handinput_pointerdrag",
 		"webxr_vr_handinput_pressbutton",
-		"webxr_vr_haptics",
 		"webxr_vr_layers",
 		"webxr_vr_panorama",
 		"webxr_vr_panorama_depth",
@@ -377,6 +376,7 @@
 		"webxr_xr_ballshooter",
 		"webxr_xr_cubes",
 		"webxr_xr_dragging",
+		"webxr_xr_haptics",
 		"webxr_xr_paint",
 		"webxr_xr_sculpt"
 	],

diff --git a/examples/screenshots/webxr_vr_haptics.jpg b/examples/screenshots/webxr_vr_haptics.jpg
diff --git a/examples/screenshots/webxr_xr_haptics.jpg b/examples/screenshots/webxr_xr_haptics.jpg
diff --git a/examples/webxr_vr_haptics.html → examples/webxr_xr_haptics.html b/examples/webxr_vr_haptics.html → examples/webxr_xr_haptics.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - haptics</title>
+		<title>three.js xr - haptics</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> vr - haptics
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> xr - haptics
 		</div>
 
 		<!-- Import maps polyfill -->
@@ -29,7 +29,7 @@
 
 			import * as THREE from 'three';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
 			let container;
@@ -90,11 +90,7 @@
 				controls.update();
 
 				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( {
-					color: 0xeeeeee,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
+				const floorMaterial = new THREE.ShadowMaterial( { opacity: 0.25 } );
 				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
@@ -153,13 +149,9 @@
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
-
-				document.getElementById( 'VRButton' ).addEventListener( 'click', () => {
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
-					initAudio();
-
-				} );
+				document.getElementById( 'XRButton' ).addEventListener( 'click', initAudio );
 
 				// controllers