diff --git a/examples/webgl_geometry_extrude_splines.html b/examples/webgl_geometry_extrude_splines.html index 7611814cf1ddeb142093c28b6fcfc71842a9e6e4..6e1fe44da0644dc3275a94b78cfb10ed21d039c9 100644 --- a/examples/webgl_geometry_extrude_splines.html +++ b/examples/webgl_geometry_extrude_splines.html @@ -632,58 +632,65 @@ 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); - splineCamera.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); - cameraPos.position = pos; + // interpolation + var segments = tube.tangents.length; + var pickt = t * segments; + var pick = Math.floor(pickt); + var pickNext = (pick + 1) % segments; - splineCamera.matrix.lookAt( splineCamera.position, lookAt, binormal ); //camera.position.clone().addSelf(dir) - splineCamera.rotation.getRotationFromMatrix( splineCamera.matrix ); - cameraHelper.update(); - - // 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 ); + 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; + + // We move on a offset on its binormal + pos.addSelf(binormal.clone().multiplyScalar(offset)); + // console.log(t, pos); + splineCamera.position = pos; + + var lookAt = tube.path.getPointAt((t + 0.101) % 1); + lookAt.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(); + // 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 ); parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05; - renderer.render(scene, camera); + if (animation) { + + renderer.render(scene, splineCamera); + + } else { + + renderer.render(scene, camera); + + } + + + }