pencil模拟森林俯视镜头移动动画效果代码-html代码-BFW代码库

pencil模拟森林俯视镜头移动动画效果代码

代码语言：html

所属分类：动画

代码描述：pencil模拟森林俯视镜头移动动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
}

canvas {
  background-color: #020703;
}
</style>

  
  
</head>

<body translate="no">
  
  
      <script type="module">
import {
  Scene,
  Color,
  Container,
  Image,
  Position,
  NetworkEvent,
  Math as M
} from "//repo.bfw.wiki/bfwrepo/js/module/pencil.esm.js";

const { map, random } = M;
const { floor, min } = Math;

const baseColor = new Color("#020703");
const topColor = new Color("#92935A");

const maxTries = 100;
const minRadius = 25;
const maxRadius = 60;
const minTreeHeight = 5;
const maxTreeHeight = 10;
const moveSpeed = 1;

const canvas = document.createElement("canvas");
const mult = 75;
canvas.width = 16 * mult;
canvas.height = 9 * mult;
document.body.appendChild(canvas);

const scene = new Scene(canvas);
const { width, height } = scene;
const bottomCenter = new Position(width / 2, height);

const image = new Image(undefined, "//repo.bfw.wiki/bfwrepo/images/leaf11111111.png");

class Tree extends Container {
  constructor(position, radius, stacks) {
    super(position);
    this.radius = radius;

    for (let i = 0; i < stacks; ++i) {
      this.add(
        new Image(undefined, image, {
          scale: map(i, 0, stacks, (radius / image.width) * 2, 0),
          tint: baseColor.clone().lerp(topColor, (i + 1.........完整代码请登录后点击上方下载按钮下载查看