<script>
THREE.ShapeUtils.triangulateShape = (function () {
var pnlTriangulator = new PNLTRI.Triangulator();
return function triangulateShape(contour, holes) {
return pnlTriangulator.triangulate_polygon([contour].concat(holes));
};
})();
</script>
<div id="three-container"></div>
<div id="instructions">
click and drag to control the animation
</div>
body {
margin: 0;
overflow: hidden;
}
#instructions {
position: absolute;
color: #666;
bottom: 0;
padding-bottom: 6px;
font-family: sans-serif;
width: 100%;
text-align: center;
pointer-events: none;
}
window.onload = init;
function init() {
var root = new THREERoot({
createCameraControls:!true,
antialias:true,
fov:90
});
root.renderer.setClearColor(0x000000);
root.renderer.setPixelRatio(window.devicePixelRatio || 1);
root.camera.position.set(0, 0, 250);
var textAnimation = createTextAnimation();
root.scene.add(textAnimation);
var light = new THREE.DirectionalLight();
light.position.set(0, 0, 1);
root.scene.add(light);
var tl = new TimelineMax({
repeat:-1,
repeatDelay:0.25,
yoyo:true
});
tl.fromTo(textAnimation, 8,
{animationProgress:0.0},
{animationProgress:0.9, ease:Power1.easeInOut},
0
);
// tl.to(root.camera.position, 8, {z:-350, ease:Power1.easeInOut}, 0);
createTweenScrubber(tl);
}
function createTextAnimation() {
var geometry = generateTextGeometry('TWISTING IN THE WIND', {
size:14,
height:4,
font:'droid sans',
weight:'bold',
style:'normal',
curveSegments:24,
bevelSize:1,
bevelThickness:1,
bevelEnabled:true,
anchor:{x:0.5, y:0.5, z:0.5}
});
THREE.BAS.Utils.separateFaces(geometry);
return new TextAnimation(geometry);
}
function generateTextGeometry(text, params) {
var geometry = new THREE.TextGeometry(text, params);
geometry.computeBoundingBox();
geometry.userData = {};
geometry.userData.size = {
width: geometry.boundingBox.max.x - geometry.boundingBox.min.x,
height: geometry.boundingBox.max.y - geometry.boundingBox.min.y,
depth: geometry.boundingBox.max.z - geometry.boundingBox.min.z
};
var anchorX = geometry.userData.size.width * -params.anchor.x;
var anchorY = geometry.userData.size.height * -params.anchor.y;
var anchorZ = geometry.userData.size.depth * -params.anchor.z;
var matrix = new THREE.Matrix4().makeTranslation(anchorX, anchorY, anchorZ);
geometry.applyMatrix(matrix);
return geometry;
}
////////////////////
// CLASSES
////////////////////
function TextAnimation(textGeometry) {
var bufferGeometry = new THREE.BAS.ModelBufferGeometry(textGeometry);
var aAnimation = bufferGeometry.createAttribute('aAnimation', 2);
var aCentroid = bufferGeometry.createAttribute('aCentroid', 3);
var aControl0 = bufferGeometry.createAttribute('aControl0', 3);
var aControl1 = bufferGeometry.createAttribute('aControl1', 3);
var aEndPosition = bufferGeometry.createAttribute('aEndPosition', 3);
var aAxisAngle = bufferGeometry.createAttribute('aAxisAngle', 4);
var faceCount = bufferGeometry.faceCount;
var i, i2, i3, i4, v;
var keys = ['a', 'b', 'c'];
var vDelay = new THREE.Vector3();
var maxDelay = 0.0;
var minDuration = 1.0;
var maxDuration = 1.0;
var stretch = 0.02;
var lengthFactor = 0.02;
var maxLength = textGeometry.boundingBox.max.length();
this.animationDuration = maxDuration + maxDelay + stretch + lengthFactor * maxLength;
this._animationProgress = 0;
var distanceZ = -150;
var axis = new THREE.Vector3();
var angle;
for (i = 0, i2 = 0, i3 = 0, i4 = 0; i < faceCount; i++, i2 += 6, i3 += 9, i4 += 12) {
var face = textGeometry.faces[i];
var centroid = THREE.BAS.Utils.computeCentroid(textGeometry, face);
// animation
var delay = centroid.length() * lengthFactor + Math.random() * maxDelay;
var duration = THREE.Math.randFloat(minDuration, maxDuration);
for (v = 0; v < 6; v += 2) {
var vertex = textGeometry.vertices[face[keys[v * 0.5]]];
var vertexDelay = vDelay.subVectors(centroid, vertex).length() * 0.005;
aAnimation.array[i2 + v ] = delay + vertexDelay + stretch * Math.random();
aAnimation.array[i2 + v + 1] = duration;
}
// centroid
for (v = 0; v < 9; v += 3) {
aCentroid.array[i3 + v ] = centroid.x;
aCentroid.array[i3 + v + 1] = centroid.y;
aCentroid.array[i3 + v + 2] = centroid.z;
}
// ctrl
var c0x = centroid.x * THREE.Math.randFloat(0.0, 1.0);
var c0y = centroid.y * THREE.Math.randFloat(0.0, 1.0);
var c0z = distanceZ * THREE.Math.randFloat(0.5, 0.75);
var c1x = centroid.x * THREE.Math.randFloat(0.0, 1.0);
var c1y = centroid.y * THREE.Math.randFloat(0.0, 1.0);
var c1z = distanceZ * THREE.Math.randFloat(0.75, 1.0);
for (v = 0; v < 9; v += 3) {
aControl0.array[i3 + v ] = c0x;
aControl0.array[i3 + v + 1] = c0y;
aControl0.array[i3 + v + 2] = c0z;
aControl1.array[i3 + v ] = c1x;
aControl1.array[i3 + v + 1] = c1y;
aControl1.array[i3 + v + 2] = c1z;
}
// end position
var x, y, z;
x = 0;
y = 0;
z = distanceZ * THREE.Math.randFloat(0.0, 1.0);
for (v = 0; v < 9; v += 3) {
aEndPosition.array[i3 + v ] = x;
aEndPosition.array[i3 + v + 1] = y;
aEndPosition.array[i3 + v + 2] = z;
}
// axis angle
// axis.x = THREE.Math.randFloatSpread(0.25);
// axis.y = THREE.Math.randFloatSpread(0.25);
// axis.z = 1.0;
axis.x = -centroid.x * 0.05;
axis.y = centroid.y * 0.05;
axis.z = 1;
axis.normalize();
angle = Math.PI * THREE.Math.randFloat(2, 4);
// angle = Math.PI * 4;
for (v = 0; v < 12; v += 4) {
aAxisAngle.array[i4 + v ] = axis.x;
aAxisAngle.array[i4 + v + 1] = axis.y;
aAxisAngle.array[i4 + v + 2] = axis.z;
aAxisAngle.array[i4 + v + 3] = angle;
}
}
var material = new THREE.BAS.PhongAnimationMaterial({
shading: THREE.FlatShading,
side: THREE.DoubleSide,
transparent: true,
uniforms: {
uTime: {type: 'f', value: 0}
},
shaderFunctions: [
THREE.BAS.ShaderChunk['cubic_bezier'],
THREE.BAS.ShaderChunk['ease_out_cubic'],
THREE.BAS.ShaderChunk['quaternion_rotation']
],
shaderParameters: [
'uniform float uTime;',
'uniform vec3 uAxis;',
'uniform float uAngle;',
'attribute vec2 aAnimation;',
'attribute vec3 aCentroid;',
'attribute vec3 aControl0;',
'attribute vec3 aControl1;',
'attribute vec3 aEndPosition;',
'attribute vec4 aAxisAngle;'
],
shaderVertexInit: [
'float tDelay = aAnimation.x;',
'float tDuration = aAnimation.y;',
'float tTime = clamp(uTime - tDelay, 0.0, tDuration);',
'float tProgress = ease(tTime, 0.0, 1.0, tDuration);'
//'float tProgress = tTime / tDuration;'
],
shaderTransformPosition: [
// 'transformed -= aCentroid;',
'transformed *= 1.0 - tProgress;',
// 'transformed += aCentroid;',
'transformed += cubicBezier(transformed, aControl0, aControl1, aEndPosition, tProgress);',
// 'transformed += aEndPosition * tProgress;'
'float angle = aAxisAngle.w * tProgress;',
'vec4 tQuat = quatFromAxisAngle(aAxisAngle.xyz, angle);',
'transformed = rotateVector(tQuat, transformed);'
]
},
{
diffuse: 0xffffff
}
);
THREE.Mesh.call(this, bufferGeometry, material);
this.frustumCulled = false;
}
TextAnimation.prototype = Object.create(THREE.Mesh.prototype);
TextAnimation.prototype.constructor = TextAnimation;
Object.defineProperty(TextAnimation.prototype, 'animationProgress', {
get: function() {
return this._animationProgress;
},
set: function(v) {
this._animationProgress = v;
this.material.uniforms['uTime'].value = this.animationDuration * v;
}
});
function THREERoot(params) {
params = utils.extend({
fov:60,
zNear:1,
zFar:10000,
createCameraControls:true
}, params);
this.renderer = new THREE.WebGLRenderer({
antialias:params.antialias
});
this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
document.getElementById('three-container').appendChild(this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(
params.fov,
window.innerWidth / window.innerHeight,
params.zNear,
params.zfar
);
this.scene = new THREE.Scene();
if (params.createCameraControls) {
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
}
this.resize = this.resize.bind(this);
this.tick = this.tick.bind(this);
this.resize();
this.tick();
window.addEventListener('resize', this.resize, false);
}
THREERoot.prototype = {
tick: function() {
this.update();
this.render();
requestAnimationFrame(this.tick);
},
update: function() {
this.controls && this.controls.update();
},
render: function() {
this.renderer.render(this.scene, this.camera);
},
resize: function() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
};
////////////////////
// UTILS
////////////////////
var utils = {
extend:function(dst, src) {
for (var key in src) {
dst[key] = src[key];
}
return dst;
},
randSign: function() {
return Math.random() > 0.5 ? 1 : -1;
}
};
function createTweenScrubber(tween, seekSpeed) {
seekSpeed = seekSpeed || 0.001;
function stop() {
TweenMax.to(tween, 2, {timeScale:0});
}
function resume() {
TweenMax.to(tween, 2, {timeScale:1});
}
function seek(dx) {
var progress = tween.progress();
var p = THREE.Math.clamp((progress + (dx * seekSpeed)), 0, 1);
tween.progress(p);
}
var _cx = 0;
// desktop
var mouseDown = false;
document.body.style.cursor = 'pointer';
window.addEventListener('mousedown', function(e) {
mouseDown = true;
document.body.style.cursor = 'ew-resize';
_cx = e.clientX;
stop();
});
window.addEventListener('mouseup', function(e) {
mouseDown = false;
document.body.style.cursor = 'pointer';
resume();
});
window.addEventListener('mousemove', function(e) {
if (mouseDown === true) {
var cx = e.clientX;
var dx = cx - _cx;
_cx = cx;
seek(dx);
}
});
// mobile
window.addEventListener('touchstart', function(e) {
_cx = e.touches[0].clientX;
stop();
e.preventDefault();
});
window.addEventListener('touchend', function(e) {
resume();
e.preventDefault();
});
window.addEventListener('touchmove', function(e) {
var cx = e.touches[0].clientX;
var dx = cx - _cx;
_cx = cx;
seek(dx);
e.preventDefault();
});
}
This Pen doesn't use any external CSS resources.