three实现红色发光小球从管中洞中跳跃动画效果代码-html代码-BFW代码库

three实现红色发光小球从管中洞中跳跃动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现红色发光小球从管中洞中跳跃动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

canvas {
  display: block;
}
</style>




</head>

<body>
  <div data-stage></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script >
console.clear();
class App {
  constructor(opts) {
    this.opts = Object.assign({}, App.defaultOpts, opts);
    this.world = new World();
    this.init();
  }
  init() {
    this.threeEnvironment();
    window.requestAnimationFrame(this.animate.bind(this));
  }
  threeEnvironment() {
    const light = new Light();
    this.world.sceneAdd(light.ambient);
    this.world.sceneAdd(light.sun);
    const lights = lightBalls(this.world, light.lights);
    const composition = new Composition({
      sideLength: 10,
      amount: 15,
      radius: 6,
      thickness: 2,
      offset: 0.3 });

    this.world.sceneAdd(composition.tubes);
  }
  animate() {
    this.world.renderer.render(this.world.scene, this.world.camera);
    window.requestAnimationFra.........完整代码请登录后点击上方下载按钮下载查看