Skip to content

Commit

Permalink
simulator page added
Browse files Browse the repository at this point in the history
  • Loading branch information
Nobatgeldi committed Dec 8, 2023
1 parent 35ca1ed commit ec89c4c
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 249 deletions.
5 changes: 5 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"cSpell.words": [
"frameloop"
]
}
139 changes: 5 additions & 134 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,154 +1,25 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PageScrollTop from './components/pageToTop/PageScrollTop'

// Pages import Here
import Splash from "./pages/Splash";
import HomeDefault from "./pages/HomeDefault";
import BusinessConsulting2 from "./pages/BusinessConsulting2";
import Corporate from "./pages/Corporate";
import Business from "./pages/Business";
import DigitalAgency from "./pages/DigitalAgency";
import Finance from "./pages/Finance";
import Company from "./pages/Company";
import Marketing from "./pages/Marketing";
import TravelAgency from "./pages/TravelAgency";
import Consulting from "./pages/Consulting";
import SeoAgency from "./pages/SeoAgency";
import PersonalPortfolio from "./pages/PersonalPortfolio";
import EventConference from "./pages/EventConference";
import CreativePortfolio from "./pages/CreativePortfolio";
import Freelancer from "./pages/Freelancer";
import InternationalConsulting from "./pages/InternationalConsulting";
import Startup from "./pages/Startup";
import WebAgency from "./pages/WebAgency";


import CategoryList from "./pages/CategoryList";
import TagList from "./pages/TagList";
import Author from "./pages/Author";
import AboutUs from "./pages/AboutUs";

import NGS from "./covisart/NGS";
// Elements import Here

import Elements from "./elements/elements/Elements";
import Button from "./elements/button/Button";
import Service from "./elements/service/Service";
import CounterUp from "./elements/counterup/CounterUp";
import Progressbar from "./elements/progressbar/Progressbar";

import Portfolio from "./elements/portfolio/Portfolio";
import portfolioThreeColumn from "./elements/portfolio/PortfolioThreeColumn";
import PortfolioFullWidth from "./elements/portfolio/PortfolioFullWidth";
import PortfolioGrid from "./elements/portfolio/PortfolioGrid";
import PortfolioBoxLayout from "./elements/portfolio/PortfolioBoxLayout";
import PortfolioDetails from "./pages/PortfolioDetails";
import Social from "./elements/social/Social";
import Team from "./elements/team/Team";
import Timeline from "./elements/timeline/Timeline";
import Testimonial from "./elements/testimonial/Testimonial";
import RnAccordion from "./elements/accordion/RnAccordion";
import Tab from "./elements/tab/Tab";
import Pricing from "./elements/pricing/Pricing";
import Split from "./elements/split/Split";
import CalltoAction from "./elements/calltoaction/CalltoAction";
import Video from "./elements/video/Video";
import Gallery from "./elements/gallery/Gallery";
import Simulator from "./covisart/Simulator";
import Contact from "./elements/contact/Contact";
import Brand from "./elements/brand/Brand";
import AdvanceTab from "./elements/advancetab/AdvanceTab";
import AdvancePricing from "./elements/advancePricing/AdvancePricing";


import BlogGridView from "./components/blog/BlogGridView";
import BlogListView from "./components/blog/BlogListView";
import BlogGridSidebar from "./components/blog/BlogGridSidebar";
import BlogListSidebar from "./components/blog/BlogListSidebar";
import BlogDetails from "./pages/BlogDetails";
import Error from "./pages/Error";

// Import Css Here
import './assets/scss/style.scss';


