基于three的3d悬浮切换图片效果-html代码-BFW代码库

基于three的3d悬浮切换图片效果

代码语言：html

所属分类：三维

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

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

    <title> ThreeJS Texture Transition Hover Effect</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

    </style>

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

    <script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
    <script src='http://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;

                    varying vec2 vUv;

                    uniform float dispFactor;

                    uniform sampler2D disp;
                    uniform sampler2D tex1;
                    uniform sampler2D tex2;

                    void main() {
                    vec2 uv = vUv;

                    vec4 disp = texture2D(disp, uv);

                    float r = dispFactor * (1.0 + 0.05 * 2.0) - 0.05;
                    float mixit = clamp((disp.r - r) * (1.0 / 0.05), 0.0, 1.0);

                    vec4 _tex1 = texture2D(tex1, uv);
                    vec4 _tex2 = texture2D(tex2, uv);

                    if (_tex1.a < 0.5)discard;
                    if (_tex2.a < 0.5)discard;

                    gl_FragColor = mix(_tex2, _tex1, mixit);
                    }
                    `,
                    uniforms: {
                        dispFactor: {
                            type: 'f',
                            value: 0.0
                        },

                        tex1: {
                            type: 't',
                            value: textureLoader.load('https://images.unsplash.com/photo-1515372039744-b8f02a3ae446?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
                        },

                        tex2: {
                            type: 't',
                            value: textureLoader.load('https://images.unsplash.com/photo-1504276048855-f3d60e69632f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
                        },

                        disp: {
                            type: 't',
                            value: textureLoader.load('https://images.unsplash.com/photo-1517431397609-ab159afd52ed?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ')
                        }
                    }
                });



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

                scene.add(mesh);

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

            update(delta, time) {}

            mouseHandler(mouse, camera) {
                const {
                    scene, mesh, raycaster
                } = this;

                raycaster.setFromCamera(mouse, camera);

                const intersects = raycaster.intersectObjects(scene.children);

                TweenMax.to(mesh.material.uniforms.dispFactor, 0.5, {
                    value: intersects.length
            .........完整代码请登录后点击上方下载按钮下载查看