three实现红色发光小球从管中洞中跳跃动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现红色发光小球从管中洞中跳跃动画效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0