threejs实现文字粒子拆分动画效果代码
代码语言:html
所属分类:粒子
代码描述:threejs实现文字粒子拆分动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } #instructions { position: absolute; color: #fff; bottom: 0; padding-bottom: 6px; font-family: sans-serif; width: 100%; text-align: center; pointer-events: none; } </style> </head> <body style="cursor: pointer;"> <div id="three-container"></div> <div id="instructions"> click and drag to control the animation </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/three.bas.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> //capture the window loading window.onload = init; function init() { var root = new THREERoot({ createCameraControls:false, antialias: true, fov:60 }); //setup the scene root.renderer.setClearColor(0x3AAFA9); root.renderer.setPixelRatio(window.devicePixelRatio || 1); root.camera.position.set(0, 0, 400); //create the text animation variable var textAnimation = createTextAnimation(); textAnimation.position.y = -10; root.scene.add(textAnimation); //set the timeline aspects of the animation var tl = new TimelineMax({ repeat:-1, //-1 loop repeatDelay:0.25, yoyo:true }); tl.fromTo(textAnimation, 4, //4 {animationProgress:0.0}, {animationProgress:1.0, ease:Power1.easeInOut}, 0 ); createTweenScrubber(tl); } //create the text to be animated function createTextAnimation() { var geometry = generateTextGeometry('BFW.WIKI', { size:14, height:0, font:'droid sans', weight:'bold', style:'normal', anchor:{x:0.5, y:0.5, z:0.0} }); THREE.BAS.Utils.separateFaces(geometry); return new TextAnimation(geometry); } //mathematical details of the animation 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 faceCount = bufferGeometry.faceCount; var i, i2, i3, i4, v; var size = textGeometry.userData.size; var maxDelayX = 2.0; var maxDelayY = 0.25; var minDuration = 2; var maxDuration = 8; var stretch = 0.25; this.animationDuration = maxDelayX + maxDelayY + maxDuration - 3; this._animationProgress = 0; 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 delayX = Math.max(0, (centroid.x / size.width) * maxDelayX); var delayY = Math.max(0, (1.0 - (centroid.y / size.height)) * maxDelayY); var duration = THREE.Math.randFloat(minDuration, maxDuration); for (v = 0; v < 6; v += 2) { aAnimation.array[i2 + v ] = delayX + delayY + Math.random() * stretch; 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(40, 120); var c0y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0); var c0z = THREE.Math.randFloatSpread(120); var c1x = centroid.x + THREE.Math.randFloat(80, 120) * -1; var c1y = centroid.y + size.height * THREE.Math.randFloat(0.0, 12.0); var c1z = THREE.Math.randFloatSpread(120); 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; } // en.........完整代码请登录后点击上方下载按钮下载查看
网友评论0