三维文字聚集动画效果-html代码-BFW代码库

三维文字聚集动画效果

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