three炫酷三维文字粒子分解化沙化动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three炫酷三维文字粒子分解化沙化动画效果代码，结合了TextGeometry、TextGeometry、pnltri、droid_sans_bold、TweenMax、bas共同实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="THREE Text Animation">

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
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;
}
</style>



</head>

<body  >
  <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">
	
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TextGeometry.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FontUtils.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pnltri.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/droid_sans_bold.typeface.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.min.js"></script>
      <script  >
window.onload = init;

function init() {
  var root = new THREERoot({
    createCameraControls: !true,
    antialias: window.devicePixelRatio === 1,
    fov: 60 });


  root.renderer.setClearColor(0x000000);
  root.renderer.setPixelRatio(window.devicePixelRatio || 1);
  root.camera.position.set(0, 0, 600);

  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.5,
    yoyo: true });

  tl.fromTo(textAnimation, 4,
  { animationProgress: 0.0 },
  { animationProgress: 0.6, ease: Power1.easeInOut },
  0);

  tl.fromTo(textAnimation.rotation, 4, { y: 0 }, { y: Math.PI * 2, ease: Power1.easeInOut }, 0);

  createTweenScrubber(tl);
}

function createTextAnimation() {
  var geometry = generateTextGeometry('BFW.WIKI', {
    size: 40,
    height: 12,
    font: 'droid sans',
    weight: 'bold',
    style: 'normal',
    curveSegments: 24,
    bevelSize: 2,
    bevelThickness: 2,
    bevelEnabled: true,
    anchor: { x: 0.5, y: 0.5, z: 0.0 } });


  THREE.BAS.Utils.tessellateRepeat(geometry, 1.0, 2);

  THREE.BAS.Utils.separateFaces(geometry);

  return new TextAnimation(geometry);
}

function generateTextGeometry(text, params) {
  var geometry = new THREE.TextGeometry(text, params);

  geometry.computeBoundingBox();

  var size = geometry.boundingBox.size();
  var anchorX = size.x * -params.anchor.x;
  var anchorY = size.y * -params.anchor.y;
  var anchorZ = size.z * -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 aEndPosition = bufferGeometry.createAttribute('aEndPosition', 3);
  var aAxisAngle = bufferGeometry.createAttribute('aAxisAngle', 4);

  var faceCount = bufferGeometry.faceCount;
  var i, i2, i3, i4, v;

  var maxDelay = 0.0;
  var minDuration = 1.0;
  var maxDuration = 1.0;
  var stretch = 0.05;
  var lengthFactor = 0.001;
  var maxLength = textGeometry.boundingBox.max.length();

  this.animationDuration = maxDuration + maxDelay + stretch + lengthFactor * maxLength;
  this._animationProgress = 0;

  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);
    var centroidN = new THREE.Vector3().copy(centroid).normalize();

    // animation
    var delay = (maxLength - centroid.length()) * lengthFactor;
    var duration = THREE.Math.randFloat(minDuration, maxDuration);

    for (v = 0; v < 6; v += 2) {
      aAnimation.array[i2 + v] = delay + stretch * Math.random();
      aAnimation.array[i2 + v + 1] = duration;
    }

    // end position
    var point = utils.fibSpherePoint(i, faceCount, 200);

    for (v = 0; v < 9; v += 3) {
      aEndPosition.array[i3 + v] = point.x;
      aEndPosition.array[i3 + v + 1] = point.y;
      aEndPosition.array[i3 + v + 2] = point.z;
    }

    // axis angle
    axis.x = centroidN.x;
    axis.y = -centroidN.y;
    axis.z = -centroidN.z;

    axis.normalize();

    angle = Math.PI * THREE.Math.randFloat(0.5, 2.0);

    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({
    sh.........完整代码请登录后点击上方下载按钮下载查看