better camera collision

yomotsu · Aug 30, 2020 · 7c14d3f · 7c14d3f
1 parent a8ff4b0
commit 7c14d3f
Show file tree

Hide file tree

Showing 10 changed files with 1,217 additions and 2,306 deletions.
diff --git a/example/3_cameraControl.html b/example/3_cameraControl.html
@@ -26,8 +26,6 @@
 
 MW.install( THREE );
 
-const DEG360 = Math.PI * 2;
-
 const world = new MW.World();
 const min = new THREE.Vector3( - 15, - 15, - 15 );
 const max = new THREE.Vector3(  15,  15,  15 );
@@ -41,7 +39,7 @@
 const clock = new THREE.Clock();
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
-camera.position.set( 0, 5, 30 );
+camera.position.set( 0, 0, 6 );
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize( width, height );
 document.body.appendChild( renderer.domElement );
@@ -80,18 +78,12 @@
 
 const keyInputControl = new MW.KeyInputControl();
 
-const tpsCameraControl = new MW.TPSCameraControl(
+const tpsCameraControls = new MW.TPSCameraControls(
 	camera, // three.js camera
 	playerObjectHolder, // tracking object
-	{
-		el: renderer.domElement,
-		offset: new THREE.Vector3( 0, 1.8, 0 ), // eye height
-		// radius: 1, // default distance of the character to the camera
-		// minRadius: 1,
-		// maxRadius: 80,
-		rigidObjects: [ ground, wall ],
-	}
+	renderer.domElement
 );
+tpsCameraControls.colliderMeshes = [ ground, wall ];
 
 
 // bind events
@@ -102,18 +94,18 @@
 // synk with keybord input and camera control input
 keyInputControl.addEventListener( 'movekeychange', () => {
 
-	const cameraFrontAngle    = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle    = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
-// the 'updated' event is fired by `tpsCameraControl.update()`
-tpsCameraControl.addEventListener( 'updated', () => {
+// the 'updated' event is fired by `tpsCameraControls.update()`
+tpsCameraControls.addEventListener( 'update', () => {
 
-	const cameraFrontAngle    = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle    = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
@@ -124,7 +116,7 @@
 
 	requestAnimationFrame( update );
 	world.step( Math.min( delta, 0.02 ) );
-	tpsCameraControl.update();
+	tpsCameraControls.update( delta );
 	renderer.render( scene, camera );
 
 } )();

diff --git a/example/4_objects.html b/example/4_objects.html
@@ -32,8 +32,6 @@
 
 MW.install( THREE );
 
-const DEG360 = Math.PI * 2;
-
 const world = new MW.World();
 const min = new THREE.Vector3( - 50, - 50, - 50 );
 const max = new THREE.Vector3(  50,  50,  50 );
@@ -47,7 +45,7 @@
 const clock = new THREE.Clock();
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
-camera.position.set( 0, 5, 30 );
+camera.position.set( 0, 0, 6 );
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize( width, height );
 document.body.appendChild( renderer.domElement );
@@ -164,19 +162,12 @@
 
 const keyInputControl = new MW.KeyInputControl();
 
-const tpsCameraControl = new MW.TPSCameraControl(
+const tpsCameraControls = new MW.TPSCameraControls(
 	camera, // three.js camera
 	playerObjectHolder, // tracking object
-	{
-		el: renderer.domElement,
-		offset: new THREE.Vector3( 0, 1.8, 0 ), // eye height
-		// radius: 1, // default distance of the character to the camera
-		// minRadius: 1,
-		// maxRadius: 80,
-		rigidObjects: [ ground, object1, object2, object3, object4, object5 ],
-	}
+	renderer.domElement
 );
-
+tpsCameraControls.colliderMeshes = [ ground, object1, object2, object3, object4, object5 ];
 
 // bind events
 keyInputControl.addEventListener( 'movekeyon',    () => playerController.isRunning = true );
@@ -186,18 +177,18 @@
 // synk with keybord input and camera control input
 keyInputControl.addEventListener( 'movekeychange', () => {
 
-	const cameraFrontAngle = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
-// the 'updated' event is fired by `tpsCameraControl.update()`
-tpsCameraControl.addEventListener( 'updated', () => {
+// the 'updated' event is fired by `tpsCameraControls.update()`
+tpsCameraControls.addEventListener( 'update', () => {
 
-	const cameraFrontAngle = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
@@ -208,7 +199,7 @@
 
 	requestAnimationFrame( update );
 	world.step( Math.min( delta, 0.02 ) );
-	tpsCameraControl.update();
+	tpsCameraControls.update( delta );
 	renderer.render( scene, camera );
 
 } )();

diff --git a/example/5_terrain.html b/example/5_terrain.html
@@ -27,8 +27,6 @@
 
 MW.install( THREE );
 
-const DEG360 = Math.PI * 2;
-
 const world = new MW.World();
 const min = new THREE.Vector3( - 15, - 15, - 15 );
 const max = new THREE.Vector3(  15,  15,  15 );
@@ -42,7 +40,7 @@
 const clock = new THREE.Clock();
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
-camera.position.set( 0, 5, 30 );
+camera.position.set( 0, 0, 6 );
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize( width, height );
 document.body.appendChild( renderer.domElement );
@@ -64,17 +62,10 @@
 
 const keyInputControl = new MW.KeyInputControl();
 
-const tpsCameraControl = new MW.TPSCameraControl(
+const tpsCameraControls = new MW.TPSCameraControls(
 	camera, // three.js camera
 	playerObjectHolder, // tracking object
-	{
-		el: renderer.domElement,
-		offset: new THREE.Vector3( 0, 1.8, 0 ), // eye height
-		// radius: 1, // default distance of the character to the camera
-		// minRadius: 1,
-		// maxRadius: 80,
-		rigidObjects: [],
-	}
+	renderer.domElement
 );
 
 
@@ -86,18 +77,18 @@
 // synk with keybord input and camera control input
 keyInputControl.addEventListener( 'movekeychange', () => {
 
-	const cameraFrontAngle = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
-// 'updated' event is fired by `tpsCameraControl.update()`
-tpsCameraControl.addEventListener( 'updated', () => {
+// 'updated' event is fired by `tpsCameraControls.update()`
+tpsCameraControls.addEventListener( 'update', () => {
 
-	const cameraFrontAngle = tpsCameraControl.getFrontAngle();
+	const cameraFrontAngle = tpsCameraControls.frontAngle;
 	const characterFrontAngle = keyInputControl.frontAngle;
-	playerController.direction = DEG360 - cameraFrontAngle + characterFrontAngle;
+	playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
@@ -126,7 +117,7 @@
 	terrainHelper.scale.copy( terrain.scale );
 	scene.add( terrainHelper );
 	region.importThreeMesh( terrain );
-	tpsCameraControl.rigidObjects.push( terrain );
+	tpsCameraControls.colliderMeshes.push( terrain );
 
 
 	( function update () {
@@ -135,7 +126,7 @@
 
 		requestAnimationFrame( update );
 		world.step( Math.min( delta, 0.02 ) );
-		tpsCameraControl.update();
+		tpsCameraControls.update( delta );
 		renderer.render( scene, camera );
 
 	} )();

diff --git a/example/7_allTogether.html b/example/7_allTogether.html
@@ -48,7 +48,7 @@
 var world, min, max, partition, region,
     playerRadius = 1, playerObjectHolder, playerController;
 var keyInputControl;
-var tpsCameraControl;
+var tpsCameraControls;
 var animationController;
 var eventDispatcher = new THREE.EventDispatcher();
 
@@ -65,7 +65,7 @@
 clock = new THREE.Clock();
 scene = new THREE.Scene();
 camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
-camera.position.set( 0, 5, 30 );
+camera.position.set( 0, 0, 6 );
 renderer = new THREE.WebGLRenderer();
 renderer.setSize( width, height );
 document.body.appendChild( renderer.domElement );
@@ -88,17 +88,10 @@
 
 keyInputControl = new MW.KeyInputControl();
 
-tpsCameraControl = new MW.TPSCameraControl(
+tpsCameraControls = new MW.TPSCameraControls(
   camera, // three.js camera
   playerObjectHolder, // tracking object
-  {
-    el: renderer.domElement,
-    offset: new THREE.Vector3( 0, 1.8, 0 ), // eye height
-    // radius: 1, // default distance of the character to the camera
-    // minRadius: 1,
-    // maxRadius: 80,
-    rigidObjects: []
-  }
+  renderer.domElement
 );
 
 
@@ -110,18 +103,18 @@
 // synk with keybord input and camera control input
 keyInputControl.addEventListener( 'movekeychange',  function () {
 
-  var cameraFrontAngle = tpsCameraControl.getFrontAngle();
+  var cameraFrontAngle = tpsCameraControls.frontAngle;
   var characterFrontAngle = keyInputControl.frontAngle;
-  playerController.direction = THREE.Math.degToRad( 360 ) - cameraFrontAngle + characterFrontAngle;
+  playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
-// 'updated' event is fired by `tpsCameraControl.update()`
-tpsCameraControl.addEventListener( 'updated', function () {
+// 'updated' event is fired by `tpsCameraControls.update()`
+tpsCameraControls.addEventListener( 'update', function () {
 
-  var cameraFrontAngle = tpsCameraControl.getFrontAngle();
+  var cameraFrontAngle = tpsCameraControls.frontAngle;
   var characterFrontAngle = keyInputControl.frontAngle;
-  playerController.direction = THREE.Math.degToRad( 360 ) - cameraFrontAngle + characterFrontAngle;
+  playerController.direction = cameraFrontAngle + characterFrontAngle;
 
 } );
 
@@ -151,7 +144,7 @@
   terrainMesh.scale.set( 2, 2, 2 );
   scene.add( terrainMesh );
   region.importThreeMesh( terrainMesh );
-  tpsCameraControl.rigidObjects.push( terrainMesh );
+  tpsCameraControls.colliderMeshes.push( terrainMesh );
 
 
   characterData.materials.forEach( function ( material ) {
@@ -180,7 +173,7 @@
   playerController.addEventListener( 'startSliding', function () { animationController.play( 'slide' ); } );
   playerController.addEventListener( 'startFalling', function () { animationController.play( 'slide' ); } );
 
-  vent.addEventListener( 'beforerender', function () {
+  eventDispatcher.addEventListener( 'beforerender', function () {
 
     animationController.mesh.position.set(
       playerController.center.x,
@@ -198,10 +191,10 @@
     const delta = clock.getDelta();
 
     requestAnimationFrame( update );
-    eventDispatcher.dispatchEvent( { type: 'beforerender' } );
     world.step( Math.min( delta, 0.02 ) );
-    tpsCameraControl.update();
+    tpsCameraControls.update( delta );
     animationController.update( delta );
+    eventDispatcher.dispatchEvent( { type: 'beforerender' } );
     renderer.render( scene, camera );
 
   } )();