three实现空间扭曲动画效果代码
代码语言:html
所属分类:动画
代码描述:three实现空间扭曲动画效果代码,结合了particles实现对视频内容的扭曲特效。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; background: black; overflow: hidden; height: 100%; animation:none; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles.2.0.js"></script> <canvas> <video id="video" autoplay loop muted crossOrigin="anonymous" > <source src="//repo.bfw.wiki/bfwrepo/video/62269e88bd1f1.mp4" type="video/mp4"> </video> </canvas> <script > var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas"), powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); var scene = new THREE.Scene(); //===================================================== Create a perpsective camera var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 1000); camera.positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0