3D City Scene #1: Creating the Foundation for Interactive 3D Environments

As part of my ongoing 3D CSS series, 3D City Scene #1 marked an exciting step forward in bringing static 3D designs to life. The purpose of this project was to create a 3D city scene with the potential for user navigation, setting the stage for more interactive web experiences. While I haven’t yet implemented dynamic HTML generation via JavaScript, this project already has some interesting functionality that gives it a sense of interactivity.

Project Overview

The goal of 3D City Scene #1 was to create a visual 3D scene that could serve as the foundation for a navigable environment in the future. This project is about layering in interactivity and functionality, with the initial focus on making the scene visually dynamic and engaging for users.

Approach & Execution

While this project doesn’t yet incorporate dynamic HTML generation, I used JavaScript to introduce several features that enhance the user experience. Some key aspects of this project include:

1. Zoom-In Animation: Using JavaScript, I created a simple yet effective zoom-in animation. This animation is triggered by pressing the space bar or using the "keydown" event. It’s a small but impactful feature that gives users the feeling of zooming in and out within the 3D scene, adding to the sense of immersion.

   document.addEventListener('keydown', function(e) {
if (e.key === ' ') {
console.log("Spacebar was pressed.")
hero.classList.add("moveCloser");
}
});

2. Time of Day Functionality: One of the more interesting aspects of this project was the inclusion of a time-of-day function. The background of the scene automatically adjusts to mimic the sky, changing between day and night based on the time of day. This effect enhances the realism of the 3D scene and creates a more dynamic experience as users engage with it.

   let date = new Date();
let hours = date.getHours();

function setSky() {
if (hours >= 7 && hours <= 17) {
document.body.classList.add("daytime");
document.body.classList.remove("nighttime");
} else {
document.body.classList.add("nighttime");
document.body.classList.remove("daytime");
}
console.log("Sky has been set.")
}

   I have a tendecy of including a lot of console logs to handle error handling that will eventually be removed before I release any code.

3. Dynamic Box Sizing: A major step forward in this project was the introduction of "dynamic" box sizing. By adding a "tall" or "small" class to the boxes, the height and width of the buildings can change, offering a more flexible and adaptable layout. This dynamic sizing helps lay the groundwork for a more complex 3D city structure, with buildings of varying sizes that can be manipulated further as the project evolves.

The postioning of the buildings was a lot of trial and error when placing them for determing what seemed right to prevent it from being laid out too neatly and look off.

Final Thoughts

While 3D City Scene #1 doesn’t yet feature full interactivity or JavaScript-generated HTML elements, it serves as a solid foundation for future development. The zoom functionality, time-of-day changes, and dynamic box sizing are all small steps toward a more immersive, interactive 3D city scene. This project highlights how adding simple interactivity and dynamic features can drastically improve user engagement.

Go check out the next project in this series, 3D City Scene #2