three实现三维多色dna序列动画背景效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维多色dna序列动画背景效果代码
代码标签: three 三维 多色 dna 序列 动画 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> html, body, canvas { margin: 0; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script> <div></div> <script> function addNote(shade) { var style = "#gm-signature{font-family:Helvetica,Arial,sans-serif;display:block;position:fixed;z-index:99999;bottom:2rem;right:1rem;line-height:50px;border-radius:2px;color:#444;text-transform:uppercase;font-weight:700;font-size:10px;-webkit-animation:gm-signature-in 500ms cubic-bezier(0,1.2,1,1);animation:gm-signature-in 500ms cubic-bezier(0,1.2,1,1);opacity:.6}#gm-signature strong{position:absolute;right:50%;width:200px;text-align:right;padding-right:8px;opacity:0;-webkit-transition:right 200ms,opacity 200ms;transition:right 200ms,opacity 200ms;z-index:-1;pointer-events:none}#gm-signature:hover{opacity:1}#gm-signature:hover strong{opacity:1;right:100%}#gm-signature .fill-1{fill:#fff}#gm-signature .fill-2,#gm-signature.gm-signature-light .fill-1{fill:#000}#gm-signature.gm-signature-light strong{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.1)}#gm-signature.gm-signature-light .fill-2{fill:#fff}#gm-signature a{text-decoration:none;color:#444!important;height:20px;display:block;padding:4px}#gm-signature img{border-radius:50%}#gm-signature img,#gm-signature svg{vertical-align:middle}#gm-signature .codepen-logo,#gm-signature img{width:50px;height:50px}#gm-signature @-webkit-keyframes gm-signature-in{from{-webkit-transform:translateX(2rem);transform:translateX(2rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:.6}}@keyframes gm-signature-in{from{-webkit-transform:translateX(2rem);transform:translateX(2rem);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:.6}}"; var signature = "" var _container, _signature, _style; if (!shade) { shade = "light" } if (shade == "dark") { shade = "" } else { shade = "light" } _style = document.createElement("style"); _style.innerHTML = style; _signature = document.createElement("div"); _signature.setAttribute("id", "gm-signature"); _signature.className = "gm-signature-" + shade; _signature.innerHTML = signature; _container = document.createElement("div"); _container.appendChild(_signature); document.body.appendChild(_style); document.body.appendChild(_container); return true } var scene = new THREE.Scene(); scene.fog = new THREE.Fog('#000033', 200, 300); scene.background = new THREE.Color( '#000033' ); const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); addNote() /* var renderPass = new THREE.RenderPass(scene, camera); var horizontalShaderPass = new THREE.ShaderPass(THREE.HorizontalBlurShader); //horizontalShaderPass.uniforms.h.value = 2.5 / 512; horizontalShaderPass.renderToScreen = true; var verticalShaderPass = new THREE.ShaderPass(THREE.VerticalBlurShader); //verticalShaderPass.uniforms.v.value = 2.5 / 512; verticalShaderPass.renderToScreen = true; composer = new THREE.EffectComposer(renderer); composer.addPass(renderPass); composer.addPass(horizontalShaderPass); composer.addPass(verticalShaderPass); */ //const controls = new THREE.OrbitControls(camera, renderer.domElement); //controls.target = new THREE.Vector3(0,0,0); //controls.enableZoom = true; function rotateAround(point, center, angle) { angle = (angle) * (Math.PI/180); // Convert to radians var rotatedX = Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y-center.y) + center.x; var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y; return {x: rotatedX, y: rotatedY} } function randint(min, max) { return Math.floor(Math.random() * max) + min } function RGB(r, g, b) { function colorcheck(c) { if (c > 255) { c = 255 } if (c < 0) { c = 0 } return c } r = colorcheck(r) g = colorcheck(g) b = colorcheck(b) return 'rgb(' + r + ',' + g + ',' + b + ')' } function rgb2hex(rgb){ rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i); return (rgb && rgb.length === 4) ? "0x" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : ''; } function rgb2color(r, g, b) { return rgb2hex(RGB(r, g, b)) } var color = {} color.r = 0 color.g = 0 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0