Woods Scene
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Mobile VR Woods 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">Deer Facts</span> 101:</h1>
<p> Reindeers are the only type of deer in which both the male and female grows antlers. Deers have their eyes on the side of their head, which gives them a view of 310 degrees which make it hard for them to focus on a single point. Deers rest in wooded
areas during most of the day, get up around sunset, and move out of the woods and into the fields after dark.</p>
<small>source: <br>
<a> href="https://onekindplanet.org/animal/deer/" target="_blank">onekindplanet.org</a><br>
<a> href="http://mentalfloss.com/article/29470/11-things-you-might-not-know-about-reindeer" target="_blank">mentalfloss.com</a><br>
<a> href="http://waterandwoods.net/2008/10/understanding-daily-deer-movement/" target="_blank">waterandwoods.net</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>
<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: red;
}
.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(90, 0, 0, 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 Woods Scene 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👨💻