three实现文字碎片化粒子化漩涡消散出现动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现文字碎片化粒子化漩涡消散出现动画效果代码,结合了bas、TextGeometry、FontUtils、pnltri、TweenMax等插件一起实现,点击拖动可看到效果。
代码标签: three 文字 碎片化 粒子化 漩涡 消散 出现 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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> <!-- partial:index.partial.html --> <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> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.min.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 > 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('BFW WIKI', { 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].........完整代码请登录后点击上方下载按钮下载查看
网友评论0