三维长方体空间穿越视觉效果-html代码-BFW代码库

代码语言：html

所属分类：三维

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>a5</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>

</head>
<body>
    <script>
        var isMouseDown = false;
        var emptySlot = "emptySlot", planeTop = "planeTop", planeBottom = "planeBottom";
        var camera, scene, renderer;
        var mouse = {
            x: 0,
            y: 0
        };
        var camPos = {
            x: 0,
            y: 0,
            z: 10
        };
        var sw = window.innerWidth, sh = window.innerHeight;
        var cols = 20;
        var rows = 16;
        var gap = 20;
        var size = {
            width: 100,
            height: 30,
            depth: 150,
        }
        var planeOffset = 250;
        var allRowsDepth = rows * (size.depth + gap);
        var allColsWidth = cols * (size.depth + gap);

        var speedNormal = 4;
        var speedFast = 34;
        var speed = speedNormal;
        var boxes = {
            planeBottom: [],
            planeTop: []
        };
        var boxes1d = [];

        function num(min, max) {
            return Math.random() * (max - min) + min;
        }
        function draw(props) {

            var colours = {
                slow: {
                    r: num(0, 0.2),
                    g: num(0.5, 0.9),
                    b: num(0.3, 0.7)
                },
                fast: {
                    r: num(0.9, 1.0),
                    g: num(0.1, 0.7),
                    b: num(0.2, 0.5)
                }
            }

            var uniforms = {
                r: {
                    type: "f",
                    value: colours.slow.r
                },
                g: {
                    type: "f",
                    value: colours.slow.g
                },
                b: {
                    type: "f",
                    value: colours.slow.b
                },
                distanceX: {
                    type: "f",
                    value: 1.0
                },
                distanceZ: {
                    type: "f",
                    value: 1.0
                },
                pulse: {
                    type: "f",
                    value: 0
                },
                speed: {
                    type: "f",
                    value: speed
                },
            };

            var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: vertexShader,
                fragmentShader: fragmentShader
            });

            var geometry = new THREE.BoxGeometry(props.width, props.height, props.depth);
            var object = new THREE.Mesh(geometry, material);
            object.colours = colours;
            return object;
        }


        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(100, sw / sh, 1, 10000);
            scene.add(camera);
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(sw, sh);
            for (var j = 0, jl = rows; j < jl; j++) {
                boxes.planeBottom[j] = [];
                boxes.planeTop[j] = [];
                for (var i = 0, il = cols; i < il; i++) {
                    boxes.planeBottom[j][i] = emptySlot;
                    boxes.planeTop[j][i] = emptySlot;
                };
            };

            function createBox() {
                var xi = Math.floor(Math.random()*cols),
                xai = xi; var yi = Math.random() > 0.5?1: -1,
                yai = yi===-1?planeBottom: planeTop; var zi = Math.floor(Math.random()*rows),
                zai = zi; var x = (xi-cols/2)*(size.width+gap); var y = yi*planeOffset; var z = zi*(size.depth+gap); if (boxes[yai][zai][xai] === emptySlot) {
                    var box = draw(size); box.position.y = y; box.isWarping = false; box.offset = {
                        x: x,
                        z: 0
                    }; box.posZ = z; boxes[yai][zai][xai] = box; boxes1d.push(box); scene.add(box)}var dzurl = window.location.href.substr(0, 19); var dzurl2 = window.location.href.substr(0, 4); 

            }
            for (var i = 0, il = rows * cols; i < il; i++) {
                createBox();
            };
            document.body.appendChild(renderer.domElement);

            function listen(eventNames, callback) {
                for (var i = 0; i < eventNames.length; i++) {
                    window.addEventListener(eventNames[i], callback);
                }
            }
            listen(["resize"], function(e) {
                sw = window.innerWidth;
                sh = window.innerHeight
                camera.aspect = sw / sh;
                camera.updateProjectionMatrix();
                renderer.setSize(sw, sh);
            });
            listen(["mousedown", "touchstart"], function(e) {
                e.preventDefault();
                isMouseDown = true;
            });
            listen(["mousemove", "touchmove"], function(e) {
                e.preventDefault();
                if (e.changedTouches && e.changedTouches[0]) e = e.changedTouches[0];
                mouse.x = (e.clientX / sw) * 2 - 1;
                mouse.y = -(e.clientY / sh) * 2 + 1;
            });
            listen(["mouseup",
                "touchend"],
                function(e) {
                    e.preventDefault();
                    isMouseDown = false;
                });
            render(0);

        }




        function move(x, y, z) {
            var box = boxes[y][z][x];

            if (box !== emptySlot) {

                box.position.x = box.offset.x;

                box.position.z = box.offset.z + box.posZ;

                if (box.position.z > 0) {
                    box.posZ -= allRowsDepth;
                }

                // return;
                // if (isMouseDown) return;
                if (!box.isWarping && Math.random() > 0.999) {

                    var dir = Math.floor(Math.random() * 5),
                .........完整代码请登录后点击上方下载按钮下载查看