|
|
@@ -1,4 +1,3 @@
|
|
|
-
|
|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
@@ -23,95 +22,98 @@
|
|
|
<script src="js/Stats.js"></script>
|
|
|
|
|
|
|
|
|
- <script>
|
|
|
+ <script>
|
|
|
|
|
|
// Lets define some curves
|
|
|
|
|
|
// Formula from http://mathworld.wolfram.com/HeartCurve.html
|
|
|
+
|
|
|
THREE.HeartCurve = THREE.Curve.create(
|
|
|
|
|
|
- function(s) {
|
|
|
- this.scale = (s === undefined) ? 5 : s ;
|
|
|
- },
|
|
|
+ function ( s ) {
|
|
|
|
|
|
- function(t) {
|
|
|
- t *= 2 * Math.PI;
|
|
|
- var tx = 16 * Math.pow(Math.sin(t), 3);
|
|
|
- ty = 13 * Math.cos(t)
|
|
|
- - 5 * Math.cos(2 * t)
|
|
|
- - 2 * Math.cos(3 * t)
|
|
|
- - Math.cos(4 * t ),
|
|
|
- tz = 0;
|
|
|
+ this.scale = ( s === undefined ) ? 5 : s;
|
|
|
|
|
|
- return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
+ function ( t ) {
|
|
|
|
|
|
- );
|
|
|
+ t *= 2 * Math.PI;
|
|
|
+ var tx = 16 * Math.pow( Math.sin( t ), 3 );
|
|
|
+ ty = 13 * Math.cos( t )
|
|
|
+ - 5 * Math.cos( 2 * t )
|
|
|
+ - 2 * Math.cos( 3 * t )
|
|
|
+ - Math.cos( 4 * t ),
|
|
|
+ tz = 0;
|
|
|
|
|
|
+ return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ );
|
|
|
|
|
|
|
|
|
// Viviani's Curve
|
|
|
// http://en.wikipedia.org/wiki/Viviani%27s_curve
|
|
|
+
|
|
|
THREE.VivianiCurve = THREE.Curve.create(
|
|
|
|
|
|
- function(radius) {
|
|
|
+ function ( radius ) {
|
|
|
|
|
|
- this.radius = radius;
|
|
|
- },
|
|
|
+ this.radius = radius;
|
|
|
|
|
|
- function(t) {
|
|
|
- t = t * 4 * Math.PI; // Normalized to 0..1
|
|
|
- var a = this.radius / 2;
|
|
|
- var tx = a * (1 + Math.cos(t)),
|
|
|
- ty = a * Math.sin(t),
|
|
|
- tz = 2 * a * Math.sin(t / 2);
|
|
|
+ },
|
|
|
|
|
|
- return new THREE.Vector3(tx, ty, tz);
|
|
|
+ function ( t ) {
|
|
|
|
|
|
- }
|
|
|
+ t = t * 4 * Math.PI; // Normalized to 0..1
|
|
|
+ var a = this.radius / 2;
|
|
|
+ var tx = a * ( 1 + Math.cos( t ) ),
|
|
|
+ ty = a * Math.sin( t ),
|
|
|
+ tz = 2 * a * Math.sin( t / 2 );
|
|
|
|
|
|
- );
|
|
|
+ return new THREE.Vector3( tx, ty, tz );
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ );
|
|
|
|
|
|
THREE.KnotCurve = THREE.Curve.create(
|
|
|
|
|
|
- function() {
|
|
|
+ function () {},
|
|
|
|
|
|
- },
|
|
|
+ function ( t ) {
|
|
|
|
|
|
- function(t) {
|
|
|
- t *= 2 * Math.PI;
|
|
|
-
|
|
|
- var R = 10;
|
|
|
- var s = 50;
|
|
|
- var tx = s * Math.sin(t),
|
|
|
- ty = Math.cos(t) * (R + s * Math.cos(t)),
|
|
|
- tz = Math.sin(t) * (R + s * Math.cos(t));
|
|
|
-
|
|
|
- return new THREE.Vector3(tx, ty, tz);
|
|
|
+ t *= 2 * Math.PI;
|
|
|
|
|
|
- }
|
|
|
+ var R = 10;
|
|
|
+ var s = 50;
|
|
|
+ var tx = s * Math.sin( t ),
|
|
|
+ ty = Math.cos( t ) * ( R + s * Math.cos( t ) ),
|
|
|
+ tz = Math.sin( t ) * ( R + s * Math.cos( t ) );
|
|
|
+
|
|
|
+ return new THREE.Vector3( tx, ty, tz );
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
);
|
|
|
|
|
|
THREE.HelixCurve = THREE.Curve.create(
|
|
|
|
|
|
- function() {
|
|
|
+ function () {},
|
|
|
|
|
|
- },
|
|
|
+ function ( t ) {
|
|
|
|
|
|
- function(t) {
|
|
|
- var a = 30; // radius
|
|
|
- var b = 150; //height
|
|
|
- var t2 = 2 * Math.PI * t * b / 30;
|
|
|
- var tx = Math.cos(t2) * a,
|
|
|
- ty = Math.sin(t2) * a,
|
|
|
- tz = b * t;
|
|
|
+ var a = 30; // radius
|
|
|
+ var b = 150; //height
|
|
|
+ var t2 = 2 * Math.PI * t * b / 30;
|
|
|
+ var tx = Math.cos( t2 ) * a,
|
|
|
+ ty = Math.sin( t2 ) * a,
|
|
|
+ tz = b * t;
|
|
|
|
|
|
- return new THREE.Vector3(tx, ty, tz);
|
|
|
+ return new THREE.Vector3( tx, ty, tz );
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
);
|
|
|
|
|
|
@@ -135,156 +137,150 @@
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- container = document.createElement('div');
|
|
|
- document.body.appendChild(container);
|
|
|
-
|
|
|
- var info = document.createElement('div');
|
|
|
- info.style.position = 'absolute';
|
|
|
- info.style.top = '10px';
|
|
|
- info.style.width = '100%';
|
|
|
- info.style.textAlign = 'center';
|
|
|
- info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
|
|
|
- container.appendChild(info);
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
|
|
|
- camera.position.set(0, 50, 500);
|
|
|
- scene.add(camera);
|
|
|
-
|
|
|
- var light = new THREE.DirectionalLight(0xffffff);
|
|
|
- light.position.set(0, 0, 1);
|
|
|
- scene.add(light);
|
|
|
-
|
|
|
- parent = new THREE.Object3D();
|
|
|
- parent.position.y = 50;
|
|
|
- scene.add(parent);
|
|
|
-
|
|
|
- function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
|
|
|
-
|
|
|
- // 3d shape
|
|
|
- var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshLambertMaterial({
|
|
|
- color: color
|
|
|
- }), new THREE.MeshBasicMaterial({
|
|
|
- color: 0x000000,
|
|
|
- wireframe: true,
|
|
|
- transparent: true
|
|
|
- })]);
|
|
|
-
|
|
|
- if (geometry.debug) mesh.add(geometry.debug);
|
|
|
-
|
|
|
- mesh.position.set(x, y, z - 75);
|
|
|
- mesh.rotation.set(rx, ry, rz);
|
|
|
- mesh.scale.set(s, s, s);
|
|
|
- parent.add(mesh);
|
|
|
+ container = document.createElement( 'div' );
|
|
|
+ document.body.appendChild( container );
|
|
|
|
|
|
- }
|
|
|
+ var info = document.createElement('div');
|
|
|
+ info.style.position = 'absolute';
|
|
|
+ info.style.top = '10px';
|
|
|
+ info.style.width = '100%';
|
|
|
+ info.style.textAlign = 'center';
|
|
|
+ info.innerHTML = 'Simple procedurally generated 3D shapes example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br/>Drag to spin';
|
|
|
+ container.appendChild(info);
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
+ camera.position.set( 0, 50, 500 );
|
|
|
+ scene.add( camera );
|
|
|
+
|
|
|
+ var light = new THREE.DirectionalLight( 0xffffff );
|
|
|
+ light.position.set( 0, 0, 1 );
|
|
|
+ scene.add( light );
|
|
|
+
|
|
|
+ parent = new THREE.Object3D();
|
|
|
+ parent.position.y = 130;
|
|
|
+ scene.add( parent );
|
|
|
+
|
|
|
+ function addGeometry( geometry, color, x, y, z, rx, ry, rz, s ) {
|
|
|
+
|
|
|
+ // 3d shape
|
|
|
+
|
|
|
+ var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
|
|
|
+ new THREE.MeshLambertMaterial( { color: color }),
|
|
|
+ new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } )
|
|
|
+ ]);
|
|
|
|
|
|
-
|
|
|
- // var extrudePath = new THREE.SplineCurve3([
|
|
|
- // new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10), new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10), new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30), new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30), new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10),
|
|
|
+ if ( geometry.debug ) mesh.add( geometry.debug );
|
|
|
|
|
|
- // new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10), new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10), new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10), new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10), new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0), new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)]);
|
|
|
+ mesh.position.set( x, y, z - 75 );
|
|
|
+ mesh.rotation.set( rx, ry, rz );
|
|
|
+ mesh.scale.set( s, s, s );
|
|
|
+ parent.add( mesh );
|
|
|
|
|
|
- var extrudePath = new THREE.HeartCurve(3.5);
|
|
|
- // var extrudePath = new THREE.VivianiCurve(70);
|
|
|
- // var extrudePath = new THREE.KnotCurve();
|
|
|
- // extrudePath = new THREE.HelixCurve();
|
|
|
-
|
|
|
- // var extrudePath = new THREE.ClosedSplineCurve3([
|
|
|
- // new THREE.Vector3(0, -40, -40),
|
|
|
- // new THREE.Vector3(0, 40, -40),
|
|
|
- // new THREE.Vector3(0, 140, -40),
|
|
|
- // new THREE.Vector3(0, 40, 40),
|
|
|
- // new THREE.Vector3(0, -40, 40),
|
|
|
- // ]);
|
|
|
-
|
|
|
+ }
|
|
|
|
|
|
- var tube = new THREE.TubeGeometry(5, 100, 10, extrudePath, true);
|
|
|
-
|
|
|
+ // var extrudePath = new THREE.SplineCurve3([
|
|
|
+ // new THREE.Vector3(0, 10, -10), new THREE.Vector3(10, 0, -10), new THREE.Vector3(20, 0, 0), new THREE.Vector3(30, 0, 10), new THREE.Vector3(30, 0, 20), new THREE.Vector3(20, 0, 30), new THREE.Vector3(10, 0, 30), new THREE.Vector3(0, 0, 30), new THREE.Vector3(-10, 10, 30), new THREE.Vector3(-10, 20, 30), new THREE.Vector3(0, 30, 30), new THREE.Vector3(10, 30, 30), new THREE.Vector3(20, 30, 15), new THREE.Vector3(10, 30, 10),
|
|
|
|
|
|
- addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 3);
|
|
|
+ // new THREE.Vector3(0, 30, 10), new THREE.Vector3(-10, 20, 10), new THREE.Vector3(-10, 10, 10), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, -10, 10), new THREE.Vector3(20, -15, 10), new THREE.Vector3(30, -15, 10), new THREE.Vector3(40, -15, 10), new THREE.Vector3(50, -15, 10), new THREE.Vector3(60, 0, 10), new THREE.Vector3(70, 0, 0), new THREE.Vector3(80, 0, 0), new THREE.Vector3(90, 0, 0), new THREE.Vector3(100, 0, 0)]);
|
|
|
|
|
|
+ var extrudePath = new THREE.HeartCurve( 3.5 );
|
|
|
+ // var extrudePath = new THREE.VivianiCurve(70);
|
|
|
+ // var extrudePath = new THREE.KnotCurve();
|
|
|
+ // extrudePath = new THREE.HelixCurve();
|
|
|
|
|
|
- //
|
|
|
- renderer = new THREE.WebGLRenderer({
|
|
|
- antialias: true
|
|
|
- });
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
+ // var extrudePath = new THREE.ClosedSplineCurve3([
|
|
|
+ // new THREE.Vector3(0, -40, -40),
|
|
|
+ // new THREE.Vector3(0, 40, -40),
|
|
|
+ // new THREE.Vector3(0, 140, -40),
|
|
|
+ // new THREE.Vector3(0, 40, 40),
|
|
|
+ // new THREE.Vector3(0, -40, 40),
|
|
|
+ // ]);
|
|
|
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
|
|
|
- stats = new Stats();
|
|
|
- stats.domElement.style.position = 'absolute';
|
|
|
- stats.domElement.style.top = '0px';
|
|
|
- container.appendChild(stats.domElement);
|
|
|
+ var tube = new THREE.TubeGeometry( 5, 100, 10, extrudePath, true );
|
|
|
|
|
|
- document.addEventListener('mousedown', onDocumentMouseDown, false);
|
|
|
- document.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
|
- document.addEventListener('touchmove', onDocumentTouchMove, false);
|
|
|
+ addGeometry( tube, 0xff1100, 0, -80, 0, 0, 0, 0, 3 );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ document.addEventListener('mousedown', onDocumentMouseDown, false);
|
|
|
+ document.addEventListener('touchstart', onDocumentTouchStart, false);
|
|
|
+ document.addEventListener('touchmove', onDocumentTouchMove, false);
|
|
|
|
|
|
}
|
|
|
|
|
|
//
|
|
|
|
|
|
- function onDocumentMouseDown(event) {
|
|
|
+ function onDocumentMouseDown( event ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
- document.addEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
- document.addEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
+ document.addEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
+ document.addEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
+ document.addEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
- mouseXOnMouseDown = event.clientX - windowHalfX;
|
|
|
- targetRotationOnMouseDown = targetRotation;
|
|
|
+ mouseXOnMouseDown = event.clientX - windowHalfX;
|
|
|
+ targetRotationOnMouseDown = targetRotation;
|
|
|
|
|
|
}
|
|
|
|
|
|
- function onDocumentMouseMove(event) {
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
|
|
|
- mouseX = event.clientX - windowHalfX;
|
|
|
+ mouseX = event.clientX - windowHalfX;
|
|
|
|
|
|
- targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
|
|
|
+ targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
|
|
|
|
|
|
}
|
|
|
|
|
|
- function onDocumentMouseUp(event) {
|
|
|
+ function onDocumentMouseUp( event ) {
|
|
|
|
|
|
- document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
- document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
- document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
+ document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
+ document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
+ document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
}
|
|
|
|
|
|
- function onDocumentMouseOut(event) {
|
|
|
+ function onDocumentMouseOut( event ) {
|
|
|
|
|
|
- document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
- document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
- document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
+ document.removeEventListener('mousemove', onDocumentMouseMove, false);
|
|
|
+ document.removeEventListener('mouseup', onDocumentMouseUp, false);
|
|
|
+ document.removeEventListener('mouseout', onDocumentMouseOut, false);
|
|
|
|
|
|
}
|
|
|
|
|
|
- function onDocumentTouchStart(event) {
|
|
|
+ function onDocumentTouchStart( event ) {
|
|
|
|
|
|
- if (event.touches.length == 1) {
|
|
|
+ if ( event.touches.length == 1 ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
|
|
|
- targetRotationOnMouseDown = targetRotation;
|
|
|
+ mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
|
|
|
+ targetRotationOnMouseDown = targetRotation;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
- function onDocumentTouchMove(event) {
|
|
|
+ function onDocumentTouchMove( event ) {
|
|
|
|
|
|
- if (event.touches.length == 1) {
|
|
|
+ if ( event.touches.length == 1 ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- mouseX = event.touches[0].pageX - windowHalfX;
|
|
|
- targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
|
|
|
+ mouseX = event.touches[0].pageX - windowHalfX;
|
|
|
+ targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -294,20 +290,21 @@
|
|
|
|
|
|
function animate() {
|
|
|
|
|
|
- requestAnimationFrame(animate);
|
|
|
+ requestAnimationFrame(animate);
|
|
|
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
+ render();
|
|
|
+ stats.update();
|
|
|
|
|
|
}
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
+ parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
|
|
|
+ renderer.render( scene, camera );
|
|
|
|
|
|
- parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05;
|
|
|
- renderer.render(scene, camera);
|
|
|
+ }
|
|
|
|
|
|
- }</script>
|
|
|
+ </script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
alteredq