3D City using HTML(Pug), CSS and Three.js - Coding Torque

3D Lab City

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make 3D Lab City using HTML(Pug), CSS and Three.js. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let's get started 🚀.

Let's go step by step:

Step 1: HTML(Pug) Code

.container-fluid.fixed-top.header.disable-selection
    .row
      .col
      .col-md-6
        .row
          .col
            h1
              strong Lab City 3D
            p.small – Back to the red –
            //.btn.btn-danger(href='#',role='button', onclick='cameraSet()') + ADD LINE
      .col
  
  //.container-fluid.fixed-bottom.footer
   .row
    .col
     h4 Experiment N.3
     small
      a(href='https://dribbble.com/victorvergara', target='_blank') dribbble.com/victorvergara

Step 2: CSS Code

body {
    color: white;
    margin: 0;
    text-align: center;
    background-color: black;
    cursor: crosshair;
  }
  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  p {
    color: rgba(255,255,255, 0.5)
  }
  .header {
    top: 42%;
  }
  .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 {
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer */
     -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
  }
  h1::after {
    content: ' Three JS';
    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;
  }

Output Till Now

Check Codepen for JavaScript:

See the Pen City 3D by Victor Vergara (@vcomics) on CodePen.

Code Credits: @vcomics

Written by: Piyush Patil

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 

 Follow us on Instagram for more projects like this👨‍💻 

- @code.scientist 

- @codingtorque  

- @codingknights