const App = () => {

//initializeGtag('G-XTQCE7S8BR'); // Your tracking code

return (
<Router>
<PageScrollTop>
<Routes>
<Route path={`${process.env.PUBLIC_URL + "/ngs"}`} element={<NGS/>} />
<Route path={`${process.env.PUBLIC_URL + "/"}`} element={<Company/>} />
<Route path={`${process.env.PUBLIC_URL + "/contact"}`} element={<Contact/>} />

<Route path={`${process.env.PUBLIC_URL + "/business-consulting"}`} element={HomeDefault} />
<Route path={`${process.env.PUBLIC_URL + "/business-consulting-2"}`} element={BusinessConsulting2} />
<Route path={`${process.env.PUBLIC_URL + "/corporate"}`} element={Corporate} />
<Route path={`${process.env.PUBLIC_URL + "/business"}`} element={Business} />
<Route path={`${process.env.PUBLIC_URL + "/digital-agency"}`} element={DigitalAgency} />
<Route path={`${process.env.PUBLIC_URL + "/finance"}`} element={Finance} />
<Route path={`${process.env.PUBLIC_URL + "/company"}`} element={Company} />
<Route path={`${process.env.PUBLIC_URL + "/marketing"}`} element={Marketing} />
<Route path={`${process.env.PUBLIC_URL + "/travel-agency"}`} element={TravelAgency} />
<Route path={`${process.env.PUBLIC_URL + "/consulting"}`} element={Consulting} />
<Route path={`${process.env.PUBLIC_URL + "/seo-agency"}`} element={SeoAgency} />
<Route path={`${process.env.PUBLIC_URL + "/personal-portfolio"}`} element={PersonalPortfolio} />
<Route path={`${process.env.PUBLIC_URL + "/event-conference"}`} element={EventConference} />
<Route path={`${process.env.PUBLIC_URL + "/creative-portfolio"}`} element={CreativePortfolio} />
<Route path={`${process.env.PUBLIC_URL + "/freelancer"}`} element={Freelancer} />
<Route path={`${process.env.PUBLIC_URL + "/international-consulting"}`} element={InternationalConsulting} />
<Route path={`${process.env.PUBLIC_URL + "/startup"}`} element={Startup} />
<Route path={`${process.env.PUBLIC_URL + "/web-agency"}`} element={WebAgency} />

{/* Blog Part */}
<Route path={`${process.env.PUBLIC_URL + "/blog-grid"}`} element={BlogGridView} />
<Route path={`${process.env.PUBLIC_URL + "/blog-list-view"}`} element={BlogListView} />
<Route path={`${process.env.PUBLIC_URL + "/blog-grid-sidebar"}`} element={BlogGridSidebar} />
<Route path={`${process.env.PUBLIC_URL + "/blog-list-sidebar"}`} element={BlogListSidebar} />
<Route path={`${process.env.PUBLIC_URL + "/blog-details/:id"}`} element={BlogDetails} />
<Route path={`${process.env.PUBLIC_URL + "/category/:slug"}`} element={CategoryList} />
<Route path={`${process.env.PUBLIC_URL + "/archive/:slug"}`} element={Author} />
<Route path={`${process.env.PUBLIC_URL + "/tag/:slug"}`} element={TagList} />

<Route path={`${process.env.PUBLIC_URL + "/elements"}`} element={Elements} />
<Route path={`${process.env.PUBLIC_URL + "/button"}`} element={Button} />
<Route path={`${process.env.PUBLIC_URL + "/service"}`} element={Service} />
<Route path={`${process.env.PUBLIC_URL + "/counter"}`} element={CounterUp} />
<Route path={`${process.env.PUBLIC_URL + "/progressbar"}`} element={Progressbar} />
<Route path={`${process.env.PUBLIC_URL + "/social-share"}`} element={Social} />
<Route path={`${process.env.PUBLIC_URL + "/team"}`} element={Team} />
<Route path={`${process.env.PUBLIC_URL + "/testimonial"}`} element={Testimonial} />
<Route path={`${process.env.PUBLIC_URL + "/timeline"}`} element={Timeline} />
<Route path={`${process.env.PUBLIC_URL + "/accordion"}`} element={RnAccordion} />
<Route path={`${process.env.PUBLIC_URL + "/tab"}`} element={Tab} />
<Route path={`${process.env.PUBLIC_URL + "/pricing"}`} element={Pricing} />
<Route path={`${process.env.PUBLIC_URL + "/split"}`} element={Split} />
<Route path={`${process.env.PUBLIC_URL + "/call-to-action"}`} element={CalltoAction} />
<Route path={`${process.env.PUBLIC_URL + "/video-popup"}`} element={Video} />
<Route path={`${process.env.PUBLIC_URL + "/gallery"}`} element={Gallery} />
<Route path={`${process.env.PUBLIC_URL + "/brand"}`} element={Brand} />
<Route path={`${process.env.PUBLIC_URL + "/advance-tab"}`} element={AdvanceTab} />
<Route path={`${process.env.PUBLIC_URL + "/advance-pricing"}`} element={AdvancePricing} />
<Route path={`${process.env.PUBLIC_URL + "/about-us"}`} element={AboutUs} />

<Route path={`${process.env.PUBLIC_URL + "/error"}`} element={Error} />

<Route path={`${process.env.PUBLIC_URL + "/portfolio"}`} element={Portfolio} />
<Route path={`${process.env.PUBLIC_URL + "/portfolio-three-column"}`} element={portfolioThreeColumn} />
<Route path={`${process.env.PUBLIC_URL + "/portfolio-full-width"}`} element={PortfolioFullWidth} />
<Route path={`${process.env.PUBLIC_URL + "/portfolio-grid-layout"}`} element={PortfolioGrid} />
<Route path={`${process.env.PUBLIC_URL + "/portfolio-box-layout"}`} element={PortfolioBoxLayout} />
<Route path={`${process.env.PUBLIC_URL + "/portfolio-details/:id"}`} element={PortfolioDetails} />


<Route path={`${process.env.PUBLIC_URL + "/ngs"}`} element={<NGS />} />
<Route path={`${process.env.PUBLIC_URL + "/simulator"}`} element={<Simulator />} />
<Route path={`${process.env.PUBLIC_URL + "/"}`} element={<Company />} />
<Route path={`${process.env.PUBLIC_URL + "/contact"}`} element={<Contact />} />
</Routes>
</PageScrollTop>
</Router>
)
}


