bedlam.html

<!DOCTYPE html>
<html>
<head>
    <title>Bedlam</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Faster+One&display=swap');

        body {
            color: white;
            margin: 0;
            text-align: center;
            background-color: black;
            cursor: crosshair;
            font-family: 'Faster One', cursive;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        p {
            color: rgba(255,255,255, 0.5);
            font-family: 'Courier New', Courier, monospace;
        }
        .header {
            position: fixed; /* Add this to keep the header on top */
            top: 42%;
            width: 100%;
            z-index: 10; /* Ensure the header is above the canvas */
        }
        .header-content {
            padding: 50px;
            background-color: rgba(0,0,0,0.3);
            border-radius: 10px;
        }
        .footer {
            bottom:3%;
        }
        .description {
            color: gray;
            padding-top: 50px;
        }
        a, a:hover, a:visited {
            color: white;
            text-decoration: none;
        }
        .disable-selection {
            user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        h1::after {
            content: 'Tokyo';
            font-size: 12px;
            position:absolute;
            top: 3px;
            padding-left: 5px;
            font-weight: 400;
        }
        h2::after {
            content: '2';
            font-size: 12px;
            position:absolute;
            top: 14px;
            padding-left: 5px;
        }
        .btn {
            border-radius: 100px;
            padding: 10px 25px;
        }
        #three-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
</head>
<body>

    <div class="container-fluid fixed-top header disable-selection">
        <div class="row">
            <div class="col"></div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col">
                        <h1>
                            <strong>Bedlam</strong>
                        </h1>
                        <p class="small">– Press Enter –</p>
                    </div>
                </div>
            </div>
            <div class="col"></div>
        </div>
    </div>
    
    <div id="three-container"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script>
        var renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize( window.innerWidth, window.innerHeight );

        if (window.innerWidth > 800) {
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.shadowMap.needsUpdate = true;
        };

        const threeContainer = document.getElementById('three-container');
        if (threeContainer) {
            threeContainer.appendChild(renderer.domElement);
        } else {
            document.body.appendChild(renderer.domElement);
        }

        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        };

        var camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 500 );
        camera.position.set(0, 2, 15);

        var scene = new THREE.Scene();
        var city = new THREE.Object3D();
        var smoke = new THREE.Object3D();
        var town = new THREE.Object3D();

        var createCarPos = true;
        var uSpeed = 0.001;
        var setcolor = 0xED7F23;

        scene.background = new THREE.Color(setcolor);
        scene.fog = new THREE.Fog(setcolor, 10, 16);

        function mathRandom(num = 8) {
            var numValue = - Math.random() * num + Math.random() * num;
            return numValue;
        };

        var setTintNum = true;
        function setTintColor() {
            if (setTintNum) {
                setTintNum = false;
                var setColor = 0x000000;
            } else {
                setTintNum = true;
                var setColor = 0x000000;
            };
            return setColor;
        };

        function init() {
            var segments = 2;
            var textureLoader = new THREE.TextureLoader();
            var textures = [
                textureLoader.load('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&auto=format&fit=crop&w=827&q=80'),
                textureLoader.load('https://images.unsplash.com/photo-1464802686167-b939a6910659?ixlib=rb-1.2.1&auto=format&fit=crop&w=1033&q=80'),
                textureLoader.load('https://images.unsplash.com/photo-1504333638930-c8787321eee0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
                textureLoader.load('https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=696&q=80')
            ];

            for (var i = 1; i<100; i++) {
                var geometry;

                if (i % 13 === 0) {
                    var radius = 0.5;
                    var height = 1;
                    var radialSegments = 32;
                    geometry = new THREE.CylinderGeometry(radius, radius, height, radialSegments);
                } else {
                    geometry = new THREE.BoxGeometry(1, 1, 1, segments, segments, segments);
                }

                var randomTexture = textures[Math.floor(Math.random() * textures.length)];
                var material = new THREE.MeshStandardMaterial({
                    color:setTintColor(),
                    wireframe:false,
                    shading: THREE.SmoothShading,
                    side:THREE.DoubleSide});
                
                var adMaterial = new THREE.MeshBasicMaterial({
                    map: randomTexture,
                    emissive: new THREE.Color(0xFFFFFF),
                    emissiveMap: randomTexture,
                    emissiveIntensity: 1.5,
                    side: THREE.DoubleSide
                });
                
                var materials = [
                    material,
                    material,
                    material,
                    material,
                    material,
                    material
                ];

                var adFaceIndex = [0, 1, 4, 5][Math.floor(Math.random() * 4)];
                materials[adFaceIndex] = adMaterial;
                
                var cube = new THREE.Mesh(geometry, materials);

                var wmaterial = new THREE.MeshLambertMaterial({
                    color:0xFFFFFF,
                    wireframe:true,
                    transparent:true,
                    opacity: 0.03,
                    side:THREE.DoubleSide,
                    shading:THREE.FlatShading
                });

                var wire = new THREE.Mesh(geometry, wmaterial);
                var floor = new THREE.Mesh(geometry, material);
                var wfloor = new THREE.Mesh(geometry, wmaterial);
                
                cube.add(wfloor);
                cube.castShadow = true;
                cube.receiveShadow = true;
                cube.rotationValue = 0.1+Math.abs(mathRandom(8));
                floor.scale.y = 0.05;
                cube.scale.y = 1+Math.abs(mathRandom(8));
                var cubeWidth = 0.9;
                cube.scale.x = cube.scale.z = cubeWidth+mathRandom(1-cubeWidth);
                cube.position.x = Math.round(mathRandom());
                cube.position.z = Math.round(mathRandom());
                
                floor.position.set(cube.position.x, 0, cube.position.z)
                
                town.add(floor);
                town.add(cube);
            };
            
            const carColors = [0xED7F23, 0x2A2A73, 0x0C8040, 0xEA2524];
            var gparticular = new THREE.CircleGeometry(0.01, 3);
            var aparticular = 5;
            
            for (var h = 1; h < 300; h++) {
                const randomColor = carColors[Math.floor(Math.random() * carColors.length)];
                var gmaterial = new THREE.MeshToonMaterial({color: randomColor, side:THREE.DoubleSide});
                var particular = new THREE.Mesh(gparticular, gmaterial);
                particular.position.set(mathRandom(aparticular), mathRandom(aparticular),mathRandom(aparticular));
                particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
                smoke.add(particular);
            };
            
            var pmaterial = new THREE.MeshPhongMaterial({
                color:0x000000,
                side:THREE.DoubleSide,
                roughness: 10,
                metalness: 0.6,
                opacity:0.9,
                transparent:true});
            var pgeometry = new THREE.PlaneGeometry(60,60);
            var pelement = new THREE.Mesh(pgeometry, pmaterial);
            pelement.rotation.x = -90 * Math.PI / 180;
            pelement.position.y = -0.001;
            pelement.receiveShadow = true;
            city.add(pelement);
        };

        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2(), INTERSECTED;
        var intersected;

        function onMouseMove(event) {
            event.preventDefault();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        };

        function onDocumentTouchStart( event ) {
            if ( event.touches.length == 1 ) {
                event.preventDefault();
                mouse.x = event.touches[ 0 ].pageX -  window.innerWidth / 2;
                mouse.y = event.touches[ 0 ].pageY - window.innerHeight / 2;
            };
        };

        function onDocumentTouchMove( event ) {
            if ( event.touches.length == 1 ) {
                event.preventDefault();
                mouse.x = event.touches[ 0 ].pageX -  window.innerWidth / 2;
                mouse.y = event.touches[ 0 ].pageY - window.innerHeight / 2;
            }
        }
        window.addEventListener('mousemove', onMouseMove, false);
        window.addEventListener('touchstart', onDocumentTouchStart, false );
        window.addEventListener('touchmove', onDocumentTouchMove, false );

        var ambientLight = new THREE.AmbientLight(0xFFFFFF, 4);
        var lightFront = new THREE.SpotLight(0xFFFFFF, 20, 10);
        var lightBack = new THREE.PointLight(0xFFFFFF, 0.5);

        var spotLightHelper = new THREE.SpotLightHelper( lightFront );

        lightFront.rotation.x = 45 * Math.PI / 180;
        lightFront.rotation.z = -45 * Math.PI / 180;
        lightFront.position.set(5, 5, 5);
        lightFront.castShadow = true;
        lightFront.shadow.mapSize.width = 6000;
        lightFront.shadow.mapSize.height = lightFront.shadow.mapSize.width;
        lightFront.penumbra = 0.1;
        lightBack.position.set(0,6,0);

        smoke.position.y = 2;

        scene.add(ambientLight);
        city.add(lightFront);
        scene.add(lightBack);
        scene.add(city);
        city.add(smoke);
        city.add(town);

        var gridHelper = new THREE.GridHelper( 60, 120, 0xEA2524, 0x000000);
        city.add( gridHelper );

        var generateCar = function() {
        }

        var createCars = function(cScale = 2, cPos = 20, cColor = 0xEA2524) {
            var cMat = new THREE.MeshToonMaterial({color:cColor, side:THREE.DoubleSide});
            var cGeo = new THREE.BoxGeometry(1, cScale/40, cScale/40);
            var cElem = new THREE.Mesh(cGeo, cMat);
            var cAmp = 3;

            if (createCarPos) {
                createCarPos = false;
                cElem.position.x = -cPos;
                cElem.position.z = (mathRandom(cAmp));

                TweenMax.to(cElem.position, 3, {x:cPos, repeat:-1, yoyo:true, delay:mathRandom(3)});
            } else {
                createCarPos = true;
                cElem.position.x = (mathRandom(cAmp));
                cElem.position.z = -cPos;
                cElem.rotation.y = 90 * Math.PI / 180;
            
                TweenMax.to(cElem.position, 5, {z:cPos, repeat:-1, yoyo:true, delay:mathRandom(3), ease:Power1.easeInOut});
            };
            cElem.receiveShadow = true;
            cElem.castShadow = true;
            cElem.position.y = Math.abs(mathRandom(5));
            city.add(cElem);
        };

        var generateLines = function() {
            for (var i = 0; i<60; i++) {
                createCars(0.21, 20);
            };
        };

        var cameraSet = function() {
            createCars(0.1, 20, 0xEA2524);
        };

        var animate = function() {
            var time = Date.now() * 0.00005;
            requestAnimationFrame(animate);
            
            city.rotation.y -= ((mouse.x * 8) - camera.rotation.y) * uSpeed;
            city.rotation.x -= (-(mouse.y * 2) - camera.rotation.x) * uSpeed;
            if (city.rotation.x < -0.05) city.rotation.x = -0.05;
            else if (city.rotation.x>1) city.rotation.x = 1;
            var cityRotation = Math.sin(Date.now() / 5000) * 13;
            
            for ( let i = 0, l = town.children.length; i < l; i ++ ) {
                var object = town.children[ i ];
            }
            
            smoke.rotation.y += 0.01;
            smoke.rotation.x += 0.01;
            
            camera.lookAt(city.position);
            renderer.render( scene, camera );  
        }

        generateLines();
        init();
        animate();
    </script>
</body>
</html>