Load 3D models using the Three.js gltf loader
Load 3D models using the Three.js gltf loader / orbit control / Full screen
Three.js – https://threejs.org/
gltf file – https://blog.naver.com/archyland/222104996717
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meeny.com</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<script src="main.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
<body>
<!-- Full screen menu -->
<div class="Fside d-flex align-items-center justify-content-center" id='fside'>
<div class="Fnav">
<div class="row">
<div class="col"><a class="navbar-brand text-light" href="#"><img src="images/symbol_w.svg" height="24px"> <span class="font-weight-bold">Meeny</span>.com</a></div>
<div class="col text-right"><a href="#" onclick="javascript:Fsidebar('C');" class="text-light"><i class="fas fa-times fa-2x"></i></a></div>
</div>
<ul class="nav flex-column mt-5" id="Fsidemenu">
</ul>
</div>
</div>
<!-- sidebar -->
<div class="Mside bg-dark" id='aside' style='left:-250px'>
<div class="row">
<div class="col"><a class="navbar-brand text-light" href="#"><img src="images/symbol_w.svg" height="24px"> <span class="font-weight-bold">Meeny</span>.com</a></div>
<div class="col text-right"><a href="#" onclick="javascript:Msidebar('C');"><i class="fas fa-times fa-2x text-white"></i></a></div>
</div>
<ul class="nav flex-column mt-5" id="sidemenu"></ul>
</div>
<!-- NavBar -->
<div class="navbarwrap fixed-top MeenyNavTrs py-4">
<div class="collapse bg-dark" id="collapseUp">
<div class="p-5 text-center text-light">
<nav class="navbar navbar-expand-sm navbar-dark">
<ul class="navbar-nav m-auto row" id="tmenu"></ul>
<ul class="navbar-nav ml-auto"><a class="nav-link" data-toggle="collapse" href="#collapseUp" role="button" aria-expanded="false" aria-controls="collapseUp"><i class="fas fa-times fa-2x"></i></a></ul>
</nav>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><img src="images/symbol_w.svg" height="24px"> <span class="font-weight-bold">Meeny</span>.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<div class="navbar-toggler-inner"></div>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto" id="MainMnu">
<li class="nav-item">
<a href="#" onclick="javascript:Fsidebar('L');" class="nav-link"><i class="fas fa-arrow-left"></i></a>
</li>
<li class="nav-item">
<a href="#" onclick="javascript:Msidebar('L');" class="nav-link"><i class="fas fa-arrow-circle-left"></i></a>
</li>
<li class="nav-item">
<a href="#" onclick="javascript:Msidebar('R');" class="nav-link"><i class="fas fa-arrow-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#collapseUp" role="button" aria-expanded="false" aria-controls="collapseUp"><i class="fas fa-arrow-circle-up"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-arrow-circle-down"></i></a>
</li>
</ul>
</div>
</nav>
<div class="collapse mb-3 bg-dark" id="collapseExample">
<div class="p-5 text-center text-light">
<nav class="navbar navbar-expand-sm navbar-dark">
<ul class="navbar-nav m-auto row" id="tmenu1"></ul>
<ul class="navbar-nav ml-auto"><a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-times fa-2x"></i></a></ul>
</nav>
</div>
</div>
</div>
</div>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url(images/n1.png);">
<!-- <img src="images/m1.jpg" class="d-block w-100 " style="height: 57vw; min-height:550px; "> -->
<div class="carousel-caption">
<h3 class="display-4 w100 text-light MfadeInDown"><span class="w700 text-success">Meeny</span>.com<br class="d-md-none" /><span class="text-light w400"> - HTML & CSS</span></h3>
<p class="text-light">Bootstrap4 - responsive navbar</p>
<br><br>
</div>
</div>
<div class="carousel-item" style="background-image: url(images/b3.png);">
<!-- <img src="images/m2.jpg" class="d-block w-100 " style="height: 57vw; min-height:550px;"> -->
<div class="carousel-caption">
<h3 class="display-4 w100 text-light MfadeInDown"><span class="w700 text-primary">Meeny</span>.com<br class="d-md-none" /><span class="text-light w400"> - HTML & CSS</span></h3>
<p class="text-light">Bootstrap4 Theming - change font/color</p>
<a href="" class="btn btn-primary rounded-pill">Link</a>
</div>
</div>
<div class="carousel-item" style="background-image: url(images/T3.png);">
<!-- <img src="images/m2.jpg" class="d-block w-100 " style="height: 57vw; min-height:550px;"> -->
<div class="carousel-caption">
<h3 class="display-4 w100 text-light MfadeInDown"><span class="w700 text-primary">Meeny</span>.com<br class="d-md-none" /><span class="text-light w400"> - HTML & CSS</span></h3>
<p class="text-light">Bootstrap4 Theming - change font/color</p>
<a href="" class="btn btn-primary rounded-pill">Link</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"><img src="images/b_prev.png" alt=""></a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"><img src="images/b_next.png" alt=""></a>
</div>
<div class="section1 row row-cols-md-4 row-cols-sm-2 m-2">
<div class="p-2">
<div class="card mb-3">
<img src="images/1.jpg" class="card-img-top">
<div class="card-header">
<h5 class="card-title m-0"><i class="fas fa-battery-full "></i> Card header</h5>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<h5 class="card-title m-0"><i class="fas fa-battery-full "></i> Card footer</h5>
</div>
</div>
</div>
<div class="p-2 d-flex align-items-stretch">
<div class="card mb-3">
<img src="images/2.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="p-2">
<div class="card mb-3">
<img src="images/3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="p-2">
<div class="card mb-3">
<img src="images/5.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<!-- Parallax Scroll effect ep01 -->
<div class="section_parallax bg-primary p-5">
<div class="container text-center">
<h3 class="display-3 w100 text-light"><span class="w500">Parallax Scroll</span> effect ep01</h3>
<p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="images/scroll1.png" alt="" id="scroll1">
<img src="images/scroll2.png" alt="" id="scroll2">
<img src="images/scroll3.png" alt="" id="scroll3">
</div>
</div>
<!-- Parallax Scroll effect ep02 -->
<div class="section_parallax bg-primary p-5">
<div class="container text-center">
<h3 class="display-3 w100 text-light"><span class="w500">Parallax Scroll</span> effect ep02</h3>
<p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="images/scroll1.png" alt="" id="scroll1" class="Mscroll" Mspeed="0.5" MYoffset="2400">
<img src="images/scroll2.png" alt="" id="scroll2" class="Mscroll" Mspeed="-0.1" MYoffset="2200">
<img src="images/scroll3.png" alt="" id="scroll3" class="Mscroll" Mspeed="0.1" MYoffset="2000">
</div>
</div>
<!-- animate on scroll -->
<div class="section_parallax bg-primary p-5">
<div class="container text-center">
<h3 class="display-3 w100 text-light"><span class="w500">Animate</span> on scroll</h3>
<p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="images/scroll1.png" alt="" id="scroll1"
data-aos="fade-left"
data-aos-delay="900">
<img src="images/scroll2.png" alt="" id="scroll2"
data-aos="fade-right"
data-aos-delay="600">
<img src="images/scroll3.png" alt="" id="scroll3"
data-aos="fade-left"
data-aos-delay="300">
</div>
</div>
<!-- Animate by MouseX position -->
<div class="section_parallax bg-primary p-5">
<div class="container text-center">
<h3 class="display-4 w100 text-light"><span class="w500">Animate</span> by MouseX position</h3>
<p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="images/scroll1.png" alt="" id="scroll1" class="MscrollM" Mspeed="0.3">
<img src="images/scroll2.png" alt="" id="scroll2" class="MscrollM" Mspeed="-0.1">
<img src="images/scroll3.png" alt="" id="scroll3" class="MscrollM" Mspeed="0.05">
</div>
</div>
<div class="section2 text-center bg-warning py-5">
<div class=" mt-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
<!-- Real 3D with Webgl(Three.js) -->
<div class="section_threejs p-5 text-light">
<div class="container text-center bg-primary" id="M3DDiv">
<h3 class="display-3 w100" style="padding-top: 320px;"><span class="w500">Real 3D</span> with Webgl</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="section3 row m-2">
<div class="col-sm-6 col-md-3">
<div class="card mb-3">
<img src="images/3.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card mb-3 border-0">
<div class="card-header">
<h5 class="card-title m-0"><i class="fas fa-battery-full "></i> Card header</h5>
</div>
<div class="card-body">
<h5 class="card-title"><i class="fas fa-battery-full "></i> Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<h5 class="card-title m-0"><i class="fas fa-battery-full "></i> Card footer</h5>
</div>
<img src="images/2.jpg" class="card-img-bottom Mblur">
</div>
</div>
<div class="col-sm-6 col-md-3 d-flex align-items-stretch">
<div class="card mb-3 bg-primary text-light Mscale2X" style="width: 100%;">
<img src="images/1.jpg" class="card-img-top Mgray">
<div class="card-body">
<h5 class="card-title">d-flex align-items-stretch</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 d-flex align-items-stretch">
<div class="card mb-3" style="width: 100%;">
<img src="images/5.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<ul class="list-unstyled">
<li class="media">
<div class="order-md-2">
<i class="fas fa-battery-empty fa-2x bg-primary p-3 mx-3 rounded-lg text-light "></i>
</div>
<div class="media-body text-md-right order-md-1">
<h5 class="mt-0 mb-1"><span class="w900">List-based</span><span class="w400">media object</span></h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<div class="order-2 order-md-1">
<i class="fas fa-battery-quarter fa-2x bg-secondary p-3 mx-3 rounded-lg text-light"></i>
</div>
<div class="media-body order-1 order-md-2">
<h5 class="mt-0 mb-1"><span class="w900">List-based</span><span class="w400">media object</span></h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<div class="order-md-2">
<i class="fas fa-battery-half fa-2x bg-secondary p-3 mx-3 rounded-lg text-light"></i>
</div>
<div class="media-body text-md-right order-md-1">
<h5 class="mt-0 mb-1"><span class="w900">List-based</span><span class="w400">media object</span></h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
</div>
<hr>
<div class="section4">
<div class="row row-cols-md-2">
<div class="card mb-3 border-0">
<div class="row row-cols-md-2 m-0">
<div>
<img src="images/3.jpg" class="card-img-top">
</div>
<div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="card mb-3 border-0">
<div class="row row-cols-md-2 m-0">
<div>
<img src="images/5.jpg" class="card-img-top">
</div>
<div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="SVGPath" transform="scale(2)">
<path class="meeny_svg" d="M103.36,51.7l-51.6,51.6L.16,51.7,51.76.11ZM51.76,96.13,96.19,51.7,51.76,7.28,7.34,51.7Z" transform="translate(-0.16 -0.11)"/>
<rect class="meeny_svg" x="48.73" y="16.55" width="5.07" height="69.31" transform="translate(-21.36 51.14) rotate(-45)"/>
<polygon class="meeny_svg" points="27.59 51.75 24.06 51.75 61.76 89.45 65.34 85.86 27.59 48.11 27.59 51.75"/>
<polygon class="meeny_svg" points="39.66 19.12 46.81 19.12 41.44 13.75 37.85 17.33 39.66 19.14 39.66 19.12"/>
<polygon class="meeny_svg" points="48.12 27.6 84.27 63.75 87.86 60.16 55.29 27.6 48.12 27.6"/>
<polygon class="meeny_svg" points="19.14 39.66 17.33 37.85 13.75 41.44 15.58 43.27 19.14 43.27 19.14 39.66"/>
</clipPath>
</defs>
</svg>
<hr>
<div class="container text-center">
<h2 class="w300"><span class="w900 text-primary">My favorite</span> <span>responsive grid layout</span> </h2>
<div class="row">
<div class="col-lg-6 col-md-6 bg-info p-5">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content text-left" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Velit euismod in pellentesque massa placerat duis ultricies lacus sed.</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">At auctor urna nunc id cursus metus aliquam eleifend.</div>
</div>
</div>
<div class="col-lg-3 col-md-6 bg-secondary text-light row align-items-center mx-0 p-3">
<div class="container">
<h5 class="rounded-pill bg-success py-2">Contact us</h5>
<p class="mb-0">jessica416901@gmail.com</p>
</div>
</div>
<div class="col-lg-3 col-md-12 bg-success text-light">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-2">
<div class="col bg-dark" data-aos="zoom-out" data-aos-delay="0">
<i class="fas fa-battery-empty fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-success" data-aos="zoom-out" data-aos-delay="300">
<i class="fas fa-battery-quarter fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-warning" data-aos="zoom-out" data-aos-delay="600">
<i class="fas fa-battery-half fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p>lorem</p>
</div>
<div class="col bg-info" data-aos="zoom-out" data-aos-delay="900">
<i class="fas fa-battery-three-quarters fa-2x bg-primary p-3 m-3 rounded-lg "></i>
<p class="text-dark">lorem</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container text-center">
<h2 class="w300"><span class="w900 text-primary">My favorite</span> <span>responsive grid layout</span> </h2>
<div class="row">
<div class="col-lg-6 col-md-6 bg-primary p-5">1</div>
<div class="col-lg-3 col-md-6 bg-secondary p-5">2</div>
<div class="col-lg-3 col-md-12 bg-success">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-2">
<div class="col bg-dark"><h1 class="display-3">3</h1></div>
<div class="col bg-success"><h1 class="display-3">4</h1></div>
<div class="col bg-warning"><h1 class="display-3">5</h1></div>
<div class="col bg-info"><h1 class="display-3">6</h1></div>
</div>
</div>
</div>
</div>
<hr>
<div class="section5">
<div class="container py-5">
<h3 class="text-center w300"><span class="w900 text-success">Responsive Border</span> Utilities</h3>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 text-center text-success">
<div class="p-5 border-md-right"><i class="fas fa-battery-empty fa-4x " data-aos="fade-left" data-aos-delay="300"></i></div>
<div class="p-5 border-lg-right border-top border-md-top-0"><i class="fas fa-battery-quarter fa-4x " data-aos="fade-left" data-aos-delay="600"></i></div>
<div class="p-5 border-md-right border-top border-md-top-0"><i class="fas fa-battery-half fa-4x " data-aos="fade-left" data-aos-delay="900"></i></div>
<div class="p-5 border-top border-md-top-0"><i class="fas fa-battery-three-quarters fa-4x " data-aos="fade-left" data-aos-delay="1200"></i></div>
</div>
</div>
</div>
<div class="sitemap bg-dark">
<div class="container">
<div class="collapse text-light text-center" id="collapseFoot">
<div class="p-5 text-center text-light">
<h3>sitemap</h3>
<hr class="hr2">
<nav class="navbar navbar-expand-sm navbar-dark">
<ul class="navbar-nav m-auto row" id="Mmenu"></ul>
<ul class="navbar-nav ml-auto"><a class="nav-link" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot"><i class="fas fa-times fa-2x"></i></a></ul>
</nav>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Terms of use</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus ultricies tristique. Aliquet nec ullamcorper sit amet risus nullam. Proin nibh nisl condimentum id venenatis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Mauris cursus mattis molestie a iaculis. Arcu odio ut sem nulla pharetra diam sit. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Eget gravida cum sociis natoque penatibus et magnis dis parturient. Dolor magna eget est lorem ipsum. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet purus gravida quis blandit turpis.
</p>
<p>
Integer vitae justo eget magna fermentum iaculis eu non diam. Maecenas sed enim ut sem viverra. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget mi proin sed libero enim. Lectus sit amet est placerat in egestas. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Tortor at auctor urna nunc id cursus metus aliquam. Id donec ultrices tincidunt arcu non. Et molestie ac feugiat sed. Arcu risus quis varius quam quisque id diam vel quam. Lectus sit amet est placerat in egestas erat imperdiet sed. Potenti nullam ac tortor vitae purus. Id faucibus nisl tincidunt eget. Et molestie ac feugiat sed lectus. Sit amet nisl purus in.
</p>
<p>
Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Gravida cum sociis natoque penatibus et magnis dis. Commodo odio aenean sed adipiscing diam donec. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Erat velit scelerisque in dictum non consectetur a erat. Amet justo donec enim diam. Porttitor leo a diam sollicitudin tempor. Gravida arcu ac tortor dignissim. Libero id faucibus nisl tincidunt eget nullam non nisi. Sodales neque sodales ut etiam sit amet nisl purus in. Eget dolor morbi non arcu. A pellentesque sit amet porttitor eget dolor. Magna fermentum iaculis eu non diam. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Sit amet justo donec enim diam vulputate ut.
</p>
<p>
Elementum sagittis vitae et leo. Amet mattis vulputate enim nulla. Dictum non consectetur a erat. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Non sodales neque sodales ut etiam sit amet. Hendrerit dolor magna eget est lorem ipsum dolor. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Elit at imperdiet dui accumsan sit amet nulla. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Semper feugiat nibh sed pulvinar proin.
</p>
<p>
Dolor sed viverra ipsum nunc aliquet bibendum. Non curabitur gravida arcu ac tortor dignissim convallis. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Amet justo donec enim diam. Enim praesent elementum facilisis leo vel fringilla. Feugiat in ante metus dictum at tempor commodo. Porttitor eget dolor morbi non arcu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Euismod nisi porta lorem mollis aliquam. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Tincidunt eget nullam non nisi est sit. Mauris ultrices eros in cursus turpis massa tincidunt dui ut.
</p>
<p>
Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Cum sociis natoque penatibus et magnis dis parturient. Id consectetur purus ut faucibus. Id neque aliquam vestibulum morbi blandit. Et molestie ac feugiat sed. Suspendisse sed nisi lacus sed viverra tellus in hac. Nam aliquam sem et tortor consequat. Tortor dignissim convallis aenean et tortor at risus viverra. Pulvinar sapien et ligula ullamcorper malesuada proin. Nisl purus in mollis nunc sed id semper. Accumsan lacus vel facilisis volutpat est velit egestas. Eget est lorem ipsum dolor sit. Consequat interdum varius sit amet mattis vulputate enim. Ultrices sagittis orci a scelerisque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Velit ut tortor pretium viverra suspendisse potenti nullam. Dignissim cras tincidunt lobortis feugiat vivamus. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<footer>
<div class="Mfoot1 py-5">
<div class="container">
<div class="row">
<div class="col-12 col-lg-5 text-center text-lg-left">
<p>©Copyright <img src="images/symbol.svg" height="14px"> <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved</p>
</div>
<div class="col-12 col-lg-7">
<ul class="footMnu nav justify-content-center justify-content-lg-end">
<li class="nav-item"><a href="" class="btn btn-light">About Us</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Products</a></li>
<li class="nav-item"><a href="" class="btn btn-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Privacy policy</a></li>
<li class="nav-item"><a class="btn btn-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="Mfoot2 py-2">
<div class="container">
<ul class="footMnu nav justify-content-center justify-content-lg-end">
<li class="nav-item"><a href="" class="btn btn-light">About Us</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Products</a></li>
<li class="nav-item"><a href="" class="btn btn-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Privacy policy</a></li>
<li class="nav-item"><a class="btn btn-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
<div class="row">
<div class="col-md-2 border-md-right text-center">
<h5><img src="images/symbol.svg" height="20px"> <span class="font-weight-bold">Meeny</span>.com</h5>
</div>
<div class="col-md-10">
<ul class="Mcontact list-group">
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
<li class="list-group-item">
©Copyright 2020 <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved
</li>
</ul>
</div>
</div>
</div>
<div class="text-center bg-primary">
<ul class="list-group list-group-horizontal text-info justify-content-center">
<li class="list-group-item"><i class="fab fa-facebook-f "></i></li>
<li class="list-group-item"><i class="fab fa-twitter "></i></li>
<li class="list-group-item"><i class="fab fa-twitch "></i></li>
<li class="list-group-item"><i class="fab fa-instagram "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp "></i></li>
<li class="list-group-item"><i class="fab fa-youtube "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in "></i></li>
<li class="list-group-item"><i class="fab fa-github "></i></li>
<li class="list-group-item"><i class="fab fa-skype "></i></li>
</ul>
</div>
</div>
<hr>
<div class="Mfoot3 bg-primary py-5">
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 text-light">
<div class="p-3">
<h5 class="pl-2"><img src="images/symbol_w.svg" height="20px"> <span class="font-weight-bold">Meeny</span>.com</h5>
<hr class="hr2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra accumsan in nisl nisi scelerisque eu. Pulvinar pellentesque habitant morbi tristique senectus et.</p>
</div>
<div class="p-3">
<h5 class="pl-2">Quick links</h5>
<hr class="hr2">
<ul class="footMnu">
<li class=""><a href="" class="text-light">About Us</a></li>
<li class=""><a href="" class="text-light">Products</a></li>
<li class=""><a href="" class="text-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class=""><a href="" class="text-light">Privacy policy</a></li>
<li class=""><a class="text-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
<div class="p-3">
<h5 class="pl-2">SNS</h5>
<hr class="hr2">
<ul class="list-group list-group-horizontal row row-cols-4 text-center px-4">
<li class="list-group-item"><i class="fab fa-facebook-f fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-twitter fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-twitch fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-instagram fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-youtube fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-github fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-skype fa-2x "></i></li>
</ul>
</div>
<div class="p-3">
<h5 class="pl-2">Contact</h5>
<hr class="hr2">
<ul class="Mcontact">
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
</ul>
</div>
</div>
</div>
<div class="border-top">
<div class="text-center text-light py-3">
<p>©Copyright 2020 <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved</p>
</div>
</div>
</div>
<hr>
<div class="Mfoot4 bg-dark py-5">
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 text-light pb-3">
<div class="p-3 border-md-right">
<div class="text-center">
<img src="images/symbol_w.svg" height="120px">
<h5>
<span class="font-weight-bold">Meeny</span>.com
</h5>
</div>
</div>
<div class="p-3 border-lg-right border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-bars "></i> Quick links</h5>
<ul class="footMnu">
<li class=""><a href="" class="text-light">About Us</a></li>
<li class=""><a href="" class="text-light">Products</a></li>
<li class=""><a href="" class="text-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class=""><a href="" class="text-light">Privacy policy</a></li>
<li class=""><a class="text-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
<div class="p-3 border-md-right border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-clock "></i> Opening Hours</h5>
<ul>
<li><span class="w900 text-success">Open</span> : 10 am</li>
<li>Close : 7 pm</li>
<li>sat,sun : closed</li>
</ul>
</div>
<div class="p-3 border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-map "></i> Contact</h5>
<ul class="Mcontact">
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
</ul>
</div>
</div>
</div>
<div class="border-top bg-white">
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="text-center text-lg-left py-3">
<p class="mb-0">Copyright © 2020 <span class="font-weight-bold text-success">Meeny</span>.com</a> All rights reserved</p>
</div>
<div class="">
<ul class="list-group list-group-horizontal justify-content-center justify-content-md-end">
<li class="list-group-item"><i class="fab fa-facebook-f "></i></li>
<li class="list-group-item"><i class="fab fa-twitter "></i></li>
<li class="list-group-item"><i class="fab fa-twitch "></i></li>
<li class="list-group-item"><i class="fab fa-instagram "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp "></i></li>
<li class="list-group-item"><i class="fab fa-youtube "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in "></i></li>
<li class="list-group-item"><i class="fab fa-github "></i></li>
<li class="list-group-item"><i class="fab fa-skype "></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="module">
import * as THREE from './build/three.module.js';
//import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
import { RoughnessMipmapper } from './jsm/utils/RoughnessMipmapper.js';
var controls;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
const container = document.getElementById('M3DDiv');
let WIDTH = container.clientWidth;
let HEIGHT = container.clientHeight;
init();
animate();
function init() {
// container = document.createElement( 'div' );
// document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 3000 );
camera.position.set( 1, 3, 3);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xdeebed );
scene.add(camera);
//LIGHT
var light = new THREE.DirectionalLight(0xdfebff, 1);
light.position.set(50,200,10);
light.position.multiplyScalar( 1.3 );
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.castShadow = true;
scene.add( light );
var light2 = new THREE.DirectionalLight( 0xffffff );
light2.position.set(1,1,1);
light2.castShadow = false;
scene.add( light2 );
var loader = new GLTFLoader().setPath( './' );
loader.load( 'mountain.gltf', function ( gltf ) {
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
child.rotation.y = Math.PI / 3;
// TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0
// roughnessMipmapper.generateMipmaps( child.material );
}
} );
scene.add( gltf.scene );
//roughnessMipmapper.dispose();
animate();
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
// windowHalfX = window.innerWidth / 2;
// windowHalfY = window.innerHeight / 2;
// camera.aspect = window.innerWidth / window.innerHeight;
let WIDTH = container.clientWidth;
let HEIGHT = container.clientHeight;
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
renderer.setSize( WIDTH, HEIGHT );
render();
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2000;
mouseY = ( event.clientY - windowHalfY ) / 1500;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05 + 0.1;
camera.position.z += (mouseX - camera.position.z ) * 0.5 + 3;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
<script>
AOS.init();
</script>
</body>
</html>main.js
$(document).ready( $(function(){
var navbtn = $('.navbar-toggler');
var nav = $('.navbarwrap');
$(navbtn).click(function(){
$(navbtn).toggleClass('active');
})
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll >= 100) {
nav.removeClass('nav-transparent py-4').addClass('nav-colored');
}else{
nav.removeClass('nav-colored').addClass('nav-transparent py-4');
}
})
}))
function Msidebar(loca){
var Wwidth = document.body.clientWidth;
var aside = document.getElementById('aside');
if(loca=='L'){
aside.style.left = '0px';
}else if(loca=='R'){
aside.style.left = (Wwidth - 250) + 'px';
}else{//Close
aside.style.left = '-250px';
}
}
function Fsidebar(loca){
var fside = document.getElementById('fside');
if(loca=='L'){
fside.style.width = '100%';
}else{//Close
fside.style.width = '0';
}
}
const sitemap = {
"mainMenu":[
{"name": "About Us", "Link": "http://www.meeny.com", "sub": null},
{"name": "Business", "Link": "http://www.meeny.com", "sub": null},
{"name": "Products", "Link": "http://www.meeny.com", "sub": [
{"name": "Category 1", "Link": "http://www.meeny.com", "sub": null},
{"name": "Category 2", "Link": "http://www.meeny.com", "sub": null},
{"name": "Category 3", "Link": "http://www.meeny.com", "sub": null},
{"name": "Category 4", "Link": "http://www.meeny.com", "sub": null}
]},
{"name": "Contact Us", "Link": "http://www.meeny.com", "sub": [
{"name": "SubMenu 1", "Link": "http://www.meeny.com", "sub": null},
{"name": "SubMenu 2", "Link": "http://www.meeny.com", "sub": null}
]},
{"name": "Investing", "Link": "http://www.meeny.com", "sub": null},
{"name": "Press", "Link": "http://www.meeny.com", "sub": null}
],
"footMenu":[]
}
function MParseMnu(ulname, Mnuobj, sid){
var obj = Mnuobj;
//console.log(obj);
for(var i=0; i < obj.length; i++){
var subMnuid = sid + i;
if(obj[i].sub != null){
ulname.innerHTML += '<li class="nav-item"><a class="nav-link" href="'+obj[i].Link+'">'+obj[i].name+'</a><ul id="'+subMnuid+'"></ul>';
var subMnuid = document.getElementById(subMnuid);
MParseMnu(subMnuid, obj[i].sub);
}else{
ulname.innerHTML += '<li class="nav-item"><a class="nav-link" href="'+obj[i].Link+'">'+obj[i].name+'</a></li>';
}
}
}
function B4ParseMnu(ulname, Mnuobj, sid, dropdown){
var obj = Mnuobj;
//console.log(obj);
for(var i=0; i < obj.length; i++){
var subMnuid = sid + i;
var DsubMnuid = 'Drop_'+subMnuid;
if(obj[i].sub != null){
ulname.innerHTML += '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="'+DsubMnuid+'" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'+obj[i].name+'</a><div class="dropdown-menu" aria-labelledby="'+DsubMnuid+'" id="'+subMnuid+'">';
var subMnuid = document.getElementById(subMnuid);
B4ParseMnu(subMnuid, obj[i].sub, subMnuid, 'dropdown');
}else if(dropdown=='dropdown'){
ulname.innerHTML += '<a class="dropdown-item" href="'+obj[i].Link+'">'+obj[i].name+'</a>';
}else{
ulname.innerHTML += '<li class="nav-item"><a class="nav-link" href="'+obj[i].Link+'">'+obj[i].name+'</a></li>';
}
}
//ulname.innerHTML += '</li>';
}
window.onload = function (){
var Mmenu = document.getElementById("Mmenu");
MParseMnu(Mmenu, sitemap.mainMenu, 'Mmenu');
var Fsidemenu = document.getElementById("Fsidemenu");
B4ParseMnu(Fsidemenu, sitemap.mainMenu, 'Fsidemenu', '');
var sidemenu = document.getElementById("sidemenu");
B4ParseMnu(sidemenu, sitemap.mainMenu, 'sidemenu', '');
var tmenu = document.getElementById("tmenu");
MParseMnu(tmenu, sitemap.mainMenu, 'tmenu');
var tmenu1 = document.getElementById("tmenu1");
B4ParseMnu(tmenu1, sitemap.mainMenu, 'tmenu1', '')
var MainMnu = document.getElementById("MainMnu");
B4ParseMnu(MainMnu, sitemap.mainMenu, 'MainMnu', '')
}
window.addEventListener('scroll' , function () {
// Parallax Scroll effect ep01
const mount1 = document.querySelector('#scroll1')
const mount2 = document.querySelector('#scroll2')
const mount3 = document.querySelector('#scroll3')
//console.log(pageYOffset);
var scrolStart = 1700;
if(window.pageYOffset>scrolStart){
var scrolled = window.pageYOffset-scrolStart;
var Mloca1 = scrolled *.3;
var Mloca2 = -(scrolled *.2);
var Mloca3 = -(scrolled *.9);
}
mount1.style.transform = 'translateX('+Mloca1+'px)';
mount2.style.transform = 'translateX('+Mloca2+'px)';
mount3.style.transform = 'translateX('+Mloca3+'px)';
// Parallax Scroll effect ep01
// Parallax Scroll effect ep02
var Mscroll = document.querySelectorAll('.Mscroll');
Mscroll.forEach(function(Meach){
const Mspeed = Meach.getAttribute('Mspeed');
const MYoffset = Meach.getAttribute('MYoffset');
if(window.pageYOffset>MYoffset){
var speed = window.pageYOffset-MYoffset;
speed = speed * Mspeed;
Meach.style.transform = 'translateX('+speed+'px)';
}
})
var mouseX = 0;
var mouseY = 0;
// Animate by MouseX position
var MscrollM = document.querySelectorAll('.MscrollM');
MscrollM.forEach(function(Meach){
const Mspeed = Meach.getAttribute('Mspeed');
document.addEventListener('mousemove',function(event){
let MlocaX = Mspeed * event.clientX;
Meach.style.transform = 'translateX('+MlocaX+'px)';
} ,false);
})
})main.scss
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
$font-family-base: 'Roboto', sans-serif;
$enable-responsive-font-sizes: true;
$color-1 : #0F4C81;
$color-2 : #7209b7;
$color-3 : #f72585;
$color-4 : #4361ee;
$color-5 : #4cc9f0;
$color-6 : #237a94;
$color-1 : #0F4C81;
$color-2 : #4361ee;
$color-3 : #e63946;
$color-4 : #a8dadc;
$color-5 : #457b9d;
$color-6 : #1d3557;
$primary: $color-1;
$secondary: $color-2;
$success: $color-3;
$info: $color-4;
$warning: $color-5;
$danger: $color-6;
// Dropdown menu container and contents.
$dropdown-bg: $color-1;
$dropdown-link-color: $color-4;
$dropdown-link-hover-color: darken($color-4, 20%);
$dropdown-link-hover-bg: darken($color-1, 10%);
$dropdown-divider-bg: lighten($color-1, 10%);
$dropdown-border-color: rgba($color-5, .15);
//$enable-rounded: false;
// $border-width: 1px;
// $border-color: $gray-300;
$border-radius: .25rem;
$border-radius-lg: .8rem;
$border-radius-sm: .4rem;
@import "scss/bootstrap";
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.border#{$infix}-top { border-top: $border-width solid $border-color !important; }
.border#{$infix}-right { border-right: $border-width solid $border-color !important; }
.border#{$infix}-bottom { border-bottom: $border-width solid $border-color !important; }
.border#{$infix}-left { border-left: $border-width solid $border-color !important; }
.border#{$infix}-top-0 { border-top: 0 !important; }
.border#{$infix}-right-0 { border-right: 0 !important; }
.border#{$infix}-bottom-0 { border-bottom: 0 !important; }
.border#{$infix}-left-0 { border-left: 0 !important; }
.border#{$infix}-x {
border-left: $border-width solid $border-color !important;
border-right: $border-width solid $border-color !important;
}
.border#{$infix}-y {
border-top: $border-width solid $border-color !important;
border-bottom: $border-width solid $border-color !important;
}
}
}
html{
font-size: 15.25px;
letter-spacing: -0.02em;
word-spacing: 0.05em;
}
html,body,.carousel,.carousel-inner,.carousel-item{height: 100%;}
.carousel-item{
background-size: cover;
background-position: center;
}
.carousel-caption{
transform: translateY(-50%);
bottom: initial;
top: 50%;
}
.navbar-toggler {
&:focus {
outline: none;
}
border: 1px solid $warning;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: 0 0 0.15em 0.35em;
.navbar-toggler-inner,
.navbar-toggler-inner::before,
.navbar-toggler-inner::after
{
width: 1em;
height: 0.16em;
background-color: $warning;
position: absolute;
}
.navbar-toggler-inner::before
{
content: "";
display: block;
top: -0.3em;
}
.navbar-toggler-inner::after
{
content: "";
display: block;
bottom: -0.3em;
}
.navbar-toggler-inner{
transition: 0.2s;
transform: rotate(0deg);
}
}
.navbar-toggler.active {
.navbar-toggler-inner {
transition: 0.2s;
transform: rotate(45deg); // 45+360
}
.navbar-toggler-inner::before {
top: 0;
opacity: 0;
}
.navbar-toggler-inner::after {
bottom: 0;
transform: rotate(-90deg);
}
}
ul#tmenu {
li{
font-size: 1.2rem;
font-weight: bold;
margin: 6px;
ul{
list-style: none;
padding-left: 0;
border: 1px solid $color-1;
border-radius: 10px;
li{
font-size: 1rem;
font-weight: normal;
}
}
a.nav-link {
&:hover{
background-color: $color-1;
color: $color-3
}
}
}
}
.dropdown-menu {
animation-name: Mzoom;
animation-duration: .5s;
}
@keyframes Mdown {
from{
opacity: 0;
transform: translate(0,20px);
-webkit-transform: translate(0,20px);
}
to{
opacity: 1;
}
}
@keyframes Mleft {
from{
opacity: 0;
transform: translate(20px,0);
-webkit-transform: translate(20px,0);
}
to{
opacity: 1;
}
}
@keyframes Mzoom {
from{
opacity: 0;
transform: scale3d(0.2,0.2,0.2);
-webkit-transform: scale3d(0.2,0.2,0.2);
}
50%{
opacity: 1;
}
}
@keyframes Mroll {
from{
opacity: 0;
transform: translate3d(-100%,0,0) rotate3d(0,0,1,-90deg);
-webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-90deg);
}
to{
opacity: 1;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
}
.carousel-indicators{
li{
border-radius: 50%;
width: 10px;
height: 10px;
}
li.active {
width: 14px;
height: 14px;
background-color: $color-1;
margin-top: -2px;;
}
}
.w100 {font-weight: 100 !important;}
.w300 {font-weight: 300 !important;}
.w400 {font-weight: 400 !important;}
.w500 {font-weight: 500 !important;}
.w700 {font-weight: 700 !important;}
.w900 {font-weight: 900 !important;}
.nav-colored{background-color: $primary;}
.nav-transparent {background-color: transparent;}
.MeenyNavTrs {
transition: 1s;
-webkit-transition: 1s;
}
@keyframes MfadeInDown{
0% {
opacity: 0;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
40%{
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
.MfadeInDown{
animation-name: MfadeInDown;
animation-duration: 3s;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
::-webkit-scrollbar {
width: 0.25vw;
height: 0.25vw;
}
::-webkit-scrollbar-thumb {
background: $color-1;
}
::-webkit-scrollbar-track {
background: $light;
}
//Internet explorer
Body{
scrollbar-arrow-color: $color-1;
scrollbar-face-color: $color-1;
scrollbar-track-color: lighten($color-1, 40%);
scrollbar-3dlight-color: lighten($color-1, 20%);
scrollbar-highlight-color: lighten($color-1, 15%);
scrollbar-shadow-color: lighten($color-1, 10%);
scrollbar-darkshadow-color: lighten($color-1, 5%);
}
.Mside{
position: fixed;
width: 250px;
height: 100vh;
z-index: 2000;
padding: 20px;
transition: .5s;
-webkit-transition: .5s;
transition-timing-function: ease-in-out;
ul > li > a{
color: $white;
&:hover {
color: $color-3;
}
}
}
.Fside {
position: fixed;
z-index: 2001;
width: 0;
overflow: hidden;
height: 100vh;
background-color: rgba(0,0,0, 0.9);
transition: .5s;
//transform: rotate(45deg);
-webkit-transition: .5s;
transition-timing-function: ease-in-out;
.Fnav{
//transform: rotate(-45deg);
}
ul.nav{
font-size: 2em;
font-weight: bolder;
a{
&:hover {
color: $color-3;
}
}
}
}
.section2 {
clip-path: polygon(0 0, 100% 0%, 100% 85%, 50% 100%, 0 85%);
}
body > div.section3.row.m-2 > div:nth-child(1) > div {
overflow: visible;
}
.card {
overflow: hidden;
img{
clip-path: polygon(0 0, 100% 0%, 100% 85%, 50% 100%, 0 85%);
//clip-path: url(#SVGPath);
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
&:hover {
transform: scale(1.2) rotate(15deg);
-webkit-transform: scale(1.2) rotate(15deg);;
}
}
&:hover{
box-shadow: 0 0 20px $gray-400;
cursor: pointer;
}
}
.Mblur{
filter: blur(5px);
-webkit-filter: blur(5px);
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
&:hover{
filter: blur(0);
-webkit-filter: blur(0);
}
}
.Mgray{
filter: grayscale(100%) blur(5px);
-webkit-filter: grayscale(100%) blur(5px);
transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
&:hover {
filter: grayscale(0) blur(0);
-webkit-filter: grayscale(0) blur(0);
}
}
.Mscale2X {
z-index: 1000;
transition: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-webkit-transition: .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
&:hover {
transform: scale(1.4);
}
}
.section5{
// .container{
// .row{
// DIV:not(:last-child) {
// border-right: 1px solid $gray-600;
// }
// }
// }
}
.Mfoot1{
border-top: 2px solid $gray-700;
ul.footMnu{
.nav-item{
padding: 2px;
}
}
}
.Mfoot2{
border-top: 2px solid $gray-700;
ul.footMnu{
.nav-item{
padding: 6px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 4px;
}
}
}
.Mfoot3{
a{text-decoration: none;}
border-top: 2px solid $gray-700;
ul{
li{
padding: 2px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 4px;
}
}
}
.hr2{
border-style: solid;
border-color: $white;
border-width: 4px 0 0 0;
border-radius: 20px;
height: 30px;
}
.Mfoot4{
a{text-decoration: none;}
border-top: 2px solid $gray-700;
ul{
padding-top: 14px;;
li{
padding: 2px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 0 14px;
}
}
}
.section_parallax{
overflow: hidden;
background: rgb(0,36,68);
background: linear-gradient(0deg, rgba(0,36,68,1) 0%, rgba(15,76,129,1) 46%, rgba(33,126,208,1) 49%, rgba(15,76,129,1) 100%);
.container{
min-height: 700px;
position: relative;
#scroll1{
height: 400px;
position: absolute;
right: -50px;
margin-top: 100px;
z-index: 12;
}
#scroll2{
height: 100px;
position: absolute;
left: 0;
top: 150px;
margin-top: 180px;
z-index: 11;
}
#scroll3{
height: 50px;
position: absolute;
left: 250px;
top: 150px;
margin-top: 190px;
z-index: 10;
}
}
}
.section_threejs{
#M3DDiv{
position: relative;
min-height: 500px;
h3,p {
position: relative;
z-index: 10;
}
canvas{
width: 100% !important;
position: absolute;
top: 0;
left: 0;
}
}
}