threejs+webgl实现立体球形线条穿梭动画效果代码-html代码-BFW代码库

threejs+webgl实现立体球形线条穿梭动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs+webgl实现立体球形线条穿梭动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
  
  
  
<style>
* {
    margin: 0;
    padding: 0;
  }
  
  html {
    height: 100%;
    background-color: #000; 
  }
  
  body {  
    margin: 0;
    height: 100%;
    font-family: 'Noto Sans JP', sans-serif;
  }

  #myCanvas {
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
  }
  #myCanvas canvas {  
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

  
  


</head>

<body>

    <div id="myCanvas"></div>


      <script id="fragmentShader" type="x-shader/x-fragment">

        #define TWO_PI 6.2831853072
        #define PI 3.14159265359

        precision highp float;
        uniform vec2 resolution;
        uniform float time;
        varying vec2 vUv;


        void main(void) {
        vec2 uv = - 1.0 + 2.0 * vUv;
        float t = time*0.05;
        float lineWidth = 0.001;

        vec3 color = vec3(0.0);
        for(int j = 0; j < 3; j++){
          for(int i=0; i < 10; i++){
            color[j] += lineWidth*(float(i)/4.0) / abs(fract(t*0.2 - 0.001*float(j)*4.0+float(i)*0.1)*5.0 - length(uv));   
            //color += lineWidth / abs(fract(t*0.2 - 0.1*float(i))*4.0 - length(uv));
          }
        }

        gl_FragColor = vec4(color[0],color[1],color[2],1.0);
    	}
</script>

		<script id="vertexShader" type="x-shader/x-vertex">

			varying vec2 vUv;

			void main()
			{
				vUv = uv;
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
				gl_Position = projectionMatrix * mvPosition;
			}

		</script>


  
      <script  >

class Canvas {
  constructor() {


    this.sc.........完整代码请登录后点击上方下载按钮下载查看