three打造隧道时空穿梭效果
代码语言:html
所属分类:三维
代码描述:three打造隧道时空穿梭效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ overflow: hidden; margin:0; } canvas{ position: absolute; top: 0; left: 0; width: 100%; height:100%; } </style> </head> <body translate="no"> <canvas></canvas> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script> <script > // Get window size var ww = window.innerWidth, wh = window.innerHeight; // Create a WebGL renderer var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas") }); renderer.setSize(ww, wh); // Create an empty scene var scene = new THREE.Scene(); // Create a perpsective camera var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.001, 1000); camera.position.z = 100; // Array of points var points = [ [18.1, 58.2], [93.6, 8.6], [145.3, 89.5], [75.9, 148], [81.7, 90.2], [18.1, 58.2]]; // 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]; points[i] = new THREE.Vector3(x, y, z); } // Create a smooth 3d spline curve from the points var path = new THREE.CatmullRomCurve3(points); // Create the tube geometry from the path // 1st param is the path // 2nd param is the amount of segments we want to make the tube // 3rd param i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0