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

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

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