three实现webgl三维线圈光影小球动画效果代码-html代码-BFW代码库

three实现webgl三维线圈光影小球动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现webgl三维线圈光影小球动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<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>
  <!-- partial:index.partial.html -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>

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

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

			uniform float time;

			varying vec2 vUv;

			float snow(vec2 uv,float scale)
			{
				float _t = time*0.1;
				uv.x+=_t/scale;

				uv*=scale;
			  vec2 s=floor(uv);
			  vec2 f=fract(uv);
			  vec2 p;
			  float k=40.;
			  float d;
				p=sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;
			  d=length(p);
			  k=min(d,k);
				k=smoothstep(0.,k,sin(f.x+f.y)*0.006); // particle
			  return k;
			}

			void main(void) {

				vec2 uv = - 1.0 + 2.0 * vUv;
				uv.x += sin(uv.x*0.1+time*0.01);
			  uv.x *= 0.01;
				uv.y += sin(time*0.01);
				float c=0.0;
				for(float i = 0.0; i < 10.0; i++){
					uv.x += i*0.01;
					c+=snow(uv,i*2.0);
				}

				vec3 finalColor=(vec3(uv.x,uv.y,0.9))*c*50.0;
				gl_FragColor = vec4(finalColor,1);

        
			}

		</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(0x0b0115);

  
    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();

   
    this.pointLight = new THREE.PointLight(0xffffff);
    this.pointLight.position.set(40, 40, 0); // 
    this.scene.add(this.pointLight);

    this.ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.9);
    this.scene.add(this.ambientLight);

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