three实现三维多色dna序列动画背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：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
            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.Vec.........完整代码请登录后点击上方下载按钮下载查看