threejs-minecraft/404.html at master · arduinka55055/threejs-minecraft · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>404 Error</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            canvas {
                position: fixed;
                z-index: 5;
                right: 0px;
                left: 0px;
                top: 0px;
                bottom: 0px;
            }

            #banner {
                z-index: 10;
                position: fixed;
                top: 5%;
                bottom: 5%;
                left: 20%;
                right: 20%;
            }

            #title {
                color: yellow;
                text-align: center;
                font-size: 6vw;
            }

            #about {
                color: yellow;
                text-align: center;
                font-size: 2vw;
            }
        </style>
    </head>

    <body>
        <script src="/static/three.js"></script>
        <div id='banner'>
            <div id='title'>404</div>
            <div id='about'>Not Found</div>
        </div>

        <script>
            var camera, scene, renderer;
            var prevTime = performance.now();
            var cubeMaterial = new THREE.MeshToonMaterial({ map: new THREE.TextureLoader().load('/static/textures/404.png') });
            var boxes = [];
            var boxGeometry = new THREE.BoxBufferGeometry(20, 20, 20);
            initsys();
            animate();

            function initsys() {
                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
                camera.position.y += 100;
                camera.position.z += 350;
                scene = new THREE.Scene();
                scene.add(camera);

                // objects
                var light = new THREE.HemisphereLight(0xeedddd, 0x777788, 0.75);
                light.position.set(0.5, 20, 0.75);
                scene.add(light);
                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);
                window.addEventListener('resize', onWindowResize, false);
            }


            function animate() {
                requestAnimationFrame(animate);
                var time = performance.now();
                var delta = (time - prevTime) / 1000;
                camera.position.x = camera.position.x * Math.cos(delta * 0.2) - camera.position.z * Math.sin(delta * 0.2);
                camera.position.z = camera.position.z * Math.cos(delta * 0.2) + camera.position.x * Math.sin(delta * 0.2);
                camera.lookAt(new THREE.Vector3(scene.position.x, scene.position.y + 100, scene.position.z));
                for (var i = 0; i < boxes.length; i++) {
                    boxes[i].position.y -= boxes[i].rndvel;
                    if (boxes[i].position.y <= -500) {
                        scene.remove(boxes[i]);
                        boxes.splice(i, 1);
                    }
                }
                if (boxes.length < 1000) {
                    for (var counter = 0; counter < Math.round(Math.random() * 10); counter++) {
                        var box = new THREE.Mesh(boxGeometry, cubeMaterial);
                        box.position.x = (Math.random() - 0.5) * 1000;
                        box.position.y = Math.random() * 500;
                        box.position.z = (Math.random() - 0.5) * 1000;
                        box.rndvel = Math.random() * 5 + 0.5;
                        scene.add(box);
                        boxes.push(box);
                    }
                }
                prevTime = time;
                renderer.render(scene, camera);
            }


            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
        </script>
    </body>

    </html>