canvas三维3d波动效果-html代码-BFW代码库

canvas三维3d波动效果

代码语言：html

所属分类：三维

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
canvas {
	position: absolute;
	top: 0;
	left: 0;
}
</style>

</head>
<body translate="no">
<canvas id=c></canvas>

<script >
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),

opts = {
  dist: 15, //units
  sideLen: 25, //points
  waveIncrement: .02,
  distanceWaveFactor: 50,
  colorIncrement: 1,
  colorMultiplier: 100,

  baseY: 60,
  addedY: 50,
  depth: 400,
  maxDepth: 700,

  rotYVel: .01,

  focalLength: 250,
  vanishPoint: {
    x: w / 2,
    y: h / 2 } },


calc = {

  difX: Math.sqrt(3) * opts.dist, // height of a equilateral triangle
  difZ: opts.dist * 3 / 2, // side of a triangle ( because it goes down to a vertex ) then half a side of the triangle in the hex below: s + s/2 = s*3/2
  translate: {
    x: -Math.sqrt(3) * opts.dist * opts.sideLen / 2,
    z: -opts.dist * 3 / 2 * opts.sideLen / 2,
    y: opts.baseY },

  rotY: {} },


rotY = 0,
points = [],
tick = 0,
waveTick = 0,
colorTick = 0;

function setup() {

  // put hexagon points in the array
  for (var i = 0; i < opts.sideLen; ++i) {
    var shiftZ = (i + 1) % 2 / 2;

    for (var j = 0; j < opts.sideLen; ++j) {

      var shiftX = j % 2 / 2;
      points.push(new Point(
      (j + shiftZ) * calc.difX + calc.translate.x,
      calc.translate.y,
      (i + shiftX) * calc.difZ + calc.translate.z));

      // connect
      if (points[i * opts.sideLen + j - 1] && j > 0)
      points[points.length - 1].link(points[i * opts.sideLen + j - 1]);

      if (points[(i - 1) * opts.sideLen + j])
      points[points.length - 1].link(points[(i - 1) * opts.sideLen + j]);
    }
  }
}

fu.........完整代码请登录后点击上方下载按钮下载查看