PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码-html代码-BFW代码库

PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码

代码语言：html

所属分类：动画

代码描述：PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #04091c;
}
</style>




</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>   <script >
const loader = new PIXI.Loader();

loader.add(
  "backgroundTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca9014f070d.png"
);
loader.add(
  "waveTexture1",
  "//repo.bfw.wiki/bfwrepo/image/60ca902f983aa.png"
);
loader.add(
  "waveTexture2",
  "//repo.bfw.wiki/bfwrepo/image/60ca903f449c5.png"
);
loader.add(
  "waveTexture3",
  "//repo.bfw.wiki/bfwrepo/image/60ca9049e392c.png"
);
loader.add(
  "shipTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca90605cbe3.png"
);
loader.add(
  "smokeParticleTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca9072369c5.png"
);
loader.add(
  "mistTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca908ea75f7.png"
);

const { innerWidth, innerHeight } = window;

const resolution = window.devicePixelRatio || 1;
const m = 1 / resolution;

const w = innerWidth * m;
const h = innerHeight * m;

const app = new PIXI.Application({
  width: w,
  height: h,
  antialias: true,
  backgroundColor: 0x04091c,
  resolution
});
document.body.appendChild(app.view);

const { sin, cos, atan2, PI } = Math;
const tau = 2 * PI;
const waveStart = -100;
const waveEnd = 2100;
const waveHeight = 10;
const waveWidth = 2.5 * tau;
const rad = (deg) => (deg / 180) * Math.PI;
const range = (n, m = 0) =>
  Array(n)
    .fill(m)
    .map((i, j) => i + j);
const map = (value, sMin, sMax, dMin, dMax) => {
  return dMin + ((value - sMin) / (sMax - sMin)) * (dMax - dMin);
};
const rand = (max, min = 0) => min + Math.random() * (max - min);
const polar = (ang, r = 1, [x = 0, y = 0] = []) => [
  x + r * cos(ang),
  y + r * sin(ang)
];

loader.load((loader, resources) => {
  const scene = new PIXI.Container();
  const shipContainer = new PIXI.Container();
  const smokeParticleContainer = new PIXI.Container();
  const mistParticleContainer = new PIXI.Container();
  app.stage.addChild(scene);

  scene.pivot.set(1000, 500);
  scene.x = w / 2;
  scene.y = h / 2;

  const scale = w / 2000;
  scene.scale.set(scale);

  const background = new PIXI.Sprite(resources.backgroundTexture.texture);

  const numPoints = 100;
  const pointsList = range(3).map(() =>
    range(numPoints + 1).map((i) => {
      const x = map(i, 0, numPoints, waveStart, waveEnd);
      const y = waveHeight * sin(map(i, 0, numPoints, 0, waveWidth));
      return new PIXI.Point(x, y);
    })
  );

  const wave1 = new PIXI.SimpleRope(
    resources.waveTexture1.texture,
    pointsList[2]
  );
  const wave2 = new PIXI.SimpleRope(
    resources.waveTexture2.texture,
    pointsList[1]
  );
  const wave3 = new PIXI.SimpleRope(
    resources.waveTextur.........完整代码请登录后点击上方下载按钮下载查看