three实现三维原子围绕原子核旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维原子围绕原子核旋转动画效果代码
代码标签: three 三维 原子 围绕 原子核 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import "https://fonts.googleapis.com/css?family=Oswald:300,400,700"; html, body { font-family: "Oswald", sans-serif; margin: 0; width: 100%; height: 100%; background-color: hsla(240, 81%, 8%, 0.81); } h1, h3 { margin: 0; } canvas { mix-blend-mode: screen; cursor: move; } .linebox { position: fixed; width: calc(100% - 30px); height: calc(100% - 30px); border: 4px solid #ddd; left: 50%; top: 50%; transform: translate(-50%, -50%); } .texts { position: fixed; color: #eee; left: 2rem; top: 0.8rem; padding: 0.8rem; } .texts h1 { font-size: 7rem; letter-spacing: 0.24rem; } .texts h3 { letter-spacing: 0.08rem; width: 24rem; font-weight: normal; } </style> </head> <body> <div class="texts"> <h1>ATOM</h1> <h3> An atom is the smallest constituent unit of ordinary matter that has the properties of a chemical element. </h3> </div> <div class="linebox"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.143.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.143.js"></script> <script> let camera, scene, renderer, cameraControl; let group; let el1, el2, el3; function init() { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x090b33, 5, 50); renderer = new THREE.WebGLRenderer({ antiali.........完整代码请登录后点击上方下载按钮下载查看
网友评论0