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.requestAnimationFrame(this.animate.bind(this));
  }}


App.defaultOpts = {
  debug: false };

function lightBalls(world, meshes) {
  const radius = 12.4;
  const mainTl = new TimelineMax();
  meshes.forEach(function (group) {
    world.sceneAdd(group);
    createAnimation(group);
  });
  function createAnimation(group) {
    const tl = new TimelineMax({
      yoyo: true });

    tl.
    set(group.position, {
      x: THREE.Math.randInt(-2, 2) * radius + radius * 0.5,
      z: THREE.Math.randInt(-2, 2) * radius + radius * 0.5 }).

    to(group.position, 2, {
      y: 18,
      ease: Linear.easeNone }).

    to(
    group.children[0],
    1.2,
    {
      intensity: 4.0,
      distance: 18,
      ease: Linear.easeNone },

    "-=1.2");

    tl.paused(true);
    mainTl.to(
    tl,
    1.2,
    {
      progress: 1,
      ease: SlowMo.ease.config(0.0, 0.1, true),
      onComplete: createAnimation,
      onCompleteParams: [group],
      delay: THREE.Math.randFloat(0, 0.8) },

    mainTl.time());

  }
}
class Light {
  constructor() {
    this.lights = [];
    this.ambient = null;
    this.sun = null;
    this.createLights();
    this.createAmbient();
    this.createSun();
  }
  createLights() {
    for (let i = 0; i < 3; i++) {
      const group = new THREE.Group();
      const light = new THREE.PointLight(0xf82c91);
      light.intensity = 4.0;
      light.distance = 6;
      light.decay = 1.0;
      group.add(light);
      const geom.........完整代码请登录后点击上方下载按钮下载查看