Examples: Improved webvr_paint.

Author: mrdoob

examples/webvr_paint.html

@@ -21,8 +21,8 @@
 				BufferAttribute,
 				BufferGeometry,
 				Color,
+				CylinderBufferGeometry,
 				DirectionalLight,
-				DoubleSide,
 				GridHelper,
 				HemisphereLight,
 				IcosahedronBufferGeometry,
@@ -32,14 +32,11 @@
 				PerspectiveCamera,
 				PlaneBufferGeometry,
 				Scene,
-				TextureLoader,
 				VertexColors,
 				Vector3,
 				WebGLRenderer
 			} from "../build/three.module.js";
 
-			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
-
 			var container;
 			var camera, scene, renderer;
 			var controller1, controller2;
@@ -77,18 +74,7 @@
 				var table = new Mesh( geometry, material );
 				table.position.y = 0.35;
 				table.position.z = 0.85;
-				table.castShadow = true;
-				table.receiveShadow = true;
-				scene.add( table );
-
-				/*
-				var table = new Mesh( geometry, material );
-				table.position.y = 0.35;
-				table.position.z = -0.85;
-				table.castShadow = true;
-				table.receiveShadow = true;
 				scene.add( table );
-				*/
 
 				var geometry = new PlaneBufferGeometry( 4, 4 );
 				var material = new MeshStandardMaterial( {
@@ -98,34 +84,25 @@
 				} );
 				var floor = new Mesh( geometry, material );
 				floor.rotation.x = - Math.PI / 2;
-				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new GridHelper( 20, 40, 0x111111, 0x111111 ) );
+				var grid = new GridHelper( 10, 20, 0x111111, 0x111111 );
+				grid.material.depthTest = false; // avoid z-fighting
+				scene.add( grid );
 
 				scene.add( new HemisphereLight( 0x888877, 0x777788 ) );
 
-				var light = new 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.mapSize.set( 4096, 4096 );
+				var light = new DirectionalLight( 0xffffff, 0.5 );
+				light.position.set( 0, 4, 0 );
 				scene.add( light );
 
-				// scene.add( new DirectionalLightHelper( light ) );
-				// scene.add( new CameraHelper( light.shadow.camera ) );
-
 				//
 
 				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				renderer.shadowMap.enabled = true;
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -159,34 +136,20 @@
 				controller2.userData.matrices = [ new Matrix4(), new Matrix4() ];
 				scene.add( controller2 );
 
-				var loader = new OBJLoader();
-				loader.setPath( 'models/obj/vive-controller/' );
-				loader.load( 'vr_controller_vive_1_5.obj', function ( object ) {
-
-					var loader = new TextureLoader();
-					loader.setPath( 'models/obj/vive-controller/' );
-
-					var controller = object.children[ 0 ];
-					controller.material.map = loader.load( 'onepointfive_texture.png' );
-					controller.material.specularMap = loader.load( 'onepointfive_spec.png' );
-					controller.castShadow = true;
-					controller.receiveShadow = true;
-
-					// var pivot = new Group();
-					// var pivot = new Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
-					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) );
-					pivot.name = 'pivot';
-					pivot.position.y = - 0.016;
-					pivot.position.z = - 0.043;
-					pivot.rotation.x = Math.PI / 5.5;
-					controller.add( pivot );
+				//
 
-					controller1.add( controller.clone() );
+				var geometry = new CylinderBufferGeometry( 0.01, 0.02, 0.08, 5 );
+				geometry.rotateX( - Math.PI / 2 );
+				var material = new MeshStandardMaterial( { flatShading: true } );
+				var mesh = new Mesh( geometry, material );
 
-					pivot.material = pivot.material.clone();
-					controller2.add( controller.clone() );
+				var pivot = new Mesh( new IcosahedronBufferGeometry( 0.01, 2 ) );
+				pivot.name = 'pivot';
+				pivot.position.z = - 0.05;
+				mesh.add( pivot );
 
-				} );
+				controller1.add( mesh.clone() );
+				controller2.add( mesh.clone() );
 
 				//
 
@@ -212,32 +175,14 @@
 
 				geometry.drawRange.count = 0;
 
-				//
-
-				/*
-				var path = "textures/cube/SwedishRoyalCastle/";
-				var format = '.jpg';
-				var urls = [
-					path + 'px' + format, path + 'nx' + format,
-					path + 'py' + format, path + 'ny' + format,
-					path + 'pz' + format, path + 'nz' + format
-				];
-
-				var reflectionCube = new CubeTextureLoader().load( urls );
-				*/
-
 				var material = new MeshStandardMaterial( {
 					roughness: 0.9,
 					metalness: 0.0,
-					// envMap: reflectionCube,
-					vertexColors: VertexColors,
-					side: DoubleSide
+					vertexColors: VertexColors
 				} );
 
 				line = new Mesh( geometry, material );
 				line.frustumCulled = false;
-				line.castShadow = true;
-				line.receiveShadow = true;
 				scene.add( line );
 
 				// Shapes