Merge remote-tracking branch 'zz85/master' into dev

examples/webgl_camera.html

@@ -224,7 +224,7 @@
 					cameraPerspective.far = mesh.position.length();
 					cameraPerspective.updateProjectionMatrix();
 
-					cameraPerspectiveHelper.update( cameraPerspective );
+					cameraPerspectiveHelper.update();
 					cameraPerspectiveHelper.lines.visible = true;
 
 					cameraOrthoHelper.lines.visible = false;
@@ -234,7 +234,7 @@
 					cameraOrtho.far = mesh.position.length();
 					cameraOrtho.updateProjectionMatrix();
 
-					cameraOrthoHelper.update( cameraOrtho );
+					cameraOrthoHelper.update();
 					cameraOrthoHelper.lines.visible = true;
 
 					cameraPerspectiveHelper.lines.visible = false;

examples/webgl_geometry_extrude_splines.html

@@ -19,6 +19,7 @@
     <script src="../build/Three.js"></script>
     <script src="../src/extras/core/Curve.js"></script>
     <script src="../src/extras/geometries/TubeGeometry.js"></script>
+    <script src="../src/extras/helpers/CameraHelper.js"></script>
     <script src="js/Stats.js"></script>
 
 
@@ -348,7 +349,7 @@
 
     var container, stats;
 
-    var camera, scene, renderer;
+    var camera, scene, renderer, splineCamera, cameraHelper, cameraPos;
 
     var text, plane;
 
@@ -412,7 +413,7 @@
     var debug = true;
     var parent;
     var tube, tubeMesh;
-    var animation = false;
+    var animation = false, lookAhead = false;
     var scale;
 
     function addTube() {
@@ -471,6 +472,7 @@
 
     function animateCamera() {
       animation = document.getElementById('animation').checked;
+      lookAhead = document.getElementById('lookAhead').checked;
     }
 
 
@@ -495,19 +497,24 @@
       info.innerHTML += '<br/>Extrusion Segments: <select onchange="addTube()" id="segments"><option>50</option><option selected>100</option><option>200</option><option>400</option></select>';
       info.innerHTML += '<br/>Debug: <input id="debug" type="checkbox" onchange="addTube()" checked /> Closed:<input id="closed" onchange="addTube()" type="checkbox" checked />';
 
-      info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option></select>';
+      info.innerHTML += '<br/>Radius Segments: <select id="radiusSegments" onchange="addTube()"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option><option>6</option><option>8</option><option>12</option></select>';
 
-      info.innerHTML += '<br/>Camera Spline Animation: <input id="animation" type="checkbox" onchange="animateCamera()" />';
+      info.innerHTML += '<br/>Camera Spline Animation: <input id="animation" type="checkbox" onchange="animateCamera()" /> Look Ahead <input id="lookAhead" type="checkbox" onchange="animateCamera()" />'; //checkbox button
 
       container.appendChild(info);
 
       scene = new THREE.Scene();
 
-      // 50
-      camera = new THREE.PerspectiveCamera(79, window.innerWidth / window.innerHeight, 0.01, 1000);
+      // 
+      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000);
+      splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
+      cameraHelper = new THREE.CameraHelper(splineCamera);
+
       camera.position.set(0, 50, 500);
+      
       scene.add(camera);
 
+      
       var light = new THREE.DirectionalLight(0xffffff);
       light.position.set(0, 0, 1);
       scene.add(light);
@@ -518,6 +525,17 @@
 
       addTube();
 
