three实现三维空间ShaderMaterial走光光线动画效果代码-html代码-BFW代码库

three实现三维空间ShaderMaterial走光光线动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维空间ShaderMaterial走光光线动画效果代码

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

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

<head>
  <meta charset="UTF-8">
 <style>
      body { margin: 0; overflow: hidden; }
      canvas { display: block; }
    </style>
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
</head>

  <body>

  
      <script type="module">
import * as THREE from 'https://cdn.skypack.dev/three@0.136.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js';
import { FontLoader } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/geometries/TextGeometry.js';
import { EffectComposer } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/postprocessing/ShaderPass.js';

// Shader code
const vertexShader = `
varying vec2 vUv;

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


const fragmentShader = `
uniform float iTime;
uniform vec2 iResolution;
uniform float factorSpeed;
uniform float factorBold;
varying vec2 vUv;

vec3 palette(float t) {
    vec3 a = vec3(0.577, 0.192, 0.922);
    vec3 b = vec3(0.827, 0.944, 0.565);
    vec3 c = vec3(0.472, 1.541, 1.174);
    vec3 d = vec3(3.973, 5.658, 1.133);
    return a + b * cos(6.28318 * (c * t + d));
}

void main() {
    vec2 fragCoord = vUv * iResolution;
    vec2 uv = (fragCoord * 0.15 - iResolution) / iResolution.y;
    vec3 finalColor = vec3(0.0);
    vec2 uv0 = uv;

    for (float i = 0.0; i < 2.0; i++) {
        uv = uv - sign(iTime) * 0.5;
        float d = min(dot(uv.x, uv.x), 0.5) + exp(-length(uv0));
        vec3 col = palette(length(uv + abs(uv0)) * 0.4 + iTime * 0.4);
        d = sin(d * factorSpeed + iTime) / factorSpeed;
        d = abs(d+d+d)+d;
        d = 0.005 / d;    
        finalColor += col * d * factorBold;
    }
    gl_FragColor = vec4(finalColor, 1.0);
}
`;

const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {
    iTime: { value: 5.0 },
    iResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    factorSpeed: { value: 20.0 },
    factorBold: { value: 3.0 } } });



const RadialVignetteShader = {
  uniforms: {
    "tDiffuse": { value: null },
    "resolution": { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    &quo.........完整代码请登录后点击上方下载按钮下载查看