three+simplex-noise实现飞机在山林飞行动画效果代码-html代码-BFW代码库

three+simplex-noise实现飞机在山林飞行动画效果代码

代码语言：html

所属分类：动画

代码描述：three+simplex-noise实现飞机在山林飞行动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: radial-gradient(120vw 50vh, #4c0c30 30%, #c90997);
}

.scene {
  height: 100vh;
  display: flex;
  align-items: flex-end;
}
.scene > div {
  width: 100%;
}

canvas {
  vertical-align: bottom;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="scene">
        <div data-module="world">
        </div>
    </div>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.108.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script >
        const simplex = new SimplexNoise(Math.random());

const MAP_SIZE = 100;
const SPEED_DEFAULT = 0.01;

const PI = Math.PI;
const TAU = PI / 2;

const BUMPER_X_SPACING = 2;
const BUMPER_Z_SPACING = 2;

class Generator {
  constructor() {
    this.cellSize = 1;

    const width = MAP_SIZE;
    const height = MAP_SIZE;

    this.cols = Math.ceil(width / this.cellSize);
    this.rows = Math.ceil(height / this.cellSize);

    this.phase = 0;
    this.phaseX = 0;
    this.phaseY = 0;

    this.speed = 0.05;
    this.scale = 0.01;
  }

  setOptions(options = {}) {
    Object.keys(options).forEach(option => {
      if (this[option]) {
        this[option] = options[option];
      }
    });
  }

  update(angle = 0, speedModifier = 0) {
    const speed = SPEED_DEFAULT + speedModifier;
    const numLoops = this.rows * this.cols;

    let x = 0;
    let y = 0;

    const values = [];

    for (let i = 0; i < numLoops; i++) {
      const noiseX = x * this.scale;
      const noiseY = y * this.scale;

      const noiseValue = simplex.noise2D(noiseX - this.phaseX, noiseY - this.phaseY);

      x += this.cellSize;

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