threejs实现悬浮通道置换放大效果-html代码-BFW代码库

threejs实现悬浮通道置换放大效果

代码语言：html

所属分类：悬停

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

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

    <title> - ThreeJS Hover Zoom Channel Displacement</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

    </style>

</head>
<body>
    <canvas id="canvas"></canvas>

    <script src='//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
    <script src='//repo.bfw.wiki/bfwrepo/js/three.js'></script>
   
    <script>
        function _defineProperty(obj, key, value) {
            if (key in obj) {
                Object.defineProperty(obj, key, {
                    value: value, enumerable: true, configurable: true, writable: true
                });
            } else {
                obj[key] = value;
            }return obj;
        } /* Utils ------------------------------------------ */
        const textureLoader = new THREE.TextureLoader();

        /* Scene Subjects ----------------------------------------- */
        class PlaneSubject {



            constructor(scene) {
                _defineProperty(this, "raycaster", new THREE.Raycaster()); _defineProperty(this, "scene", null);
                const geometry = new THREE.PlaneBufferGeometry(5, 7);
                const material = new THREE.ShaderMaterial({
                    vertexShader: `
                    varying vec2 vUv;

                    void main() {
                    vUv = uv;

                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                    }
                    `,
                    fragmentShader: `
                    precision highp float;

                    uniform sampler2D texture;
                    uniform float imageAspectRatio;
                    uniform float aspectRatio;
                    uniform float opacity;
                    uniform float hover;
                    varying vec2 vUv;

                    float exponentialInOut(float t) {
                    return t == 0.0 || t == 1.0
                    ? t
                    : t < 0.5
                    ? +0.5 * pow(2.0, (20.0 * t) - 10.0)
                    : -0.5 * pow(2.0, 10.0 - (t * 20.0)) + 1.0;
                    }

                    void main() {
                    vec2 uv = vUv;

                    // fix aspectRatio
                    float u = imageAspectRatio/aspectRatio;
                    if(imageAspectRatio > aspectRatio) {
                    u = 1. / u;
                    }

                    uv.y *= u;
                    uv.y -= (u)/2.-.5;

                    // hover effect
                    float zoomLevel = .2;
                    float hoverLevel = exponentialInOut(min(1., (distance(vec2(.5), uv) * hover) + hover));
                    uv *= 1. - zoomLevel * hoverLevel;
                    uv += zoomLevel / 2. * hoverLevel;
                    uv = clamp(uv, 0., 1.);
                    vec4 color = texture2D(texture, uv);
                    if(hoverLevel > 0.) {
                    hoverLevel = 1.-abs(hoverLevel-.5)*2.;
                    //Pixel displace
                    uv.y += color.r * hoverLevel * .05;
                    color = texture2D(texture, uv);
                    // RGBshift
                    color.r = texture2D(texture, uv+(hoverLevel)*0.01).r;
                    color.g = texture2D(texture, uv-(hoverLevel)*0.01).g;
                    }

                    gl_FragColor = mix(vec4(1.,1.,1.,opacity), color, opacity);
                    }
                    `,
                    uniforms: {
                        texture: {
                            type: 't',
                            value: textureLoader.load('//repo.bfw.wiki/bfwrepo/image/5fc1b6b06272d.png')
                        },

                        imageAspectRatio: {
                            type: 'f',
                            value: 1.0
                        },

                        aspectRatio: {
                            type: 'f',
                            value: 1.0
                        },

                        opacity: {
                            type: 'f',
                            value: 1.0
                        },

                        hover: {
                            type: 'f',
                            value: 0.0
                        }
                    }
                });



                material.transparent = true;
                const mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

                this.scene = scene;
                this.mesh = mesh;
            }

            update(delta, time) {}

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