|
@@ -156,7 +156,7 @@
|
|
|
|
|
|
if ( toggle ) {
|
|
if ( toggle ) {
|
|
|
|
|
|
- animation = !animation;
|
|
|
|
|
|
+ animation = animation === false;
|
|
document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');
|
|
document.getElementById('animation').value = 'Camera Spline Animation View: ' + (animation? 'ON': 'OFF');
|
|
|
|
|
|
}
|
|
}
|
|
@@ -199,9 +199,6 @@
|
|
//
|
|
//
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera(50, 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);
|
|
camera.position.set(0, 50, 500);
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
@@ -212,39 +209,39 @@
|
|
|
|
|
|
parent = new THREE.Object3D();
|
|
parent = new THREE.Object3D();
|
|
parent.position.y = 100;
|
|
parent.position.y = 100;
|
|
- scene.add(parent);
|
|
|
|
|
|
+ scene.add( parent );
|
|
|
|
+
|
|
|
|
+ splineCamera = new THREE.PerspectiveCamera(84, window.innerWidth / window.innerHeight, 0.01, 1000);
|
|
|
|
+ parent.add(splineCamera);
|
|
|
|
+
|
|
|
|
+ cameraHelper = new THREE.CameraHelper(splineCamera);
|
|
|
|
+ scene.add(cameraHelper);
|
|
|
|
|
|
addTube();
|
|
addTube();
|
|
|
|
|
|
// Debug point
|
|
// Debug point
|
|
- cameraEye = new THREE.Mesh(
|
|
|
|
- new THREE.SphereGeometry( 5 ),
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0xdddddd } )
|
|
|
|
- );
|
|
|
|
-
|
|
|
|
- cameraHelper.visible = showCameraHelper;
|
|
|
|
- cameraEye.visible = showCameraHelper;
|
|
|
|
|
|
|
|
|
|
+ cameraEye = new THREE.Mesh( new THREE.SphereGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
|
|
parent.add(cameraEye);
|
|
parent.add(cameraEye);
|
|
|
|
|
|
- cameraHelper.scale.multiplyScalar( 0.1 );
|
|
|
|
- splineCamera.add(cameraHelper);
|
|
|
|
- parent.add(splineCamera);
|
|
|
|
|
|
+ cameraHelper.visible = showCameraHelper;
|
|
|
|
+ cameraEye.visible = showCameraHelper;
|
|
|
|
|
|
//
|
|
//
|
|
- renderer = new THREE.WebGLRenderer({ antialias: true } );
|
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
|
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
+
|
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
|
|
|
stats = new Stats();
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.top = '0px';
|
|
- container.appendChild(stats.domElement);
|
|
|
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
|
|
|
- renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
|
|
|
|
- renderer.domElement.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
|
|
- renderer.domElement.addEventListener('touchmove', onDocumentTouchMove, false);
|
|
|
|
|
|
+ renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
|
|
+ renderer.domElement.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
|
|
+ renderer.domElement.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
|
|
//
|
|
//
|
|
|
|
|
|
@@ -270,9 +267,9 @@
|
|
|
|
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
|
|
|
|
- renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
- renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
|
- renderer.domElement.addEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
+ renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
+ renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
|
|
+ renderer.domElement.addEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
|
|
|
|
mouseXOnMouseDown = event.clientX - windowHalfX;
|
|
mouseXOnMouseDown = event.clientX - windowHalfX;
|
|
targetRotationOnMouseDown = targetRotation;
|
|
targetRotationOnMouseDown = targetRotation;
|
|
@@ -289,17 +286,17 @@
|
|
|
|
|
|
function onDocumentMouseUp(event) {
|
|
function onDocumentMouseUp(event) {
|
|
|
|
|
|
- renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
- renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
|
- renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
+ renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
+ renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
|
|
+ renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
function onDocumentMouseOut(event) {
|
|
function onDocumentMouseOut(event) {
|
|
|
|
|
|
- renderer.domElement.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
|
- renderer.domElement.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
|
- renderer.domElement.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
+ renderer.domElement.removeEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
+ renderer.domElement.removeEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
|
|
+ renderer.domElement.removeEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
@@ -309,7 +306,7 @@
|
|
|
|
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
|
|
|
|
- mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
|
|
|
|
|
|
+ mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
|
|
targetRotationOnMouseDown = targetRotation;
|
|
targetRotationOnMouseDown = targetRotation;
|
|
|
|
|
|
}
|
|
}
|
|
@@ -322,7 +319,7 @@
|
|
|
|
|
|
event.preventDefault();
|
|
event.preventDefault();
|
|
|
|
|
|
- mouseX = event.touches[0].pageX - windowHalfX;
|
|
|
|
|
|
+ mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
|
|
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
|
|
|
|
|
|
}
|
|
}
|
|
@@ -387,19 +384,9 @@
|
|
|
|
|
|
cameraHelper.update();
|
|
cameraHelper.update();
|
|
|
|
|
|
- parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
|
|
|
|
-
|
|
|
|
- if (animation) {
|
|
|
|
-
|
|
|
|
- renderer.render(scene, splineCamera);
|
|
|
|
-
|
|
|
|
- } else {
|
|
|
|
-
|
|
|
|
- renderer.render(scene, camera);
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
|
|
|
|
|
|
|
|
+ renderer.render( scene, animation === true ? splineCamera : camera );
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|