three打造一个三维隧道穿梭动画效果代码
代码语言:html
所属分类:三维
代码描述:three打造一个三维隧道穿梭动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; background: black; overflow: hidden; height: 100%; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <canvas width="586" height="286" style="width: 586px; height: 286px;"></canvas> <script> //===================================================== Create a WebGL renderer var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas"), powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); //===================================================== Create an empty scene 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], [1, 262.5], [270.9, 281.9], [345.5, 212.8], [178, 155.7], [240.3, 72.3], [153.4, 0.6], [52.6, 53.3], [68.5, 185.5]]; //===================================================== Convert the array of.........完整代码请登录后点击上方下载按钮下载查看
网友评论0