基于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({
    .........完整代码请登录后点击上方下载按钮下载查看