https://www.electromechcomp.com/_next/static/chunks/3976.504a23a80b790144.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3976],{23976:(e,t,r)=>{r.r(t),r.d(t,{default:()=>W});var l=r(95155),s=r(98638),n=r(81781),o=r(45911),i=r(63018),a=r(12115),c=r(46962),u=r(57575),d=r(622),p=r(86275),f=r(91647),h=r(52011),m=r(97650),x=r(45306),g=r(40041),y=r(83633),v=r(45282);let j={position:[0,0,25],zoom:50,target:[0,0,0]},b=function(e,t){let r=[],l=new Set,s=[],n="";for(let o of e.split("\n")){let e=o.trim();if(e.startsWith("v ")){let t=e.split(/\s+/);r.push([parseFloat(t[1]),parseFloat(t[2]),parseFloat(t[3])])}else if(e.startsWith("o "))n=e.slice(2).trim();else if(e.startsWith("f ")&&n===t){let t=e.split(/\s+/).slice(1).map(e=>parseInt(e.split("/")[0],10)-1);for(let e=0;e<t.length;e++){let r=t[e],n=t[(e+1)%t.length],o=r<n?`${r},${n}`:`${n},${r}`;l.has(o)||(l.add(o),s.push([r,n]))}}}let o=new Float32Array(6*s.length);for(let e=0;e<s.length;e++){let[t,l]=s[e],n=r[t],i=r[l];o[6*e+0]=n[0],o[6*e+1]=n[1],o[6*e+2]=n[2],o[6*e+3]=i[0],o[6*e+4]=i[1],o[6*e+5]=i[2]}return o},w={red:"hydraulics-pneumatics",green:"power-electronics",yellow:"hardware",blue:"avionics"},A={red:"#FA6557",green:"#327C95",yellow:"#D99F2B",blue:"#3263CD"},k=(0,a.forwardRef)(({spheres:e,getColorForSphere:t,activeCategory:r,categories:s},n)=>{let o={red:(0,a.useRef)(null),green:(0,a.useRef)(null),blue:(0,a.useRef)(null),yellow:(0,a.useRef)(null)},i=(0,a.useMemo)(()=>new m.Gu$(.5,16,16),[]),c=(0,a.useMemo)(()=>{let r={red:[],green:[],blue:[],yellow:[]};return e.forEach(e=>{r[t(e.name)].push(e)}),r},[e,t]),u=(e,t)=>{if(!e)return;let r=new m.B69;t.forEach((t,l)=>{r.position.set(...t.position),r.scale.setScalar(t.size),r.updateMatrix(),e.setMatrixAt(l,r.matrix)}),e.instanceMatrix.needsUpdate=!0,e.computeBoundingSphere()};return(0,a.useEffect)(()=>{u(o.red.current,c.red),u(o.green.current,c.green),u(o.blue.current,c.blue),u(o.yellow.current,c.yellow)},[c,o.red,o.green,o.blue,o.yellow]),(0,l.jsx)(l.Fragment,{children:["red","green","blue","yellow"].map(e=>{let t=w[e],n=s[t]?.color??A[e];return(0,l.jsx)("instancedMesh",{ref:o[e],visible:r===t,args:[i,new m._4j({color:n,metalness:.85,roughness:.55,emissive:n,emissiveIntensity:2,toneMapped:!1}),c[e].length]},e)})})});k.displayName="SphereInstances";let N=function({scale:e,position:t,activeCategory:r,refreshView:s,orbitRef:n,categories:i,isMobile:c,userControlled:u}){let d=(0,h.G)(m.Y9S,"/models/plane-no-spheres.obj"),p=(0,h.G)(m.Y9S,"/models/sphere_positions.json"),w=(0,a.useMemo)(()=>JSON.parse(p),[p]),A=(0,a.useRef)(null),{size:N,camera:R,invalidate:M}=(0,h.C)(),E=(0,a.useMemo)(()=>{let e=b(d,"Plane_-_Base_-_Mesh"),t=new y.n;t.setPositions(e);let r=new x.G({color:0xfaf5ef,linewidth:.8,depthWrite:!1});return new g.b(t,r)},[d]);E.material.resolution.set(N.width,N.height);let C=(0,a.useMemo)(()=>new v.L().parse(d),[d]),S=(0,a.useMemo)(()=>{let e=null;return C.traverse(t=>{t.isMesh&&"Plane_-_Base_-_Mesh"===t.name&&(e=t.geometry)}),e},[C]);(0,a.useEffect)(()=>{let e=i[r]?.camera??j,t="power2.inOut";o.Ay.killTweensOf(R.position),o.Ay.killTweensOf(R),n.current&&o.Ay.killTweensOf(n.current.target),A.current&&o.Ay.killTweensOf(A.current.rotation),o.Ay.to(R.position,{x:e.position[0],y:e.position[1],z:e.position[2],duration:1,ease:t,overwrite:!0,onUpdate:()=>M()}),o.Ay.to(R,{zoom:e.zoom,duration:1,ease:t,overwrite:!0,onUpdate:()=>{R.updateProjectionMatrix(),M()}}),n.current&&o.Ay.to(n.current.target,{x:e.target[0],y:e.target[1],z:e.target[2],duration:1,ease:t,overwrite:!0,onUpdate:()=>{n.current?.update(),M()}}),i[r]&&A.current&&o.Ay.to(A.current.rotation,{y:0,duration:1,ease:t,overwrite:!0,onUpdate:()=>M()})},[r,i,R,M,n,s]);let L=(0,f._5)("Camera Debug",{enabled:!1,x:{value:0,min:-100,max:100,step:.1},y:{value:0,min:-100,max:100,step:.1},z:{value:25,min:-100,max:100,step:.1},zoom:{value:50,min:1,max:200,step:1},lookAtX:{value:0,min:-100,max:100,step:.1},lookAtY:{value:0,min:-100,max:100,step:.1},lookAtZ:{value:0,min:-100,max:100,step:.1}});return(0,a.useEffect)(()=>{L.enabled&&(R.position.set(L.x,L.y,L.z),"zoom"in R&&(R.zoom=L.zoom,R.updateProjectionMatrix()),n.current&&(n.current.target.set(L.lookAtX,L.lookAtY,L.lookAtZ),n.current.update(

