* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #09131f;
  font-family: Arial, Helvetica, sans-serif;
}

/* ================================
   HUD
================================ */

.hud {
  position: fixed;
  z-index: 10;

top: 28px;
  left: 30px;

color: white;

pointer-events: none;
}

.label {
  font-size: 10px;
  letter-spacing: 3px;
  opacity: 0.45;
}

h1 {
  margin: 8px 0 5px;

font-size: 34px;
  font-weight: 500;
  letter-spacing: -1px;
}

.hud p {
  margin: 0;

font-size: 12px;

color: rgba(255,255,255,0.55);
}

/* ================================
   BUILDING INFO
================================ */

.floor-info {
  position: fixed;
  z-index: 10;

right: 30px;
  bottom: 30px;

padding: 14px 18px;

color: white;

background: rgba(5,15,25,0.55);

border: 1px solid rgba(255,255,255,0.15);

border-radius: 12px;

backdrop-filter: blur(12px);

pointer-events: none;
}

.floor-info span {
  display: block;

font-size: 9px;

letter-spacing: 2px;

opacity: 0.4;
}

.floor-info strong {
  display: block;

margin-top: 5px;

font-size: 13px;

font-weight: 500;
}

/* ================================
   THREE.JS CANVAS
================================ */

canvas {
  position: fixed;

left: 0;
  top: 0;

width: 100%;
  height: 100%;

display: block;

cursor: grab;
}

canvas:active {
  cursor: grabbing;
}

/* =====================================================
   SCENE
===================================================== */

const scene = new THREE.Scene();

scene.background = new THREE.Color(0x09131f);

/* =====================================================
   CAMERA
===================================================== */

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.set(18, 13, 22);

camera.lookAt(0, 8, 0);

/* =====================================================
   RENDERER
===================================================== */

const renderer = new THREE.WebGLRenderer({
  antialias: true
});

renderer.setSize(
  window.innerWidth,
  window.innerHeight
);

renderer.setPixelRatio(
  Math.min(window.devicePixelRatio, 2)
);

renderer.shadowMap.enabled = true;

renderer.shadowMap.type =
  THREE.PCFSoftShadowMap;

document.body.appendChild(
  renderer.domElement
);

/* =====================================================
   LIGHTING
===================================================== */

/* Main light */

const sunlight =
  new THREE.DirectionalLight(
    0xffffff,
    3
  );

sunlight.position.set(
  10,
  25,
  15
);

sunlight.castShadow = true;

scene.add(sunlight);

/* Ambient light */

const ambient =
  new THREE.HemisphereLight(
    0x9ac7ff,
    0x18202b,
    2
  );

scene.add(ambient);

/* Blue city light */

const blueLight =
  new THREE.PointLight(
    0x168cff,
    25,
    50
  );

blueLight.position.set(
  -12,
  8,
  8
);

scene.add(blueLight);

/* Warm city light */

const warmLight =
  new THREE.PointLight(
    0xff8c42,
    18,
    40
  );

warmLight.position.set(
  12,
  8,
  -8
);

scene.add(warmLight);

/* =====================================================
   MATERIALS
===================================================== */

const concrete =
  new THREE.MeshStandardMaterial({
    color: 0x343d46,
    roughness: 0.75
  });

const darkMetal =
  new THREE.MeshStandardMaterial({
    color: 0x151d25,
    metalness: 0.85,
    roughness: 0.25
  });

const glass =
  new THREE.MeshStandardMaterial({
    color: 0x17658c,
    metalness: 0.25,
    roughness: 0.18
  });

const glowingWindow =
  new THREE.MeshBasicMaterial({
    color: 0xffc46b
  });

const groundMaterial =
  new THREE.MeshStandardMaterial({
    color: 0x1a222a,
    roughness: 0.9
  });

/* =====================================================
   BUILDING GROUP
===================================================== */

const building =
  new THREE.Group();

scene.add(building);

/* =====================================================
   BUILDING DIMENSIONS
===================================================== */

const width = 9;
const depth = 7;

const floorHeight = 0.75;

