Improved webvr_sculpt example.

examples/webvr_sculpt.html

@@ -18,23 +18,21 @@
 		<script type="module">
 			import {
 				BoxBufferGeometry,
+				CylinderBufferGeometry,
 				Color,
 				DirectionalLight,
 				GridHelper,
 				HemisphereLight,
 				IcosahedronBufferGeometry,
 				Mesh,
-				MeshBasicMaterial,
 				MeshStandardMaterial,
 				PerspectiveCamera,
 				PlaneBufferGeometry,
 				Scene,
-				TextureLoader,
 				Vector3,
 				WebGLRenderer
 			} from "../build/three.module.js";
 
-			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
 
 			var container;
@@ -57,7 +55,7 @@
 				scene = new Scene();
 				scene.background = new Color( 0x222222 );
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.02, 50 );
 
 				var geometry = new BoxBufferGeometry( 0.5, 0.8, 0.5 );
 				var material = new MeshStandardMaterial( {
@@ -68,8 +66,6 @@
 				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 );
@@ -80,27 +76,18 @@
 				} );
 				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 );
-
 				scene.add( light );
 
-				// scene.add( new DirectionalLightHelper( light ) );
-				// scene.add( new CameraHelper( light.shadow.camera ) );
-
 				//
 
 				renderer = new WebGLRenderer( { antialias: true } );
@@ -108,7 +95,6 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				renderer.shadowMap.enabled = true;
 				renderer.vr.enabled = true;
 				container.appendChild( renderer.domElement );
 
@@ -140,35 +126,20 @@
 				controller2.userData.id = 1;
 				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 Mesh( new BoxBufferGeometry( 0.01, 0.01, 0.01 ) );
-					var pivot = new Mesh( new IcosahedronBufferGeometry( 0.002, 2 ), blob.material );
-					pivot.name = 'pivot';
-					pivot.position.y = - 0.016;
-					pivot.position.z = - 0.043;
-					pivot.rotation.x = Math.PI / 5.5;
-					controller.add( pivot );
-
-					var range = new Mesh( new IcosahedronBufferGeometry( 0.03, 3 ), new MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
-					pivot.add( range );
+				//
 
-					controller1.add( controller.clone() );
-					controller2.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 );
 
-				} );
+				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() );
 
 				//
 
@@ -194,7 +165,8 @@
 					color: 0xffffff,
 					// envMap: reflectionCube,
 					roughness: 0.9,
-					metalness: 0.0
+					metalness: 0.0,
+					transparent: true
 				} );
 
 				blob = new MarchingCubes( 64, material );