Mobile VR Polar Scene using JavaScript - Coding Torque

Polar Scene

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Mobile VR Polar Scene using JavaScript. 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 Code

<button id='VR' class='button toggleVR' onclick='toggleVR()' title='Toggle VR Mode for Mobile Devices Only'>
    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-12 -12 48 48"><path fill="#fff" d="M23.058 5.038H.942c-.522 0-.942.422-.942.94V18.02c0 .522.423.942.942.942H8.8c.26 0 .492-.174.564-.425.88-3.028 1.062-4.754 2.724-4.754 1.66 0 1.905 1.973 2.685 4.766.068.243.29.41.543.41h7.743c.52 0 .94-.424.94-.943V5.982c0-.522-.42-.944-.942-.944zm-16.43 9.467c-1.384 0-2.504-1.12-2.504-2.504s1.12-2.503 2.504-2.503 2.5 1.12 2.5 2.504-1.12 2.505-2.5 2.505zm10.744 0c-1.384 0-2.504-1.12-2.504-2.504s1.12-2.503 2.504-2.503c1.383 0 2.504 1.12 2.504 2.504s-1.12 2.505-2.504 2.505z"/></svg>
  </button>

<section>
  <h1><span class="low">Polar Bear Facts</span> 101:</h1>
  <p>Adult polar bears have no natural predators except other polar bears. Cubs less than one year old sometimes are prey to wolves and other carnivores. Newborn cubs may be cannibalized by malnourished mothers or adult male polar bears.</p>
  <small>source: <br>
  <a href="https://seaworld.org/animals/all-about/polar-bear/longevity/" target="_blank">seaworld.org</a><br>
</section>


  <div class="btn-group">
    <span>RL</span>
    <span>RR</span>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://baronwatts.com/scripts/LegacyJSONLoader.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/DeviceOrientationControls.js"></script>
<script src="https://threejs.org/examples/js/effects/StereoEffect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>

Step 2: CSS(SCSS) Code

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed|Playfair+Display:700i|Didact+Gothic");
html,
body {
    overflow: hidden;
    background: black;

    font-family: monospace;
    font-family: "Roboto", sans-serif;
}
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
* {
    margin: 0;
    padding: 0;
}
h1 {
    font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
    font-size: 30px;
    line-height: 1;
}
h3 {
    font-weight: lighter;
}

section {
    color: white;
    max-width: 275px;
    width: 100%;
    display: none;
    font-size: 14px;
}
p {
    color: rgba(255, 255, 255, 0.5);
}
a {
    color: white;
}

span.low {
    color: skyblue;
}
.btn-group {
    display: flex;
    -webkit-display: flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    width: 100%;
    padding: 50px 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
}
.btn-group span {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: white;
    background: #222;
    color: white;
    text-align: center;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    font-weight: bold;
    font-size: 30px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

#VR {
    position: fixed;
    top: 20px;
    right: 20px;
    outline: none;
    border: none;
    width: 60px;
    height: 40px;
    z-index: 100;
    background: rgba(135, 206, 250, 0.75);
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    visibility: hidden;
}

#VR svg {
    width: 60px;
    height: 35px;
    transform: scale(2);
    -webkit-transform: scale(2);
    fill: white;
}
button {
    background: none;
}

button:hover {
    cursor: pointer;
}

@media (min-width: 1100px) {
    section {
    display: block;
    position: absolute;
    bottom: 50px;
    left: 50px;
    }
}

/* Show only on touchscreen devices */
@media (pointer: coarse) {
    .btn-group,
    #VR {
    visibility: visible;
    }
    .hide {
    visibility: hidden;
    }
}

Output Till Now

Check Codepen for JavaScript:

See the Pen Mobile VR PolarScene by Baron (@b29) on CodePen.

Code Credits: @b29

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