|
|
@@ -1,541 +1,558 @@
|
|
|
+
|
|
|
<!doctype html>
|
|
|
<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js webgl - geometry - shapes</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <style>
|
|
|
- body {
|
|
|
- font-family: Monospace;
|
|
|
- background-color: #f0f0f0;
|
|
|
- margin: 0px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <canvas id="debug" style="position:absolute; left:100px"></canvas>
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - geometry - shapes</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: Monospace;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <canvas id="debug" style="position:absolute; left:100px"></canvas>
|
|
|
+
|
|
|
+ <script src="../build/Three.js"></script>
|
|
|
+ <script src="../src/extras/core/Curve.js"></script>
|
|
|
+ <script src="../src/extras/geometries/TubeGeometry.js"></script>
|
|
|
+ <script src="js/Stats.js"></script>
|
|
|
+
|
|
|
|
|
|
- <script src="../build/Three.js"></script>
|
|
|
- <script src="../src/extras/core/Curve.js"></script>
|
|
|
- <script src="../src/extras/geometries/TubeGeometry.js"></script>
|
|
|
- <script src="js/Stats.js"></script>
|
|
|
+ <script>
|
|
|
|
|
|
- <script>
|
|
|
+ // Lets define some curves
|
|
|
|
|
|
- // Lets define some curves
|
|
|
+ // Formula from http://mathworld.wolfram.com/HeartCurve.html
|
|
|
|
|
|
- // Formula from http://mathworld.wolfram.com/HeartCurve.html
|
|
|
+ THREE.HeartCurve = THREE.Curve.create(
|
|
|
|
|
|
- THREE.HeartCurve = THREE.Curve.create(
|
|
|
+ function ( s ) {
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ this.scale = (s === undefined) ? 5 : s;
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 5 : s;
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ function ( t ) {
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ t *= 2 * Math.PI;
|
|
|
|
|
|
- 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;
|
|
|
|
|
|
- var tx = 16 * Math.pow( Math.sin( t ), 3 );
|
|
|
- var ty = 13 * Math.cos( t )
|
|
|
- - 5 * Math.cos( 2 * t )
|
|
|
- - 2 * Math.cos( 3 * t )
|
|
|
- - Math.cos( 4 * t );
|
|
|
- var tz = 0;
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ );
|
|
|
|
|
|
- );
|
|
|
|
|
|
|
|
|
+ // Viviani's Curve
|
|
|
+ // http://en.wikipedia.org/wiki/Viviani%27s_curve
|
|
|
|
|
|
- // Viviani's Curve
|
|
|
- // http://en.wikipedia.org/wiki/Viviani%27s_curve
|
|
|
+ THREE.VivianiCurve = THREE.Curve.create(
|
|
|
|
|
|
- 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);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz);
|
|
|
|
|
|
- t = t * 4 * Math.PI; // Normalized to 0..1
|
|
|
- var a = this.radius / 2;
|
|
|
- var tx = a * ( 1 + Math.cos( t ) );
|
|
|
- var ty = a * Math.sin( t );
|
|
|
- var tz = 2 * a * Math.sin( t / 2 );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- );
|
|
|
+ THREE.KnotCurve = THREE.Curve.create(
|
|
|
|
|
|
+ function() {
|
|
|
|
|
|
- THREE.KnotCurve = THREE.Curve.create(
|
|
|
+ },
|
|
|
|
|
|
- function () {
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ t *= 2 * Math.PI;
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ 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));
|
|
|
|
|
|
- t *= 2 * Math.PI;
|
|
|
+ return new THREE.Vector3(tx, ty, tz);
|
|
|
|
|
|
- var R = 10;
|
|
|
- var s = 50;
|
|
|
- var tx = s * Math.sin( t );
|
|
|
- var ty = Math.cos( t ) * ( R + s * Math.cos( t ) );
|
|
|
- var tz = Math.sin( t ) * ( R + s * Math.cos( t ) );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
+ THREE.HelixCurve = THREE.Curve.create(
|
|
|
|
|
|
- );
|
|
|
+ function() {
|
|
|
|
|
|
- THREE.HelixCurve = THREE.Curve.create(
|
|
|
+ },
|
|
|
|
|
|
- function () {
|
|
|
+ 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;
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz);
|
|
|
|
|
|
- var a = 30; // radius
|
|
|
- var b = 150; //height
|
|
|
- var t2 = 2 * Math.PI * t * b / 30;
|
|
|
- var tx = Math.cos( t2 ) * a;
|
|
|
- var ty = Math.sin( t2 ) * a;
|
|
|
- var tz = b * t;
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
+ // Replacement for TorusKnotGeometry?
|
|
|
|
|
|
- );
|
|
|
+ THREE.TrefoilKnot = THREE.Curve.create(
|
|
|
|
|
|
- // Replacement for TorusKnotGeometry?
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.TrefoilKnot = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 10 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 10 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ t *= Math.PI * 2;
|
|
|
+ var tx = (2 + Math.cos(3 * t)) * Math.cos(2 * t),
|
|
|
+ ty = (2 + Math.cos(3* t)) * Math.sin(2 * t),
|
|
|
+ tz = Math.sin(3 * t);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- t *= Math.PI * 2;
|
|
|
- var tx = ( 2 + Math.cos( 3 * t ) ) * Math.cos( 2 * t );
|
|
|
- var ty = ( 2 + Math.cos( 3 * t ) ) * Math.sin( 2 * t );
|
|
|
- var tz = Math.sin( 3 * t );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
+ // Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
|
|
|
|
|
|
- );
|
|
|
+ THREE.TorusKnot = THREE.Curve.create(
|
|
|
|
|
|
- // Formulas from http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page6.html
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.TorusKnot = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 10 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 10 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ var p = 3, q = 4;
|
|
|
+ t *= Math.PI * 2;
|
|
|
+ var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
|
|
|
+ ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
|
|
|
+ tz = Math.sin(q * t);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- t *= Math.PI * 2;
|
|
|
- var p = 3, q = 4;
|
|
|
- var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
|
|
|
- var ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
|
|
|
- var tz = Math.sin( q * t );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- );
|
|
|
+ THREE.CinquefoilKnot = THREE.Curve.create(
|
|
|
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.CinquefoilKnot = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 10 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 10 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ var p = 2, q = 5;
|
|
|
+ t *= Math.PI * 2;
|
|
|
+ var tx = (2 + Math.cos(q * t)) * Math.cos(p * t),
|
|
|
+ ty = (2 + Math.cos(q* t)) * Math.sin(p * t),
|
|
|
+ tz = Math.sin(q * t);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- t *= Math.PI * 2;
|
|
|
- var p = 2, q = 5;
|
|
|
- var tx = ( 2 + Math.cos( q * t ) ) * Math.cos( p * t );
|
|
|
- var ty = ( 2 + Math.cos( q * t ) ) * Math.sin( p * t );
|
|
|
- var tz = Math.sin( q * t );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- );
|
|
|
+ THREE.TrefoilPolynomialKnot = THREE.Curve.create(
|
|
|
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.TrefoilPolynomialKnot = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 10 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 10 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ t = t * 4 - 2;
|
|
|
+ var tx = Math.pow(t, 3) - 3 * t,
|
|
|
+ ty = Math.pow(t, 4) - 4 * t * t,
|
|
|
+ tz = 1/ 5 * Math.pow(t, 5) - 2 * t;
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- t = t * 4 - 2;
|
|
|
- var tx = Math.pow( t, 3 ) - 3 * t;
|
|
|
- var ty = Math.pow( t, 4 ) - 4 * t * t;
|
|
|
- var tz = 1/ 5 * Math.pow( t, 5 ) - 2 * t;
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
+ var sin = Math.sin, pow = Math.pow, cos = Math.cos;
|
|
|
+ // var scaleTo = function(x, y) {
|
|
|
+ // var r = y - x;
|
|
|
+ // return function(t) {
|
|
|
+ // t * r + x;
|
|
|
+ // };
|
|
|
+ // }
|
|
|
|
|
|
- );
|
|
|
+ var scale = function(x, y, t) {
|
|
|
|
|
|
- var sin = Math.sin, pow = Math.pow, cos = Math.cos;
|
|
|
- var scale = function ( x, y, t ) {
|
|
|
+ var r = y - x;
|
|
|
+ return t * r + x;
|
|
|
|
|
|
- var r = y - x;
|
|
|
- return t * r + x;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ THREE.FigureEightPolynomialKnot = THREE.Curve.create(
|
|
|
|
|
|
- THREE.FigureEightPolynomialKnot = THREE.Curve.create(
|
|
|
+ function(s) {
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ this.scale = (s === undefined) ? 1 : s;
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 1 : s;
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ function(t) {
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ t = scale(-4,4, t);
|
|
|
+ var tx = 2 / 5 * t * (t * t - 7) * (t * t - 10),
|
|
|
+ ty = pow(t, 4) - 13 * t * t,
|
|
|
+ tz = 1/10 * t * (t * t - 4) * (t * t - 9) * (t * t - 12);
|
|
|
|
|
|
- t = scale( -4, 4, t );
|
|
|
- var tx = 2 / 5 * t * ( t * t - 7 ) * ( t * t - 10 );
|
|
|
- var ty = pow( t, 4 ) - 13 * t * t;
|
|
|
- var tz = 1 / 10 * t * ( t * t - 4 ) * ( t * t - 9 ) * ( t * t - 12 );
|
|
|
+ return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
|
|
|
|
|
|
- return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ );
|
|
|
|
|
|
- );
|
|
|
+ // When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
|
|
|
|
|
|
|
|
|
- // When there's time, try more formulas at http://mathdl.maa.org/images/upload_library/23/stemkoski/knots/page4.html
|
|
|
+ //http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
|
|
|
|
|
|
- //http://www.mi.sanu.ac.rs/vismath/taylorapril2011/Taylor.pdf
|
|
|
+ THREE.DecoratedTorusKnot4a = THREE.Curve.create(
|
|
|
|
|
|
- THREE.DecoratedTorusKnot4a = THREE.Curve.create(
|
|
|
+ function(s) {
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ this.scale = (s === undefined) ? 40 : s;
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 40 : s;
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ function(t) {
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ t *= Math.PI * 2;
|
|
|
+ var
|
|
|
+ x = cos(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
|
|
|
+ y = sin(2*t) * (1+0.6*(cos(5*t) + 0.75*cos(10*t))),
|
|
|
+ z = 0.35*sin(5*t);
|
|
|
|
|
|
- t *= Math.PI * 2;
|
|
|
- var x = cos( 2 * t ) * ( 1 + 0.6 * ( cos( 5 * t ) + 0.75 * cos( 10 * t ) ) );
|
|
|
- var y = sin( 2 * t ) * ( 1 + 0.6 * ( cos( 5 * t ) + 0.75 * cos( 10 * t ) ) );
|
|
|
- var z = 0.35 * sin( 5 * t );
|
|
|
+ return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
|
|
|
|
|
|
- return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ );
|
|
|
|
|
|
- );
|
|
|
|
|
|
+ THREE.DecoratedTorusKnot4b = THREE.Curve.create(
|
|
|
|
|
|
- THREE.DecoratedTorusKnot4b = THREE.Curve.create(
|
|
|
+ function(s) {
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ this.scale = (s === undefined) ? 40 : s;
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 40 : s;
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ function(t) {
|
|
|
+ var fi = t * Math.PI * 2;
|
|
|
+ var x = cos(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
|
|
|
+ y = sin(2*fi) * (1 + 0.45*cos(3*fi) + 0.4*cos(9*fi)),
|
|
|
+ z = 0.2*sin(9*fi);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
|
|
|
|
|
|
- var fi = t * Math.PI * 2;
|
|
|
- var x = cos( 2 * fi ) * ( 1 + 0.45 * cos( 3 * fi ) + 0.4 * cos( 9 * fi ) );
|
|
|
- var y = sin( 2 * fi ) * ( 1 + 0.45 * cos( 3 * fi ) + 0.4 * cos( 9 * fi ) );
|
|
|
- var z = 0.2 * sin( 9 * fi );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- );
|
|
|
+ THREE.DecoratedTorusKnot5a = THREE.Curve.create(
|
|
|
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.DecoratedTorusKnot5a = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 40 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 40 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ var fi = t * Math.PI * 2;
|
|
|
+ var x = cos(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
|
|
|
+ y = sin(3*fi) * (1 + 0.3*cos(5*fi) + 0.5*cos(10*fi)),
|
|
|
+ z = 0.2*sin(20*fi);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
|
|
|
|
|
|
- var fi = t * Math.PI * 2;
|
|
|
- var x = cos( 3 * fi ) * ( 1 + 0.3 * cos( 5 * fi ) + 0.5 * cos( 10 * fi ) );
|
|
|
- var y = sin( 3 * fi ) * ( 1 + 0.3 * cos( 5 * fi ) + 0.5 * cos( 10 * fi ) );
|
|
|
- var z = 0.2 * sin( 20 * fi );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
+ THREE.DecoratedTorusKnot5c = THREE.Curve.create(
|
|
|
|
|
|
- );
|
|
|
+ function(s) {
|
|
|
|
|
|
- THREE.DecoratedTorusKnot5c = THREE.Curve.create(
|
|
|
+ this.scale = (s === undefined) ? 40 : s;
|
|
|
|
|
|
- function ( s ) {
|
|
|
+ },
|
|
|
|
|
|
- this.scale = ( s === undefined ) ? 40 : s;
|
|
|
+ function(t) {
|
|
|
|
|
|
- },
|
|
|
+ var fi = t * Math.PI * 2;
|
|
|
+ var x = cos(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
|
|
|
+ y = sin(4*fi) * (1 + 0.5*(cos(5*fi) + 0.4*cos(20*fi))),
|
|
|
+ z = 0.35*sin(15*fi);
|
|
|
|
|
|
- function ( t ) {
|
|
|
+ return new THREE.Vector3(x, y, z).multiplyScalar(this.scale);
|
|
|
|
|
|
- var fi = t * Math.PI * 2;
|
|
|
- var x = cos( 4 * fi ) * ( 1 + 0.5 * ( cos( 5 * fi ) + 0.4 * cos( 20 * fi ) ) );
|
|
|
- var y = sin( 4 * fi ) * ( 1 + 0.5 * ( cos( 5 * fi ) + 0.4 * cos( 20 * fi ) ) );
|
|
|
- var z = 0.35 * sin( 15 * fi );
|
|
|
+ }
|
|
|
|
|
|
- return new THREE.Vector3( x, y, z ).multiplyScalar( this.scale );
|
|
|
+ );
|
|
|
|
|
|
- }
|
|
|
|
|
|
- );
|
|
|
|
|
|
- //
|
|
|
|
|
|
- var container, stats;
|
|
|
+ var container, stats;
|
|
|
|
|
|
- var camera, scene, renderer;
|
|
|
+ var camera, scene, renderer;
|
|
|
|
|
|
- var text, plane;
|
|
|
+ var text, plane;
|
|
|
|
|
|
- var targetRotation = 0;
|
|
|
- var targetRotationOnMouseDown = 0;
|
|
|
+ var targetRotation = 0;
|
|
|
+ var targetRotationOnMouseDown = 0;
|
|
|
|
|
|
- var mouseX = 0;
|
|
|
- var mouseXOnMouseDown = 0;
|
|
|
+ var mouseX = 0;
|
|
|
+ var mouseXOnMouseDown = 0;
|
|
|
|
|
|
- var windowHalfX = window.innerWidth / 2;
|
|
|
- var windowHalfY = window.innerHeight / 2;
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
- init();
|
|
|
- animate();
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
|
|
|
- function init() {
|
|
|
+ function init() {
|
|
|
|
|
|
- container = document.createElement('div');
|
|
|
- document.body.appendChild(container);
|
|
|
+ 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);
|
|
|
+ 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();
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
|
|
|
- camera.position.set(0, 50, 500);
|
|
|
- scene.add(camera);
|
|
|
+ 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);
|
|
|
+ var light = new THREE.DirectionalLight(0xffffff);
|
|
|
+ light.position.set(0, 0, 1);
|
|
|
+ scene.add(light);
|
|
|
|
|
|
- parent = new THREE.Object3D();
|
|
|
- parent.position.y = 100;
|
|
|
- scene.add(parent);
|
|
|
+ parent = new THREE.Object3D();
|
|
|
+ parent.position.y = 100;
|
|
|
+ scene.add(parent);
|
|
|
|
|
|
- function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
|
|
|
+ function addGeometry(geometry, color, x, y, z, rx, ry, rz, s) {
|
|
|
|
|
|
- // 3d shape
|
|
|
+ // 3d shape
|
|
|
+ var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [
|
|
|
+ new THREE.MeshLambertMaterial({
|
|
|
+ color: color,
|
|
|
+ opacity: 0.2
|
|
|
+ }),
|
|
|
+ new THREE.MeshBasicMaterial({
|
|
|
+ color: 0x000000,
|
|
|
+ wireframe: true,
|
|
|
+ transparent: true
|
|
|
+ })]);
|
|
|
|
|
|
- var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
|
|
|
+ if (geometry.debug) mesh.add(geometry.debug);
|
|
|
|
|
|
- new THREE.MeshLambertMaterial( { color: color, opacity: 0.2, transparent: true } ),
|
|
|
- new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true } )
|
|
|
+ mesh.position.set(x, y, z - 75);
|
|
|
+ mesh.rotation.set(rx, ry, rz);
|
|
|
+ mesh.scale.set(s, s, s);
|
|
|
+ //mesh.children[0].doubleSided = true;
|
|
|
+ parent.add(mesh);
|
|
|
|
|
|
- ] );
|
|
|
+ }
|
|
|
|
|
|
- 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);
|
|
|
- //mesh.children[0].doubleSided = true;
|
|
|
- parent.add( mesh );
|
|
|
+ // 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),
|
|
|
|
|
|
- }
|
|
|
+ // 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.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),
|
|
|
+ // var extrudePath = new THREE.HeartCurve(3.5);
|
|
|
+ // var extrudePath = new THREE.VivianiCurve(70);
|
|
|
+ // var extrudePath = new THREE.KnotCurve();
|
|
|
+ //extrudePath = new THREE.HelixCurve();
|
|
|
|
|
|
- // 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.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 extrudePath = new THREE.HeartCurve( 3.5 );
|
|
|
- // var extrudePath = new THREE.VivianiCurve( 70 );
|
|
|
- // var extrudePath = new THREE.KnotCurve();
|
|
|
- // extrudePath = new THREE.HelixCurve();
|
|
|
+ extrudePath = new THREE.TrefoilKnot();
|
|
|
+ // extrudePath = new THREE.TorusKnot(20);
|
|
|
+ // extrudePath = new THREE.CinquefoilKnot(20);
|
|
|
+ // extrudePath = new THREE.TrefoilPolynomialKnot(14);
|
|
|
+ // extrudePath = new THREE.FigureEightPolynomialKnot();
|
|
|
+ // extrudePath = new THREE.DecoratedTorusKnot4a();
|
|
|
+ // extrudePath = new THREE.DecoratedTorusKnot4b();
|
|
|
+ // extrudePath = new THREE.DecoratedTorusKnot5a();
|
|
|
+ // extrudePath = new THREE.DecoratedTorusKnot5c();
|
|
|
|
|
|
- // 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 closed = true;
|
|
|
+ var debug = true;
|
|
|
+ var tube = new THREE.TubeGeometry(extrudePath, 100, 2, 3, closed, debug);
|
|
|
|
|
|
- extrudePath = new THREE.TrefoilKnot();
|
|
|
- // extrudePath = new THREE.TorusKnot( 20 );
|
|
|
- // extrudePath = new THREE.CinquefoilKnot( 20 );
|
|
|
- // extrudePath = new THREE.TrefoilPolynomialKnot( 14 );
|
|
|
- // extrudePath = new THREE.FigureEightPolynomialKnot();
|
|
|
- // extrudePath = new THREE.DecoratedTorusKnot4a();
|
|
|
- // extrudePath = new THREE.DecoratedTorusKnot4b();
|
|
|
- // extrudePath = new THREE.DecoratedTorusKnot5a();
|
|
|
- // extrudePath = new THREE.DecoratedTorusKnot5c();
|
|
|
+ addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 6);
|
|
|
|
|
|
- var closed = true;
|
|
|
- var debug = true;
|
|
|
- var tube = new THREE.TubeGeometry( extrudePath, 100, 2, 3, closed, debug );
|
|
|
|
|
|
- addGeometry(tube, 0xff00ff, 0, -80, 0, 0, 0, 0, 6);
|
|
|
+ //
|
|
|
+ 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.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ container.appendChild(stats.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);
|
|
|
|
|
|
- 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;
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- //
|
|
|
+ //
|
|
|
|
|
|
- function animate() {
|
|
|
+ function animate() {
|
|
|
|
|
|
- requestAnimationFrame( animate );
|
|
|
+ requestAnimationFrame(animate);
|
|
|
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
+ render();
|
|
|
+ stats.update();
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function render() {
|
|
|
+ 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>
|
|
|
+ </body>
|
|
|
</html>
|
Mr.doob