three实现三维环面内的三叶结艺术线框几何体效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维环面内的三叶结艺术线框几何体效果代码
代码标签: three 三维 环面 三叶结 艺术 线框 几何体
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); * { margin: 0; padding: 0; } body { font-family: "Asap", sans-serif; position: relative; width: 100%; height: 100%; text-align: center; background: #222; } #contents { position: relative; color: white; z-index: 1; } h1 { position: fixed; bottom: 1vw; left: 1vw; font-size: 7vw; } canvas { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; z-index: 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body > <div id="contents"> <h1>Math Art Animation</h1> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Tween.16.7.0.js"></script> <script > /*! TrefoilKnotInsideTorus.js Copyright (c) 2023 Wakana Y.K. URL:https://codepen.io/wakana-k/pen/wvxqPeL */ !function () { "use strict"; function t(t, n) { (u = new THREE.TorusKnotGeometry(w, w / 6, c, p, t, n)).rotateX(-Math.PI / 2), 3 == n ? u.rotateX(-Math.PI / 5) : u.rotateX(-Math.PI / 8); let i = u.getAttribute("position"),o = []; for (let t = 0; t < i.count; t++) { h.fromBufferAttribute(i, t); let n = new THREE.Vector3(h.x - m.x, h.y - m.y, h.z - m.z); (h = e(n)).set(h.x, h.y, h.z), u.getAttribute("position").setXYZ(t, h.x, h.y, h.z), o.push(h.x, h.y, h.z); } return u.verticesNeedUpdate = !0, u.attributes.position.needsUpdate = !0, u.computeBoundingBox(), u.computeBoundingSphere(), [u, o]; } function e(t) { let e = 1 / t.length(); return t.setLength(e), t; } function n() { o.aspect = window.innerWidth / window.innerHeight, o.updateProjectionMatrix(), a.setSize(window.innerWidth, window.innerHeight); } const i = 5; let o,r,a,s,u,d,E,w,l,c = 1200,p = 50,h = new THREE.Ve.........完整代码请登录后点击上方下载按钮下载查看
网友评论0