export default App
4 changes: 2 additions & 2 deletions src/covisart/Canvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { easing } from 'maath'
import { useSnapshot } from 'valtio'
import { state } from '../elements/tab/store'

export const App = ({ position = [0, 0, 2.5], fov = 25 }) => (
export default function App ({ position = [0, 0, 2.5], fov = 25 }){
<Canvas shadows camera={{ position, fov }} gl={{ preserveDrawingBuffer: true }} eventSource={document.getElementById('root')} eventPrefix="client">
<ambientLight intensity={0.5} />
<Environment files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/potsdamer_platz_1k.hdr" />
Expand All @@ -16,7 +16,7 @@ export const App = ({ position = [0, 0, 2.5], fov = 25 }) => (
</Center>
</CameraRig>
</Canvas>
)
}

function Backdrop() {
const shadows = useRef()
Expand Down
41 changes: 25 additions & 16 deletions src/covisart/Product.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { PayloadSelection } from './Selections/PayloadSelection'
import { useSnapshot } from 'valtio'
import { state } from './store'
import Configuration from './Configuration'
import Simulator from './Simulator';
import { Order, PingAPI, LocalOrder } from './system/OrderRequest';
import ReactGA from "react-ga4";

Expand Down Expand Up @@ -86,7 +87,7 @@ const Product = () => {
<div className="row row--30 align-items-center">
<div className="col-lg-6 mt_md--40 mt_sm--40">
<div style={{ position: "relative" }}>
<Configuration />
<Simulator />
</div>
</div>
<div className="col-lg-6 mt_md--40 mt_sm--40" >
Expand All @@ -108,11 +109,15 @@ const Product = () => {
<div>
<div className="tab-button-panel">
<TabList className="tab-button">
<Tab tabfor="0">
<div className="rn-tab-button">
<button>Color</button>
</div>
</Tab>
{
/*
<Tab tabfor="0">
<div className="rn-tab-button">
<button>Color</button>
</div>
</Tab>
*/
}
<Tab tabfor="1">
<div className="rn-tab-button">
<button>Payload</button>
Expand All @@ -138,17 +143,21 @@ const Product = () => {
</TabList>
</div>
<div className="tab-content-panel">
<TabPanel tabid="0">
<div className="rn-tab-content">
<div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
<p>NGS-360-3 Motion Platform has <a style={{ color: 'yellow' }}>3</a> different color available. All colors are matte and powder painted</p>
<ColorSelection />
<div className="pricing-footer">
<a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Next</a>
{
/*
<TabPanel tabid="0">
<div className="rn-tab-content">
<div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
<p>NGS-360-3 Motion Platform has <a style={{ color: 'yellow' }}>3</a> different color available. All colors are matte and powder painted</p>
<ColorSelection />
<div className="pricing-footer">
<a className="btn-default btn-border" onClick={() => setSelectedTab((selectedTab + 1) % tabCount)}>Next</a>
</div>
</div>
</div>
</div>
</TabPanel>
</TabPanel>
*/
}
<TabPanel tabid="1">
<div className="rn-tab-content">
<div className="inner" style={{ justifyContent: "flex-end", alignItems: "center", flexDirection: "column", display: "flex" }}>
Expand Down Expand Up @@ -249,7 +258,7 @@ const Product = () => {

)
: (
<div id="purchesed" style={{justifyContent:'center', alignItems: "center",flexDirection: "row", display: "flex",}}>
<div id="purchased" style={{ justifyContent: 'center', alignItems: "center", flexDirection: "row", display: "flex", }}>
<CheckCircleTwoTone twoToneColor="#52c41a" />
</div>
)
Expand Down
63 changes: 21 additions & 42 deletions src/covisart/Simulator.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, Suspense } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { useGLTF, Stage, Grid, OrbitControls, Html, MeshDistortMaterial, MeshDiscardMaterial, useProgress } from '@react-three/drei'
import { Canvas, useThree } from '@react-three/fiber'
import { useGLTF, Stage, Grid, OrbitControls, Html, ContactShadows, MeshDiscardMaterial, useProgress } from '@react-three/drei'
import { EffectComposer, Bloom } from '@react-three/postprocessing'
import { Model } from './models/NGS_GLT_V2'
import { Ngs_GLT } from './models/NGS_GLT'
Expand All @@ -14,21 +14,21 @@ function Loader() {
export default function Simulator() {
const { ruler } = useControls({ "ruler": false })
state.ruler = ruler

return (
<Canvas
style={{ height: "100vh" }}
gl={{ logarithmicDepthBuffer: true }}
shadows
frameloop="demand">
<fog attach="fog" args={['black', 15, 21.5]} />
frameloop="demand"
camera={{fov: 45}}>
<Suspense fallback={<Loader />}>
<Stage intensity={0.5} environment="city" adjustCamera={true} >
<Kamdo url="/covisart/models/NGS_GLT_V2-transformed.glb" />
<Stage intensity={0.5} environment="city" adjustCamera={false} >
<Ngs_GLT url="/covisart/models/NGS_GLT_V2-transformed.glb" />
</Stage>
</Suspense>

<Grid
renderOrder={-1}
position={[0, -0.95, 0]}
position={[-0.17, -1.32, 0]}
infiniteGrid
cellSize={0.4}
cellThickness={0.6}
Expand All @@ -38,44 +38,23 @@ export default function Simulator() {
sectionColor={[1, 1, 1]}
fadeDistance={30}
fadeStrength={10} />
<OrbitControls autoRotate={true} autoRotateSpeed={-0.2} enableZoom={false} makeDefault minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} />

<OrbitControls
autoRotate={true}
autoRotateSpeed={-0.4}
enableZoom={false}
makeDefault
minPolarAngle={Math.PI / 2}
maxPolarAngle={Math.PI / 2} />

<ambientLight position={[0, 2, 5]} />
<ambientLight position={[-5, 2, 0]} />
<ambientLight position={[0, 2, -5]} />
<ambientLight position={[5, 2, 0]} />

<EffectComposer disableNormalPass>
<Bloom luminanceThreshold={0.2} mipmapBlur luminanceSmoothing={0} intensity={1.0} />
<Bloom luminanceThreshold={0.2} luminanceSmoothing={0} intensity={1.0} />
</EffectComposer>
</Canvas>
)
}

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx [email protected] s2wt_kamdo_industrial_divinities.glb --transform --simplify
Author: Hansalex (https://sketchfab.com/Hansalex)
License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
Source: https://sketchfab.com/3d-models/s2wt-kamdo-industrial-divinities-f503b70ac05e49a38c81100d71599a1b
Title: S2WT "Kamdo" (Industrial Divinities)
*/

function Kamdo({ url, ...props }) {
const head = useRef()
const { nodes, materials } = useGLTF('/s2wt_kamdo_industrial_divinities-transformed.glb')

return (
<group {...props}>
<group ref={head}>
<mesh castShadow geometry={nodes.stripe001.geometry}>
<MeshDiscardMaterial />
</mesh>
</group>
<Ngs_GLT url={url} position={[0.155, 3, 0]} />
{
//<Female position={[2.5, 0, 0]}/>
}
</group>
)
}

useGLTF.preload('/s2wt_kamdo_industrial_divinities-transformed.glb')
}
Loading

0 comments on commit ec89c4c

Please sign in to comment.