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.scrollY = 0;

    this.mouse = new THREE.Vector2(0, 0);

    this.w = window.innerWidth;
    this.h = window.innerHeight;


    this.renderer = new THREE.WebGLRenderer({
      antialias: true });

    this.renderer.setSize(this.w, this.h); // 
    this.renderer.setPixelRatio(window.devicePixelRatio); // 
    this.renderer.setClearColor(0x000000);


    const container = document.getElementById("myCanvas");
    container.appendChild(this.renderer.domElement);


    const fov = 50;
    const fovRad = fov / 2 * (Math.PI / 180); // 
    const dist = this.h / 2 / Math.tan(fovRad); // 
    this.camera = new THREE.PerspectiveCamera(fov, this.w / this.h, 1, dist * 2);
    this.camera.position.z = dist; // カメラを遠ざける



    this.scene = new THREE.Scene();

    //uniform
    this.uniforms = {
      "time": { value: 1.0 },
      "resolution": { type: "v2", value: new THREE.Vector2(this.renderer.domElement.width, this.renderer.domElem.........完整代码请登录后点击上方下载按钮下载查看