three实现时空穿越隧道虫洞动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现时空穿越隧道虫洞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; overflow: hidden; background-color: black; } .Signature { position: absolute; z-index: 100; bottom: 20px; right: 20px; color: white; line-height: .2; font-size: .7em; font-family: Open Sans, sans-serif; } </style> </head> <body> <div id="webgl-tunnel"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.3.6.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script> $(function () { var main = new Main(); $(window).resize(function () { main.resize(); }); }); function Main() { // Distance travelled in the tunnel by the camera this.cameraTravelledStep = 1; // Camera rotation around its z-axis (moving through the tunnel) this.cameraRotationStep = 0.0; // Creating the renderer this.webGLRenderer = new THREE.WebGLRenderer(); this.webGLRenderer.setSize(window.innerWidth, window.innerHeight); $("#webgl-tunnel").append(this.webGLRenderer.domElement); // Creating the scene this.scene = new THREE.Scene(); // Setting up the camera this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // Creating the tunnel and adding it to the scene this.geom = this.createTunnelGeometry(30, 512, 30, 80); this.tunnel = this.createTunnelMesh(this.geom); this.scene.add(this.tunnel); this.render(); } // Declaring constants Main.cameraTravelIncrement = 0.0002; Main.cameraRotationIncrement = 0.0025; Main.prototype.createTunnelGeometry = function (nbPoints, segments, radius, radiusSegments) { // Creating an array of points that we'll use for the spline creation var points = []; var previousPoint = new THREE.Vector3(0, 0, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0