js实现三维点状构成的彩色立方体旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:js实现三维点状构成的彩色立方体旋转动画效果代码
代码标签: js 三维 点状 构成 彩色 立方体 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } button:focus { outline: 0; } html, body { height: 100%; } body { background-color: #07080d; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #6e7888; font-family: "Poppins", sans-serif; } #text { display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; z-index: -1; font-family: "Poppins", sans-serif; text-transform: unset; overflow: hidden; } #text h1 { color: #0f1014; font-size: 20vw; letter-spacing: -50px; } #author { width: 100%; bottom: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: inherit; text-transform: uppercase; padding-left: 35px; color: #fff; margin-top: 20px; } #author span { font-size: 10px; margin-left: 20px; color: inherit; letter-spacing: 4px; } #author h1 { font-size: 25px; } .wrapper { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; margin-bottom: 20px; } @media (max-width: 1000px) { #text h1 { font-size: 40vw; } } </style> </head> <body > <div class="wrapper"> <canvas id="main"></canvas> <div id='text'> <h1 id="fps">Calculating..</h1> </div> </div> <script > /** * 3D cube created with vanilla Javascript by FARIAT. **/ "use strict"; const CTX = document.querySelector("#main").getContext("2d"); /* Play with these variables to get different results. */ let enableBlur = true; /* Enable it if your computer can handle it. */ let enableTrans = true; /* Transparency is enabled by default. */ let blurIntensity = 20; /* Blur intensity / amount. */ let margin = 12; /* Distance Between each vertex. */ let verCount = 10; /* The number of vertices per axis. */ let verRadius = 7; /* Radius of vertices. */ let focalLength = 320; /* How close the camera from the projected vertices. */ let rotX = 0.01; /* Rotation amount on X axis. */ let rotY = 0.02; /* Rotation amount on Y axis. */ let rotZ = 0.01; /* Rotation amount on Z axis. */ let pos = { x: 0, y: 0, z: 0 }; const _W = CTX.canvas.width = 400; const _H = CTX.canvas.height = 400; const _HALF_W = _W * 0.5; const _HALF_H = _H * 0.5; const _PI = Math.PI; const _PI2 = Math.PI * 2; let _cube; let _helpers = { random(min, max) { return min + Math.random() * (max - min); }, rangeScale(num, inMin, inMax, outMin, outMax) { return (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin; } }; class Vec { constructor(x = 0, y = 0, z = 0) { this.x = x; this.y = y; this.z = z; }} class _Cube { constructor() { this.pos = pos; this.margin = margin; this.rad = verRadius; this.FOCAL_LENGTH = focalLength; this.verCount = verCount; this.verData = []; let start = 0; let end = this.verCount; for (let x = start; x < end; x += 1) { for (let y = start; y < end; y .........完整代码请登录后点击上方下载按钮下载查看
网友评论0