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.position.z = 400; //===================================================== resize window.addEventListener("resize", function () { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }); //===================================================== Array of points var points = [ [68.5, 185.5], [160.6, 3.3], [68.5, 185.5]]; //===================================================== Convert the array of points into vertices for (var i = 0; i < points.length; i++) { var x = points[i][0]; var y = 0; var z = points[i][1]; p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0