threejs打造光带动画效果-html代码-BFW代码库

threejs打造光带动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> shader_ray</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>

</head>
<body translate="no">

    <div id="container"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = vec4(position, 1.0);
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform float u_time;
        uniform vec2 u_resolution;
        #define speed 0.5
        #define freq 0.4
        #define amp 0.9
        #define phase 1.0
        void main(void) {
            vec2 p = (gl_FragCoord.xy / u_resolution.xy) - 0.2;
            float sx = (amp)*0.8 * sin(10.0 * (freq) * (p.x-phase) - 5. * (speed)*u_time);
            float dy = 4./ (30. * abs(3.9*p.y - sx - 1.2));
            dy += 1.0 / 60.0;
            gl_FragColor = vec4((p.x + 0.4) * dy, 0.9 * dy, dy, 3.0);
        }

    </script>


    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById('container');

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry(2, 2);

            uniforms = {
     .........完整代码请登录后点击上方下载按钮下载查看