三维文字聚集动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; background: #A1DBB2; } div, canvas { position: absolute; } #text { z-index: 200; display: none; } input { z-index: 400; position: absolute; text-transform: uppercase; width: 90%; bottom: 20px; background: none; outline: none; border: none; font-size: 30px; color: #222; font-weight: bold; text-align: center; border-bottom: 1px solid #333; left: 5%; } </style> </head> <body translate="no"> <div id="stage"></div> <canvas id="text" width="700" height="200"></canvas> <input id="input" type="text" value="BFW.WIKI" /> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script> <script> var height, width, container, scene, camera, renderer, particles = [], mouseVector = new THREE.Vector3(0, 0, 0), mousePos = new THREE.Vector3(0, 0, 0), cameraLookAt = new THREE.Vector3(0, 0, 0), cameraTarget = new THREE.Vector3(0, 0, 800), textCanvas, textCtx, textPixels = [], input; var colors = ['#F7A541', '#F45D4C', '#FA2E59', '#4783c3', '#9c6cb7']; function initStage() { width = window.innerWidth; height = window.innerHeight; container = document.getElementById('stage'); window.addEventListener('resize', resize); container.addEventListener('mousemove', mousemove); } function initScene() { scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); container.appendChild(renderer.domElement); } function randomPos(vector) { var radius = width * 3; var centerX = 0; var centerY = 0; // ensure that p(r) ~ r instead of p(r) ~ constant var r = width + radius * Math.random(); var angle = Math.random() * Math.PI * 2; // compute desired coordinates vector.x = centerX + r * Math.cos(angle); vector.y = centerY + r * Math.sin(angle); } function initCamera() { fieldOfView = 75; aspectRatio = width / height; nearPlane = 1; farPlane = 3000; camera = new THREE.PerspectiveCamer.........完整代码请登录后点击上方下载按钮下载查看
网友评论0