switching to Camera Orientation method 2 - more stable using tangent and normals

examples/webgl_geometry_extrude_splines.html

@@ -525,10 +525,10 @@
       addTube();
 
       // Debug point
-      cameraPos = new THREE.Mesh(new THREE.SphereGeometry(10), new THREE.MeshBasicMaterial({
+      cameraPos = new THREE.Mesh(new THREE.SphereGeometry(5), new THREE.MeshBasicMaterial({
             color: 0xdddddd
         }));
-      cameraPos.visible = false;
+
       parent.add(cameraPos);
 
       cameraHelper.scale.multiplyScalar(0.1);
@@ -655,28 +655,37 @@
 
       var dir = tube.path.getTangentAt(t);
 
-      var offset = -15;
+      var offset = 15;
+
+      var normal = new THREE.Vector3();
+      normal.copy(binormal).crossSelf(dir);
 
       // We move on a offset on its binormal
-      pos.addSelf(binormal.clone().multiplyScalar(offset));
+      pos.addSelf(normal.clone().multiplyScalar(offset));
       // console.log(t, pos);
+
       splineCamera.position = pos;
+      cameraPos.position = pos;
 
-      var lookAt = tube.path.getPointAt((t + 0.101) % 1);
-      lookAt.multiplyScalar(scale);
 
-      splineCamera.lookAt(lookAt);
+      // Camera Orientation 1 - default look at
+      var lookAt = tube.path.getPointAt((t + 0.101) % 1).multiplyScalar(scale);
+      // splineCamera.lookAt(lookAt);
 
-      cameraPos.position = pos;
 
-      // splineCamera.matrix.lookAt(splineCamera.position, lookAt, binormal); //camera.position.clone().addSelf(dir)
-      // splineCamera.rotation.getRotationFromMatrix(splineCamera.matrix);
-      // cameraHelper.update();
+      // Camera Orientation 2 - up orientation via normal
+      lookAt.copy(pos).addSelf(dir);
+      splineCamera.matrix.lookAt(splineCamera.position, lookAt, normal);
+      splineCamera.rotation.getRotationFromMatrix(splineCamera.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() ) );
+      // Camera Orientation 3 - using rotation from matrix - Doesn't work too well because of spin.
+      // var axis = new THREE.Vector3( 0, 0, -1 ).crossSelf( dir );
+      // var radians = Math.acos( new THREE.Vector3( 0, 0, -1 ).dot( dir.clone().normalize() ) );
       // var matrix = new THREE.Matrix4().setRotationAxis( axis.normalize(), radians );
-      // camera.rotation.getRotationFromMatrix( matrix, camera.scale );
+      // splineCamera.rotation.getRotationFromMatrix( matrix, splineCamera.scale );
+
+      cameraHelper.update();
+
       parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
 
       if (animation) {