const floors = 24;

const buildingHeight =
  floorHeight * floors;

/* =====================================================
   MAIN BUILDING
===================================================== */

const towerGeometry =
  new THREE.BoxGeometry(
    width,
    buildingHeight,
    depth
  );

const tower =
  new THREE.Mesh(
    towerGeometry,
    concrete
  );

tower.position.y =
  buildingHeight / 2;

tower.castShadow = true;
tower.receiveShadow = true;

building.add(tower);

/* =====================================================
   FRONT WINDOWS
===================================================== */

const windows = [];

for (
  let floor = 0;
  floor < floors;
  floor++
) {

const y =
    floor * floorHeight +
    floorHeight / 2;

for (
    let column = 0;
    column < 5;
    column++
  ) {

const x =
      -3.35 +
      column * 1.675;

const windowGeometry =
      new THREE.BoxGeometry(
        1.25,
        0.5,
        0.06
      );

/*
       Every window gets its own material
       so we can randomly turn lights on/off.
    */

const material =
      new THREE.MeshStandardMaterial({
        color: 0x245d75,
        roughness: 0.25,
        metalness: 0.2,
        emissive: 0x102b38,
        emissiveIntensity: 0.5
      });

const window =
      new THREE.Mesh(
        windowGeometry,
        material
      );

window.position.set(
      x,
      y,
      depth / 2 + 0.04
    );

building.add(window);

windows.push(window);

}

/* =====================================================
   BACK WINDOWS
===================================================== */

for (
  let floor = 0;
  floor < floors;
  floor++
) {

const y =
    floor * floorHeight +
    floorHeight / 2;

for (
    let column = 0;
    column < 5;
    column++
  ) {

const x =
      -3.35 +
      column * 1.675;

const material =
      new THREE.MeshStandardMaterial({
        color: 0x245d75,
        roughness: 0.25,
        metalness: 0.2,
        emissive: 0x102b38,
        emissiveIntensity: 0.5
      });

const window =
      new THREE.Mesh(
        new THREE.BoxGeometry(
          1.25,
          0.5,
          0.06
        ),
        material
      );

window.position.set(
      x,
      y,
      -depth / 2 - 0.04
    );

window.rotation.y =
      Math.PI;

building.add(window);

windows.push(window);

}

/* =====================================================
   SIDE WINDOWS
===================================================== */

for (
  let floor = 0;
  floor < floors;
  floor++
) {

const y =
    floor * floorHeight +
    floorHeight / 2;

for (
    let column = 0;
    column < 3;
    column++
  ) {

const z =
      -2 +
      column * 2;

/* Right side */

const rightMaterial =
      new THREE.MeshStandardMaterial({
        color: 0x245d75,
        emissive: 0x102b38,
        emissiveIntensity: 0.5
      });

const right =
      new THREE.Mesh(
        new THREE.BoxGeometry(
          1.7,
          0.5,
          1.1
        ),
        rightMaterial
      );

right.position.set(
      width / 2 + 0.04,
      y,
      z
    );

building.add(right);

windows.push(right);

/* Left side */

const leftMaterial =
      rightMaterial.clone();

const left =
      new THREE.Mesh(
        new THREE.BoxGeometry(
          1.7,
          0.5,
          1.1
        ),
        leftMaterial
      );

left.position.set(
      -width / 2 - 0.04,
      y,
      z
    );

building.add(left);

windows.push(left);

}

/* =====================================================
   FLOOR LINES
===================================================== */

for (
  let i = 0;
  i <= floors;
  i++
) {

const y =
    i * floorHeight;

const floorLine =
    new THREE.Mesh(

new THREE.BoxGeometry(
        width + 0.25,
        0.07,
        depth + 0.25
      ),

darkMetal

);

floorLine.position.y =
    y;

building.add(
    floorLine
  );

}

/* =====================================================
   VERTICAL STRUCTURAL COLUMNS
===================================================== */

const columnLocations = [

[-width / 2, -depth / 2],
  [-width / 2, depth / 2],
  [width / 2, -depth / 2],
  [width / 2, depth / 2]

];

columnLocations.forEach(
  function(pos) {

const column =
      new THREE.Mesh(

new THREE.BoxGeometry(
          0.22,
          buildingHeight + 0.2,
          0.22
        ),

darkMetal

);

column.position.set(
      pos[0],
      buildingHeight / 2,
      pos[1]
    );

building.add(column);

}
);

/* =====================================================
   BALCONIES
===================================================== */

for (
  let floor = 3;
  floor < floors;
  floor += 4
) {

const y =
    floor * floorHeight;

const balcony =
    new THREE.Mesh(

new THREE.BoxGeometry(
        width + 1.3,
        0.15,
        1.5
      ),

darkMetal

);

balcony.position.set(
    0,
    y,
    depth / 2 + 0.7
  );

balcony.castShadow = true;

building.add(
    balcony
  );

/* Balcony railing */

const railing =
    new THREE.Mesh(

new THREE.BoxGeometry(
        width + 1.3,
        0.65,
        0.06
      ),

glass

);

railing.position.set(
    0,
    y + 0.35,
    depth / 2 + 1.42
  );

building.add(
    railing
  );

}

/* =====================================================
   ROOFTOP
===================================================== */

const roof =
  new THREE.Mesh(

new THREE.BoxGeometry(
      width + 0.5,
      0.25,
      depth + 0.5
    ),

darkMetal

);

roof.position.y =
  buildingHeight + 0.12;

building.add(roof);

/* Rooftop structure */

const rooftop =
  new THREE.Mesh(

new THREE.BoxGeometry(
      4,
      1.4,
      3
    ),

concrete

);

rooftop.position.y =
  buildingHeight + 0.8;

building.add(
  rooftop
);

/* =====================================================
   ANTENNA
===================================================== */

const antenna =
  new THREE.Mesh(

new THREE.CylinderGeometry(
      0.08,
      0.08,
      4,
      10
    ),

darkMetal

);

antenna.position.y =
  buildingHeight + 3;

building.add(
  antenna
);

/* Red aircraft warning light */

const redLight =
  new THREE.PointLight(
    0xff2222,
    5,
    8
  );

redLight.position.y =
  buildingHeight + 5;

building.add(
  redLight
);

/* =====================================================
   ENTRANCE
===================================================== */

const entrance =
  new THREE.Mesh(

new THREE.BoxGeometry(
      3.5,
      2.6,
      0.15
    ),

glass

);

entrance.position.set(
  0,
  1.3,
  depth / 2 + 0.1
);

building.add(
  entrance
);

/* =====================================================
   GROUND
===================================================== */

const ground =
  new THREE.Mesh(

new THREE.BoxGeometry(
      40,
      0.5,
      35
    ),

groundMaterial

);

ground.position.y =
  -0.3;

ground.receiveShadow = true;

scene.add(ground);

/* =====================================================
   PLATFORM
===================================================== */

const platform =
  new THREE.Mesh(

new THREE.BoxGeometry(
      17,
      0.25,
      14
    ),

darkMetal

);

platform.position.y =
  0.05;

platform.receiveShadow = true;

scene.add(
  platform
);

/* =====================================================
   TREES
===================================================== */

function createTree(
  x,
  z,
  scale
) {

const tree =
    new THREE.Group();

/* Trunk */

const trunk =
    new THREE.Mesh(

new THREE.CylinderGeometry(
        0.12,
        0.16,
        1.3,
        8
      ),

new THREE.MeshStandardMaterial({
        color: 0x5c4432
      })

);

trunk.position.y =
    0.65;

tree.add(trunk);

/* Leaves */

const leaves =
    new THREE.Mesh(

new THREE.SphereGeometry(
        0.75,
        12,
        12
      ),

new THREE.MeshStandardMaterial({
        color: 0x1f5637,
        roughness: 0.9
      })

);

leaves.position.y =
    1.6;

leaves.scale.y =
    1.25;

tree.add(leaves);

tree.position.set(
    x,
    0,
    z
  );

tree.scale.setScalar(
    scale
  );

scene.add(tree);

}

createTree(-8, 5, 1.2);
createTree(8, 5, 1.1);
createTree(-8, -5, 0.9);
createTree(8, -5, 1.2);

createTree(-6, 8, 0.8);
createTree(6, 8, 0.9);

/* =====================================================
   STREET LIGHTS
===================================================== */

function createStreetLight(
  x,
  z
) {

const pole =
    new THREE.Mesh(

new THREE.CylinderGeometry(
        0.04,
        0.07,
        3,
        8
      ),

darkMetal

);

pole.position.set(
    x,
    1.5,
    z
  );

scene.add(pole);

const bulb =
    new THREE.PointLight(
      0xffbd73,
      3,
      6
    );

bulb.position.set(
    x,
    3,
    z
  );

scene.add(bulb);

}

createStreetLight(-6, -7);
createStreetLight(6, -7);

/* =====================================================
   MANUAL CAMERA ROTATION
===================================================== */

let mouseDown = false;

let previousX = 0;

let previousY = 0;

let rotationY = 0.55;

let rotationX = 0.15;

let distance = 28;

renderer.domElement.addEventListener(
  "pointerdown",
  function(event) {

mouseDown = true;

previousX =
      event.clientX;

previousY =
      event.clientY;

}
);

window.addEventListener(
  "pointerup",
  function() {

mouseDown = false;

}
);

window.addEventListener(
  "pointermove",
  function(event) {

if (!mouseDown) {
      return;
    }

const dx =
      event.clientX -
      previousX;

const dy =
      event.clientY -
      previousY;

rotationY +=
      dx * 0.008;

rotationX +=
      dy * 0.004;

rotationX =
      Math.max(
        -0.25,
        Math.min(
          0.45,
          rotationX
        )
      );

previousX =
      event.clientX;

previousY =
      event.clientY;

}
);

/* =====================================================
   ZOOM
===================================================== */

window.addEventListener(
  "wheel",
  function(event) {

distance +=
      event.deltaY * 0.025;

distance =
      Math.max(
        13,
        Math.min(
          48,
          distance
        )
      );

},
  {
    passive: true
  }
);

/* =====================================================
   RESET
===================================================== */

window.addEventListener(
  "keydown",
  function(event) {

if (
      event.key.toLowerCase()
      === "r"
    ) {

rotationY =
        0.55;

rotationX =
        0.15;

distance =
        28;

}

}
);

/* =====================================================
   ANIMATION
===================================================== */

let time = 0;

function animate() {

requestAnimationFrame(
    animate
  );

time += 0.016;

/*
     Slowly rotate building automatically.
  */

building.rotation.y +=
    0.0015;

/*
     Animate building lights.
  */

windows.forEach(
    function(window, index) {

const wave =
        Math.sin(
          time * 0.8 +
          index * 1.73
        );

if (wave > 0.93) {

window.material.emissive =
          new THREE.Color(
            0xff9f45
          );

window.material.emissiveIntensity =
          1.8;

}
      else {

window.material.emissive =
          new THREE.Color(
            0x102b38
          );

window.material.emissiveIntensity =
          0.5;

}

}
  );

/*
     Move city lights.
  */

blueLight.position.x =
    Math.sin(time * 0.3) * 12;

blueLight.position.z =
    Math.cos(time * 0.3) * 10;

/*
     Camera orbit.
  */

const targetX = 0;
  const targetY = 8;
  const targetZ = 0;

camera.position.x =
    Math.sin(rotationY) *
    distance;

camera.position.z =
    Math.cos(rotationY) *
    distance;

camera.position.y =
    targetY +
    rotationX * 20;

camera.lookAt(
    targetX,
    targetY,
    targetZ
  );

renderer.render(
    scene,
    camera
  );

}

/* =====================================================
   RESIZE
===================================================== */

window.addEventListener(
  "resize",
  function() {

camera.aspect =
      window.innerWidth /
      window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(
      window.innerWidth,
      window.innerHeight
    );

}
);

/* =====================================================
   START
===================================================== */

animate();

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground