three实现三维蝴蝶飞舞动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维蝴蝶飞舞动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&family=Macondo+Swash+Caps&display=swap');
html, body {
    min-height: 100%;
}
body{
  overflow: hidden;
  margin: 0;
  background: linear-gradient(#face8D 75%, aquamarine);
}
canvas{
  position: absolute;
}

#butterfly{
  position: absolute;
  font-family: 'Macondo Swash Caps', cursive;
  font-size: 10vh;
  width: 100%;
  text-align: center;
  bottom: 1vh;
  color: maroon;
}

#player{
  position: absolute;
  opacity: 0.1;
}
#player:hover{
  opacity: 1;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
</style>



</head>

<body >
  <canvas id="cnv"></canvas>
<div id="butterfly" class="unselectable">Schmetterling</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script>
<script type="importmap">
  {
    "imports": {
        "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/150/three.module.js",
   
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/"
    }
  }
</script>
 
      <script type="module">
// https://discourse.threejs.org/t/schmetterling-butterfly-no-webgl-depth-sorting/48919
import {
Box2,
BufferGeometry,
BufferAttribute,
Color,
MathUtils,
Object3D,
Path,
PerspectiveCamera,
Scene,
Vector2,
Vector3,
Matrix4 } from
"three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

console.clear();

class Material {
  constructor(fill = "gray", stroke = "black", lineWidth = 2, closed = true) {
    this.fill = fill;
    this.stroke = stroke;
    this.lineWidth = lineWidth;
    this.closed = closed;
  }}


class Drawable extends Object3D {
  constructor() {
    super();
    this.isDrawable = true;
  }}


class Polygon extends Drawable {
  constructor(geometry, material) {
    super();
    this.geometry = geometry;
    this.material = material;
    this.isPolygon = true;
  }}


class Circle extends Drawable {
  constructor(radius = 1, material) {
    super();
    this.radius = radius;
    this.material = material;
    this.isCircle = true;
    this.vertices = [new Vector3(), new Vector3(0, 1, 0).setLength(radius)];
  }}


class CanvasRenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.context = this.canvas.getContext("2d");
    this.halfSize = new Vector3();
    this.renderList = [];
    this._projectScreenMatrix = new Matrix4();
    this._vector3 = new Vector3();
  }

  setSize(width, height) {
    this.canvas.width = width;
    this.canvas.height = height;
    this.halfSize.set(width, height, 0).multiplyScalar(0.5);
  }

  sort(scene) {
    this.renderList = [];
    scene.traverse(child => {
      if (child.isDrawable) {
        this._vector3.
        setFromMatrixPosition(child.matrixWorld).
        applyMatrix4(this._projectScreenMatrix);
        this.renderList.push({
          object: child,
          z: this._vector3.z });

      }
    });
    this.renderList.sort((a, b) => b.z - a.z);
  }

  render(scene, camera) {
    scene.updateMatrixWorld();
    camera.updateMatrixWorld();
    this._projectScreenMatrix.multiplyMatrices(
    camera.projectionMatrix,
    camera.matrixWorldInverse);

    this.sort(scene);

    let c = this.context;
    let v3 = this._vector3;
    let hs = this.halfSize;
    c.clearRect(0, 0, this.canvas.width, this.canvas.height);

    for (let i = 0; i < this.renderList.length; i++) {
      let listObject = this.renderList[i].object;
      let z = this.renderList[i].z;
      let g = listObject.geometry;
      let m = listObject.material;

      if (listObject.isPolygon) {
        c.beginPath();
        toScreen(listObject, 0, v3, hs);
        c.moveTo(v3.x, v3.y);
        for (let j = 1; j < g.attributes.position.count; j++) {
          toScreen(listObject, j, v3, hs);
          c.lineTo(v3.x, v3.y);
        }
        if (m.closed) {
          c.closePath();
        }
        if (m.fill) {
          c.fillStyle = m.fill;
          c.fill();
        }
        if (m.stroke) {
          c.lineWidth = m.lineWidth;
          c.str.........完整代码请登录后点击上方下载按钮下载查看