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

代码语言：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 geometry = new THREE.SphereBufferGeometry(2, 16, 16);
      const material = new THREE.MeshBasicMaterial({
        color: 0xf82c91 });

      const mesh = new THREE.Mesh(geometry, material);
      group.add(mesh);
      group.position.set(0, -5, 0);
      this.lights.push(group);
    }
  }
  createAmbient() {
    this.ambient = new THREE.AmbientLight(0xffffff, 0.03);
  }
  createSun() {
    this.sun = new THREE.SpotLight(0xffffff); // 0.1
    this.sun.intensity = 0.4;
    this.sun.distance = 100;
    this.sun.angle = Math.PI;
    this.sun.penumbra = 2.0;
    this.sun.decay = 1.0;
    this.sun.position.set(0, 50, 0);
  }}

class World {
  constructor(opts) {
    this.opts = Object.assign({}, World.defaultOpts, opts);
    this.init();
  }
  init() {
    this.initScene();
    this.initCamera();
    this.initRenderer();
    this.addRenderer();
    window.addEventListener("resize", this.resizeHandler.bind(this));
  }
  initScene() {
    this.scene = new THREE.Scene();
  }
  initCamera() {
    this.camera = new THREE.PerspectiveCamera(
    this.opts.camFov,
    window.innerWidth / window.innerHeight,
    this.opts.camNear,
    this.opts.camFar);

    this.camera.position.set(
    this.opts.camPosition.x,
    this.opts.camPosition.y,
    this.opts.camPosition.z);

    this.camera.lookAt(this.scene.position);
    this.scene.add(this.camera);
  }
  initRenderer() {
    this.renderer = new THREE.WebGLRenderer({
      alpha: true,
      anti.........完整代码请登录后点击上方下载按钮下载查看