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

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

代码语言：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) {
.........完整代码请登录后点击上方下载按钮下载查看