WebXR: Improved dragging, paint and sculpt examples.

examples/webxr_xr_dragging.html

@@ -62,15 +62,12 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( {
-					color: 0xeeeeee,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
+				const floorGeometry = new THREE.PlaneGeometry( 6, 6 );
+				const floorMaterial = new THREE.ShadowMaterial( { opacity: 0.25 } );
 				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
+				floor.renderOrder = 2;
 				scene.add( floor );
 
 				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
@@ -78,10 +75,10 @@
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );
 				light.castShadow = true;
-				light.shadow.camera.top = 2;
-				light.shadow.camera.bottom = - 2;
-				light.shadow.camera.right = 2;
-				light.shadow.camera.left = - 2;
+				light.shadow.camera.top = 3;
+				light.shadow.camera.bottom = - 3;
+				light.shadow.camera.right = 3;
+				light.shadow.camera.left = - 3;
 				light.shadow.mapSize.set( 4096, 4096 );
 				scene.add( light );
 

examples/webxr_xr_paint.html

@@ -57,29 +57,7 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				const tableGeometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
-				const tableMaterial = new THREE.MeshStandardMaterial( {
-					color: 0x444444,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
-				const table = new THREE.Mesh( tableGeometry, tableMaterial );
-				table.position.y = 0.35;
-				table.position.z = 0.85;
-				scene.add( table );
-
-				const floorGometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( {
-					color: 0x222222,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
-				const floor = new THREE.Mesh( floorGometry, floorMaterial );
-				floor.rotation.x = - Math.PI / 2;
-				scene.add( floor );
-
-				const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
-				// grid.material.depthTest = false; // avoid z-fighting
+				const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
 				scene.add( grid );
 
 				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
@@ -153,18 +131,15 @@
 
 				//
 
-				const geometry = new THREE.CylinderGeometry( 0.01, 0.02, 0.08, 5 );
-				geometry.rotateX( - Math.PI / 2 );
-				const material = new THREE.MeshStandardMaterial( { flatShading: true } );
-				const mesh = new THREE.Mesh( geometry, material );
-
 				const pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 3 ) );
 				pivot.name = 'pivot';
 				pivot.position.z = - 0.05;
-				mesh.add( pivot );
 
-				controller1.add( mesh.clone() );
-				controller2.add( mesh.clone() );
+				const group = new THREE.Group();
+				group.add( pivot );
+
+				controller1.add( group.clone() );
+				controller2.add( group.clone() );
 
 				//
 

examples/webxr_xr_sculpt.html

@@ -59,29 +59,7 @@
 				controls.target.set( 0, 1.6, 0 );
 				controls.update();
 
-				const tableGeometry = new THREE.BoxGeometry( 0.5, 0.8, 0.5 );
-				const tableMaterial = new THREE.MeshStandardMaterial( {
-					color: 0x444444,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
-				const table = new THREE.Mesh( tableGeometry, tableMaterial );
-				table.position.y = 0.35;
-				table.position.z = 0.85;
-				scene.add( table );
-
-				const floorGometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( {
-					color: 0x222222,
-					roughness: 1.0,
-					metalness: 0.0
-				} );
-				const floor = new THREE.Mesh( floorGometry, floorMaterial );
-				floor.rotation.x = - Math.PI / 2;
-				scene.add( floor );
-
-				const grid = new THREE.GridHelper( 10, 20, 0x111111, 0x111111 );
-				// grid.material.depthTest = false; // avoid z-fighting
+				const grid = new THREE.GridHelper( 4, 1, 0x111111, 0x111111 );
 				scene.add( grid );
 
 				scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );
@@ -129,18 +107,15 @@
 
 				//
 
-				const geometry = new THREE.CylinderGeometry( 0.01, 0.02, 0.08, 5 );
-				geometry.rotateX( - Math.PI / 2 );
-				const material = new THREE.MeshStandardMaterial( { flatShading: true } );
-				const mesh = new THREE.Mesh( geometry, material );
-
 				const pivot = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.01, 3 ) );
 				pivot.name = 'pivot';
 				pivot.position.z = - 0.05;
-				mesh.add( pivot );
 
-				controller1.add( mesh.clone() );
-				controller2.add( mesh.clone() );
+				const group = new THREE.Group();
+				group.add( pivot );
+
+				controller1.add( group.clone() );
+				controller2.add( group.clone() );
 
 				//