HTML5canvas+three.js实现生物分子圆点及DNA螺旋线动画效果源码.zip资源-CSDN文库

共2个文件

html：1个

js：1个

版权申诉

html5

186 浏览量 2022-11-02 23:56:13 上传评论收藏 131KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 canvas+three.js实现生物分子圆点及DNA螺旋线动画效果源码.zip （2个子文件）

132686860930910271

index.html 14KB

three.min.js 495KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>three.js Dna动态效果</title> <style> html, body, canvas { margin: 0; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }</style> </head> <body> <script src='js/three.min.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 color.b = 255 color.rs = 0 color.gs = 0 color.bs = 0 color.rt = 0 color.gt = 0 color.bt = 255 function randoffset(off) { return randint(-off, off*2) } function createCanvasMaterial(color, size) { var matCanvas = document.createElement('canvas'); matCanvas.width = matCanvas.height = size; var matContext = matCanvas.getContext('2d'); // create exture object from canvas. var texture = new THREE.Texture(matCanvas); // Draw a circle var center = size / 2; matContext.beginPath(); matContext.arc(center, center, size/2, 0, 2 * Math.PI, false); matContext.closePath(); matContext.fillStyle = color; matContext.fill(); // need to set needsUpdate texture.needsUpdate = true; // return a texture made from the canvas return texture; } //Create elements here: var rotation_matrix = new THREE.Matrix4().makeRotationX(0.01); var DNAs = [] function newDNA(position, rotation, length) { var DNA = [] DNA.doublehelix = {} DNA.ladder = {} //DNA.doublehelix.count = 10 * length DNA.doublehelix.particles = new THREE.Geometry(); DNA.ladder.particles = new THREE.Geometry(); DNA.doublehelix.colors = []; DNA.ladder.colors = []; var addp = 0 var height = 0 var density = 20 var curve = 7 // now create the individual particles for (var p = 0; p < length*density; p++) { // create a particle with random height += 1 / density var pX = 5, pY = height + (randoffset(10)/10), pZ = 0 point = {x: pX, y: 0} center = {x: 0, y: 0} addp += 180 + (curve / density) r = rotateAround(point, center, addp) addp %= 360 pX = r.x pZ = r.y var particle = new THREE.Vector3(pX, pY, pZ) // add it to the geometry DNA.doublehelix.particles.vertices.push(particle); } var addp = 0 var height = 0 var ladderspace = 4 for (var p = 0; p <= length / ladderspace; p++) { // create a particle with random for (var i = 0; i < density*2; i++) { var pX = randoffset(50)/10, pY = height + (randoffset(4)/10), pZ = 0 point = {x: pX, y: 0} center = {x: 0, y: 0} addp += 180 r = rotateAround(point, center, addp) addp %= 360 pX = r.x pZ = r.y var particle = new THREE.Vector3(pX, pY, pZ) // add it to the geometry DNA.ladder.particles.vertices.push(particle); } addp += curve * ladderspace addp %= 360 height += ladderspace } // material DNA.doublehelix.material = new THREE.PointsMaterial({ size: 1, color: '#0000ff', transparent: true, depthWrite: false, opacity: 0.5 }); DNA.ladder.material = new THREE.PointsMaterial({ size: 1, color: '#0000ff', transparent: true, depthWrite: false, opacity: 0.5 }); // create the particle system DNA.doublehelix.system = new THREE.Points( DNA.doublehelix.particles, DNA.doublehelix.material); DNA.ladder.system = new THREE.Points( DNA.ladder.particles, DNA.ladder.material); // add it to the scene DNA.doublehelix.syste

评论收藏

内容反馈

版权申诉