+      // Debug point
+      cameraPos = new THREE.Mesh(new THREE.SphereGeometry(5), new THREE.MeshBasicMaterial({
+            color: 0xdddddd
+        }));
+
+      parent.add(cameraPos);
+
+      cameraHelper.scale.multiplyScalar(0.1);
+      splineCamera.add(cameraHelper);
+      parent.add(splineCamera);
+
       //
       renderer = new THREE.WebGLRenderer({
           antialias: true
@@ -615,55 +633,68 @@
 
     function render() {
 
-      if (animation) {
-        // Try Animate Camera Along Spline
-        var time = Date.now();
-        var looptime = 20 * 1000;
-        var t = (time % looptime) / looptime;
-        
-        var pos = tube.path.getPointAt(t);
-        pos.multiplyScalar(scale);
-
- 
-
-        // interpolation
-        var segments = tube.tangents.length;
-        var pickt = t * segments;
-        var pick = Math.floor(pickt);
-        var pickNext = (pick + 1) % segments;
-
-        var binormal = new THREE.Vector3();
-        binormal.sub(tube.binormals[pickNext], tube.binormals[pick]);
-        binormal.multiplyScalar(pickt-pick).addSelf(tube.binormals[pick]);
-
- 
-        var dir = tube.path.getTangentAt(t);
-  
-        var offset = 50;
+      // Try Animate Camera Along Spline
+      var time = Date.now();
+      var looptime = 20 * 1000;
+      var t = (time % looptime) / looptime;
 
-        // pos.addSelf(binormal.clone().multiplyScalar(offset));
-        // console.log(t, pos);
-        camera.position = pos;
+      var pos = tube.path.getPointAt(t);
+      pos.multiplyScalar(scale);
 
-        var lookAt = tube.path.getPointAt(t + 0.001);
-        // lookAt.multiplyScalar(scale);
-        // camera.lookAt(lookAt);
 
 
-        camera.matrix.lookAt( camera.position, lookAt, binormal ); //camera.position.clone().addSelf(dir)
-        camera.rotation.getRotationFromMatrix( camera.matrix );
-        
-        // var axis = new THREE.Vector3( 0, 1, 0 ).crossSelf( dir );
-        // var radians = Math.acos( new THREE.Vector3( 0, 1, 0 ).dot( dir.clone().normalize() ) );
-        // var matrix = new THREE.Matrix4().setRotationAxis( axis.normalize(), radians );
-        // camera.rotation.getRotationFromMatrix( matrix, camera.scale );
+      // interpolation
+      var segments = tube.tangents.length;
+      var pickt = t * segments;
+      var pick = Math.floor(pickt);
+      var pickNext = (pick + 1) % segments;
 
-      }
+      var binormal = new THREE.Vector3();
+      binormal.sub(tube.binormals[pickNext], tube.binormals[pick]);
+      binormal.multiplyScalar(pickt - pick).addSelf(tube.binormals[pick]);
+
+
+      var dir = tube.path.getTangentAt(t);
+
+      var offset = 15;
+
+      var normal = new THREE.Vector3();
+      normal.copy(binormal).crossSelf(dir);
+
+      // We move on a offset on its binormal
+      pos.addSelf(normal.clone().multiplyScalar(offset));
+      // console.log(t, pos);
 
+      splineCamera.position = pos;
+      cameraPos.position = pos;
+
+
+      // Camera Orientation 1 - default look at
+      var lookAt = tube.path.getPointAt((t + 0.101) % 1).multiplyScalar(scale);
+      // splineCamera.lookAt(lookAt);
+
+      // Camera Orientation 2 - up orientation via normal
+      if (!lookAhead)
+      lookAt.copy(pos).addSelf(dir);
+      splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
+      splineCamera.rotation.getRotationFromMatrix(splineCamera.matrix);
+
+      cameraHelper.update();
 
       parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
-      renderer.render(scene, camera);
 
+      if (animation) {
+
+        renderer.render(scene, splineCamera);
+
+      } else {
+
+        renderer.render(scene, camera);
+
+      }
+
+      
+      
     }
 	</script>
 

src/extras/helpers/CameraHelper.js

@@ -73,6 +73,8 @@ THREE.CameraHelper = function ( camera ) {
 	addLine( "cf1", "cf2", hexCross );
 	addLine( "cf3", "cf4", hexCross );
 
+	this.camera = camera;
+
 	function addLine( a, b, hex ) {
 
 		addPoint( a, hex );
@@ -100,7 +102,9 @@ THREE.CameraHelper = function ( camera ) {
 THREE.CameraHelper.prototype = new THREE.Object3D();
 THREE.CameraHelper.prototype.constructor = THREE.CameraHelper;
 
-THREE.CameraHelper.prototype.update = function ( camera ) {
+THREE.CameraHelper.prototype.update = function () {
+
+	var camera = this.camera;
 
 	var w = 1;
 	var h = 1;

src/extras/renderers/plugins/ShadowMapPlugin.js

@@ -179,7 +179,7 @@ THREE.ShadowMapPlugin = function ( ) {
 			shadowCamera.matrixWorldInverse.getInverse( shadowCamera.matrixWorld );
 
 			if ( light.cameraHelper ) light.cameraHelper.lines.visible = light.shadowCameraVisible;
-			if ( light.shadowCameraVisible ) light.cameraHelper.update( light.shadowCamera );
+			if ( light.shadowCameraVisible ) light.cameraHelper.update();
 
 			// compute shadow matrix