1)),M())},[L.enabled,L.x,L.y,L.z,L.zoom,L.lookAtX,L.lookAtY,L.lookAtZ,R,M,n]),(0,h.D)((e,t)=>{let l=!i[r];c&&l&&A.current&&(A.current.rotation.y+=.05*t,e.invalidate()),!c&&l&&A.current&&!u&&(A.current.rotation.y+=.05*t,e.invalidate())}),(0,l.jsxs)("group",{scale:e,position:t,ref:A,children:[(0,l.jsx)("group",{renderOrder:0,children:S&&(0,l.jsx)("mesh",{geometry:S,children:(0,l.jsx)("meshStandardMaterial",{colorWrite:!1,side:m.hsX,polygonOffset:!0,polygonOffsetFactor:1,polygonOffsetUnits:1})})}),(0,l.jsx)("group",{renderOrder:1,children:(0,l.jsx)(k,{spheres:w,getColorForSphere:e=>{switch(e.split("_-_")[1]?.split("_")[0]??""){case"Red":default:return"red";case"Green":return"green";case"Blue":return"blue";case"Yellow":return"yellow"}},activeCategory:r,categories:i})}),(0,l.jsx)("group",{renderOrder:2,children:S&&(0,l.jsx)("mesh",{geometry:S,children:(0,l.jsx)("meshStandardMaterial",{colorWrite:!1,side:m.hB5,polygonOffset:!0,polygonOffsetFactor:1,polygonOffsetUnits:1})})}),(0,l.jsx)("group",{renderOrder:3,children:(0,l.jsx)("primitive",{object:E})})]})};function R({activeCategory:e,refreshView:t,categories:r,planeMovementOnMobile:s,isMobile:n}){let o=(0,a.useRef)(null),i=(0,a.useRef)(null),[c,h]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let e=o.current;if(!e)return;let t=()=>{e.style.cursor="grabbing"},r=()=>{e.style.cursor="grab"};return e.addEventListener("mousedown",t),e.addEventListener("mouseup",r),()=>{e.removeEventListener("mousedown",t),e.removeEventListener("mouseup",r)}},[]),(0,a.useEffect)(()=>{r[e]||h(!1)},[e,r]),(0,l.jsxs)(p.Hl,{ref:o,frameloop:"demand",className:"scene-canvas",gl:{antialias:!0},camera:{position:[0,0,25],near:.1,far:1e3,zoom:50},orthographic:!0,children:[(0,l.jsx)("color",{attach:"background",args:["#232323"]}),(0,l.jsx)(f.XA,{hidden:!0}),(0,l.jsx)(u.N,{ref:i,enableZoom:!1,enableRotate:!n||s,enablePan:!1,onStart:()=>{c||h(!0)}}),(0,l.jsxs)(a.Suspense,{fallback:null,children:[(0,l.jsx)(N,{scale:1,position:[0,-1.5,0],activeCategory:e,refreshView:t,orbitRef:i,categories:r,isMobile:n,userControlled:c}),(0,l.jsx)(d.OH,{files:"/models/env/rooitou_park_512.hdr",resolution:128})]})]})}var M=r(29722),E=r(90791),C=r(96005);function S({activeCategory:e,toggleSpheres:t,containerRef:r,categories:s}){return(0,l.jsxs)("div",{className:"categories",ref:r,children:[Object.entries(s).filter(([e])=>"default"!==e).map(([r,s])=>(0,l.jsxs)("button",{className:(0,M.A)("category-button",r,e===r&&"is-active"),style:{"--category-color":s.color},onClick:()=>t(r),children:[(0,l.jsxs)("p",{className:"category-button-label",children:[s.label," ",(0,l.jsx)("span",{className:"arrow",children:"→"})]}),(0,l.jsx)("div",{className:"category-button-circle"})]},r)),(0,l.jsxs)("button",{className:"category-button last flex md:hidden!",onClick:()=>t("default"),children:[(0,l.jsx)("p",{className:"category-button-label",children:"Reset View"}),(0,l.jsx)("div",{className:"category-button-circle"})]})]})}let L="power2.in",F="power2.out",O=(0,a.forwardRef)(function({toggleSpheres:e,activeCategory:t,categories:r},s){let n,i=(0,a.useRef)(null),c=(0,a.useRef)(null),u=(0,a.useRef)(null),d=(0,a.useRef)(null),p=(0,a.useRef)(null),f=(0,a.useRef)(null),h=(0,a.useRef)(null),m=(0,a.useRef)(0),x=(0,a.useRef)(!1),g=(0,a.useRef)(!1),y=(0,a.useRef)(null),[v,j]=(0,a.useState)(!1);(0,a.useImperativeHandle)(s,()=>({categoriesRef:c,resetRef:u,overlayRef:i}));let[b,w]=(0,a.useState)(t),[A,k]=(0,a.useState)(0),N=r[b]?.products??[],R=()=>

1[d.current,p.current,f.current].filter(Boolean),O=e=>{let t=R();t.length?(o.Ay.killTweensOf(t),o.Ay.to(t,{opacity:0,duration:.45,ease:L,onComplete:()=>{x.current=!0,k(e)}})):k(e)},_=()=>O(e=>(e-1+N.length)%N.length),B=()=>O(e=>(e+1)%N.length);(0,a.useEffect)(()=>{if(!x.current)return;x.current=!1;let e=R();if(!e.length)return;let t=()=>{o.Ay.fromTo(e,{opacity:0},{opacity:1,duration:.45,ease:F})},r=p.current?.querySelector("img");!r||r.complete?t():(r.addEventListener("load",t,{once:!0}),r.addEventListener("error",t,{once:!0}))},[A]),(0,a.useEffect)(()=>{if(!g.current)return;g.current=!1;let e=i.current;if(!e)return;let t=()=>{o.Ay.set(e.querySelectorAll(".product-overlay-card"),{clearProps:"opacity"}),o.Ay.to(e,{opacity:1,duration:.45,ease:F})},r=p.current?.querySelector("img");!r||r.complete?t():(r.addEventListener("load",t,{once:!0}),r.addEventListener("error",t,{once:!0}))},[b]),(0,a.useEffect)(()=>{let e=i.current;if(!e)return;let r=e.querySelectorAll(".product-overlay-card");o.Ay.killTweensOf(r),y.current?.kill(),j(!1),t&&"default"!==t?0===r.length?(w(t),k(0),o.Ay.set(e,{visibility:"visible",opacity:0}),y.current=o.Ay.to(e,{opacity:1,duration:.45,ease:F})):o.Ay.to(r,{opacity:0,duration:.45,ease:L,onComplete:()=>{g.current=!0,w(t),k(0),o.Ay.set(e,{visibility:"visible",opacity:0})}}):y.current=o.Ay.to(e,{opacity:0,duration:.45,ease:L,onComplete:()=>{o.Ay.set(e,{visibility:"hidden"}),w(t)}})},[t]);let z=b&&"default"!==b;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(S,{activeCategory:t,toggleSpheres:e,containerRef:c,categories:r}),(0,l.jsx)("div",{ref:i,className:"products-overlay",style:{opacity:0,visibility:"hidden"},children:z&&((n=r[b]?.products[A])?(0,l.jsxs)("div",{className:"product-overlay-card",children:[(0,l.jsxs)("div",{className:"flex flex-col gap-[10px] md:hidden",children:[(0,l.jsxs)("div",{className:"flex justify-between",children:[(0,l.jsx)("div",{ref:d,children:(0,l.jsxs)(E.A,{className:"flex items-center gap-[15px]",href:n.link||null,blank:!0,children:[(0,l.jsx)("p",{className:"product-overlay-title text-caption",children:n.title}),(0,l.jsx)("svg",{width:"12",height:"12",viewBox:"0 0 14 14",fill:"none",children:(0,l.jsx)("path",{d:"M0.986295 0.75L13.127 0.750001L13.127 12.8907M12.5892 1.28821L0.530273 13.3466",stroke:"#FAF5EF",strokeWidth:"1.5"})})]})}),r[b]?.products?.length>1&&(0,l.jsxs)("div",{className:"flex items-center gap-[18px]",children:[(0,l.jsx)("button",{onClick:_,children:(0,l.jsx)("svg",{width:"9.26",height:"16",viewBox:"0 0 11 19",fill:"none",children:(0,l.jsx)("path",{d:"M9.64551 17.6998L1.06074 9.11504L9.64551 0.530273",stroke:"#FAF5EF",strokeWidth:"1.5"})})}),(0,l.jsx)("button",{onClick:B,children:(0,l.jsx)("svg",{width:"9.26",height:"16",viewBox:"0 0 11 19",fill:"none",children:(0,l.jsx)("path",{d:"M0.530274 0.530407L9.11505 9.11518L0.530273 17.7",stroke:"#FAF5EF",strokeWidth:"1.5"})})})]})]}),(0,l.jsx)("hr",{})]}),(0,l.jsxs)("div",{className:"flex gap-[14px]",children:[(0,l.jsxs)("div",{className:"product-overlay-slides",style:{border:`1.5px solid ${r[b]?.color}`},children:[(0,l.jsxs)("div",{className:"product-overlay-image-wrapper relative",ref:p,children:[(0,l.jsx)("div",{className:"product-overlay-image relative",children:n.image&&(0,l.jsx)(l.Fragment,{children:(0,l.jsx)(C.A,{...n.image,style:{objectFit:"contain"}})})}),r[b]?.products?.length>1&&(0,l.jsxs)("div",{className:"absolute right-0 left-0 hidden w-full justify-between px-2 md:flex",children:[(0,l.jsx)("button",{onClick:_,children:(0,l.jsx)("svg",{width:"9.26",height:"16",viewBox:"0 0 11 19",fill:"none",children:(0,l.jsx)("path",{d:"M9.64551 17.6998L1.06074 9.11504L9.64551 0.530273",stroke:r[b]?.color,strokeWidth:"1.5"})})}),(0,l.jsx)("button",{onClick:B,children:(0,l.jsx)("svg",{width:"9.26",height:"16",viewBox:"0 0 11 19",fill:"none",children:(0,l.jsx)("path",{d:"M0.530274 0.530407L9.11505 9.11518L0.530273 17.7",stroke:r[b]?.color,strokeWidth:"1.5"})})})]})]}),(0,l.jsx)(E.A,{href:n.link||null,blank:!0,className:"product-overlay-button hidden md:flex",style:{backgroundColor:r[b]?.color},children:"See Product"})]}),(0,l.jsxs)("div",{className:"product-overlay-text",children:[(0,l.jsxs)("div",{ref:f,className:"",children:[(0,l.jsxs)("div",{className:"hidden flex-col gap-[5px] md:flex",children:[(0,l.jsx)("p",{className:"product-overlay-title text-caption",children:n.title}),(0,l.jsx)("hr",{})]}),(0,l.jsx)("p",{ref:h,className:(0,M.A)("product-overlay-description text-body overflow-hidden text-balance md:line-clamp-none md:overflow-visible",!v&&"line-clamp-3"),children:n.description})]}),(0,l.jsx)("button",{className:"text-caption text-left text-[#9B9994]! md:hidden",onClick:()=>{let e=h.current;if(e)if(v)j(!1),o.Ay.to(e,{height:m.current,duration:.45,ease:"power4.in",onComplete:()=>o.Ay.set(e,{clearProps:"height"})});else{e.style.setProperty("-webkit-line-clamp","unset");let t=e.scrollHeight;e.style.removeProperty("-webkit-line-clamp"),m.current=e.clientHeight,j(!0),o.Ay.fromTo(e,{height:m.current},{height:t,duration:.45,ease:"power4.out",onComplete:()=>o.Ay.set(e,{height:"auto"})})}},children:v?"Read Less":"Read More"})]})]})]}):null)}),(0,l.jsx)("div",{className:"reset hidden md:block",ref:u,children:(0,l.jsxs)("button",{className:"category-button",onClick:()=>e("default"),children:[(0,l.jsx)("p",{className:"category-button-label",children:"Reset View"}),(0,l.jsx)("div",{className:"category-button-circle"})]})})]})});var _=r(77600),B=r(52418),z=r(35118),P=r(72388);function T({started:e}){(0,n.p)();let{active:t,progress:r}=function(e){let[t,r]=(0,a.useState)(0),[l,s]=(0,a.useState)(!0),n=(0,a.useRef)(0),o=(0,a.useRef)(0);return(0,a.useEffect)(()=>

1{if(!e)return;o.current=performance.now();let t=e=>{let l=Math.min(100,(e-o.current)/300*100);r(l),l>=100?s(!1):n.current=requestAnimationFrame(t)};return n.current=requestAnimationFrame(t),()=>cancelAnimationFrame(n.current)},[e]),{active:l,progress:t}}(e),s=(0,a.useRef)(null);return(0,a.useEffect)(()=>{!t&&s.current&&o.Ay.to(s.current,{autoAlpha:0,duration:.5})},[t]),(0,l.jsx)("div",{ref:s,className:"scene-loader flex flex-col gap-0",children:(0,l.jsxs)("div",{className:"relative h-40 w-40",children:[(0,l.jsx)("svg",{className:"absolute h-full w-full","aria-hidden":"true",focusable:"false",role:"presentation",width:"45",height:"32",viewBox:"0 0 45 32",preserveAspectRatio:"xMidYMid meet",children:(0,l.jsx)("path",{fill:"var(--color-primary-bg)",d:"M44.7 22.4 23.3.6c-.5-.5-1.2-.5-1.6 0L.3 22.4A31 31 0 0 0 9 28.6l6.9-10.5c.3-.5 1 0 .9.5l-4.1 11.6c2.9 1 5.6 1.5 8.7 1.6l.6-5c.1-.6 1-.6 1 0l.8 5c3-.1 5.6-.7 8.5-1.6l-4-11.6c-.3-.6.5-1 .8-.5l7 10.5c3-1.5 6-3.5 8.6-6.2Z"})}),(0,l.jsxs)("svg",{className:"absolute h-full w-full","aria-hidden":"true",focusable:"false",role:"presentation",width:"45",height:"32",viewBox:"0 0 45 32",preserveAspectRatio:"xMidYMid meet",style:{fill:"var(--color-primary-bg)",clipPath:`inset(${100-r}% 0 0 0)`},children:[(0,l.jsx)("path",{fill:"url(#preloader-gradient)",d:"M44.7 22.4 23.3.6c-.5-.5-1.2-.5-1.6 0L.3 22.4A31 31 0 0 0 9 28.6l6.9-10.5c.3-.5 1 0 .9.5l-4.1 11.6c2.9 1 5.6 1.5 8.7 1.6l.6-5c.1-.6 1-.6 1 0l.8 5c3-.1 5.6-.7 8.5-1.6l-4-11.6c-.3-.6.5-1 .8-.5l7 10.5c3-1.5 6-3.5 8.6-6.2Z"}),(0,l.jsx)("defs",{children:(0,l.jsxs)("linearGradient",{id:"preloader-gradient",x1:"0",x2:"0",y1:"0",y2:"1",children:[(0,l.jsx)("stop",{offset:"0%",stopColor:"#3263cd"}),(0,l.jsx)("stop",{offset:"47.16%",stopColor:"#6298c0"}),(0,l.jsx)("stop",{offset:"84.33%",stopColor:"#f4af9f"})]})})]}),(0,l.jsx)("div",{className:"absolute top-7 right-1 text-xs",children:Math.round(r)})]})})}function W({block:e,index:t,skipOutroTweens:r,isFirstBlock:n}){let u=(0,a.useRef)(null),d=(0,a.useRef)(null),p=(0,a.useRef)(null),[f,h]=(0,a.useState)(""),[m,x]=(0,a.useState)(!1),[g,y]=(0,a.useState)(!1),v=(0,z.w)(),j=(0,B.a)();(0,_.k0)();let b=(0,a.useRef)(null),w=(0,a.useRef)(null),{planeMovementOnMobile:A,...k}=e,N=(0,a.useMemo)(()=>Object.fromEntries((e.capabilities??[]).filter(e=>e.key).map(e=>[e.key,e])),[e.capabilities]);return(0,a.useEffect)(()=>{v&&y(!0)},[v]),(0,P.C)({sectionRef:u,sectionTitleRef:p,pathname:"/",dependencies:[j],enabled:!v&&!j,onSetup:(e,t)=>{let l=!1;if(!u.current||j)return;let s=()=>{l=!0};i.u.addEventListener("refresh",s),t(()=>i.u.removeEventListener("refresh",s));let a=()=>{setTimeout(()=>{y(!0)},500)};if(!n&&u.current){let e=u.current;e.addEventListener("crossfade-starting",a),t(()=>e.removeEventListener("crossfade-starting",a))}else y(!0);if(e.to({},{duration:.05}),e.addLabel("scroll-anchor"),e.to({},{duration:.025}),!r){let t=b.current.querySelector(".scene-canvas");e.fromTo(d.current,{clipPath:"inset(30px 30px 30px 30px round 10px)"},{clipPath:"inset(0px 0px 0px 0px round 1px)",duration:.125,immediateRender:!1},"<0.05"),e.fromTo([w.current?.categoriesRef.current,w.current?.overlayRef.current,w.current?.resetRef.current,b.current],{opacity:1},{opacity:0,duration:.25},"<"),e.to({},{duration:.01,onStart:()=>{l&&o.Ay.set(t,{pointerEvents:"none"})},onReverseComplete:()=>{l&&o.Ay.set(t,{pointerEvents:"auto"})}},"<0.1")}}}),(0,s.L)(()=>{j&&y(!0)},{dependencies:[j]}),(0,l.jsx)(c.A,{ref:u,...k,index:t,"data-scroll-duration":1,navScrollOffset:0,"aria-label":e.title,className:"capabilities-wrapper st-pin pinned pinned-block full-bleed full-width wrapper block-theme-gradient flex h-dvh flex-col",children:(0,l.jsx)("div",{className:"plane-scene-wrapper",ref:d,children:(0,l.jsxs)("div",{className:"plane-scene-card",children:[(0,l.jsx)(O,{ref:w,toggleSpheres:e=>{h(e),x(!m)},activeCategory:f,categories:N}),(0,l.jsxs)("div",{className:"absolute inset-0",ref:b,children:[(0,l.jsx)(R,{activeCategory:f,refreshView:m,categories:N,planeMovementOnMobile:A,isMobile:j}),(0,l.jsx)(T,{started:g})]})]})})})}}}]);