var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of m(e))!N.call(a,c)&&c!==s&&l(a,c,{get:()=>e[c],enumerable:!(t=h(e,c))||t.enumerable});return a};var y=(a,e,s)=>(s=a!=null?d(u(a)):{},i(e||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),b=a=>i(l({},"__esModule",{value:!0}),a);var r=k((T,o)=>{o.exports=_jsx_runtime});var j={};g(j,{default:()=>x,frontmatter:()=>f});var n=y(r()),f={title:"How To Build an Ecommerce Store with Shopify, Next js and React three fiber / Three js",publishedAt:"July 3, 2024",summary:"Create a stunning 3D ecommerce store using Shopify, Next.js 14, React Three Fiber, and Three.js. Step-by-step guide included."};function p(a){let e=Object.assign({p:"p",strong:"strong",a:"a",h1:"h1",h3:"h3",ul:"ul",li:"li",em:"em",pre:"pre",code:"code",span:"span",h4:"h4",h2:"h2"},a.components),{Image:s}=e;return s||v("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Hey everyone!"}),` Today, we\u2019re going to learn on how to build a super cool online store to showcase a 3D model of a Senseo Philips coffee machine. We\u2019ll use Blender for modeling, Next.js for building our website, Shopify for managing our products, and React Three Fiber with Three.js for the 3D stuff. Ready? Let\u2019s dive in!`]}),` `,(0,n.jsx)(e.p,{children:`Have you ever seen those impressive product design websites / webapps show casing their products to their customers that are immersive, exact replica of their product, realisitc and practical? Some Companies like Apple do it to show their top products like their iphones, headphones, laptops and mac studios.`}),` `,(0,n.jsxs)("div",{className:"flex flex-wrap rounded-lg",children:[(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 1.jpg",width:200,height:200,reset:!0,alt:"apple-images"}),(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 2.jpg",width:200,height:200,reset:!0,alt:"apple-images"}),(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 3.jpg",width:200,height:200,reset:!0,alt:"apple-images"}),(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 4.jpg",width:200,height:200,reset:!0,alt:"apple-images"}),(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 5.jpg",width:200,height:200,reset:!0,alt:"apple-images"}),(0,n.jsx)(s,{src:"/blog/shopifywiththreejs/apple 6.jpg",width:200,height:200,reset:!0,alt:"apple-images"})]}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsxs)(e.p,{children:[`This all are taken from Apple's Website found on `,(0,n.jsx)(e.a,{href:"https://www.apple.com/ipad-pro/",children:"Apple.com"})," all credits are owned by Apple!"]})}),` `,(0,n.jsx)(e.p,{children:"Lets do this shall we then"}),` `,(0,n.jsx)(e.h1,{id:"step-1-modeling-a-3d-senseo-philips-coffee-machine-in-blender-3d",children:"Step 1: Modeling A 3D Senseo Philips Coffee Machine in Blender 3D"}),` `,(0,n.jsx)(e.h3,{id:"1-what-is-blender",children:"1. What is Blender?"}),` `,(0,n.jsx)(e.p,{children:`If you've never heard of blender, must be nice living under a rock! Blender is a free tool to create 2d and 3D models or create animations. It has and is being used to make anything you can imagine in the 2S and 3D world including video editing and compositing. In our case Imagine you\u2019re making a 3D sculpture on your computer!`}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Download blender from the official blender page ",(0,n.jsx)(e.a,{href:"https://www.blender.org/download/",children:"blender"})]}),` `,(0,n.jsx)(e.li,{children:"Open Blender and start a new project."}),` `,(0,n.jsx)(e.li,{children:"Use the tools in Blender to create your coffee machine model. What ever kind you want you can try it out. Don\u2019t worry if it takes some time \u2013 just have fun with it!"}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:[(0,n.jsx)(e.em,{children:"if you want to use my 3D model you can download it right here"})," and give it a start while your at it will ya"]})}),` `," ",` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://github.com/milkiascha7/3d-Model-File",children:(0,n.jsx)(e.strong,{children:"Senseo Model"})})})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Once you\u2019re done, export your model as a .glb file. This is a special format for 3D models."}),` `,(0,n.jsx)("br",{}),` `]}),` `]}),` `,(0,n.jsx)(e.h1,{id:"step-2-setting-up-nextjs",children:"Step 2: Setting Up Next.js"}),` `,(0,n.jsx)(e.h3,{id:"1-create-a-new-nextjs-project",children:"1. Create a New Next.js Project"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Open your terminal and run:"}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:`npx create-next-app my-ecommerce-store `})})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"This sets up a new project with everything you need."}),` `]}),` `,(0,n.jsx)(e.h3,{id:"2-install-react-three-fiber-drei-and-threejs",children:"2. Install React Three Fiber, Drei and Three.js:"}),` `,(0,n.jsx)(e.p,{children:"These are the packages we use to display 3D models on the web. Install them by running:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:`npm install @react-three/fiber three @react-three/drei `})})}),` `,(0,n.jsx)(e.p,{children:"If you have no clue about three js, react three fiber and drei check out this links. They do have comprehensive gides on where to start. I suggest you start of with three js before react three fiber."}),` `,(0,n.jsxs)(e.p,{children:["Three Js Docs => ",(0,n.jsx)(e.a,{href:"https://threejs.org/",children:"three.js"})]}),` `,(0,n.jsxs)(e.p,{children:["R3F Docs => ",(0,n.jsx)(e.a,{href:"https://docs.pmnd.rs/react-three-fiber/getting-started/introduction",children:"react three fiber"})]}),` `,(0,n.jsxs)(e.p,{children:["Pmndrs Drei => ",(0,n.jsx)(e.a,{href:"https://github.com/pmndrs/drei",children:"pmndrs drei"})]}),` `,(0,n.jsx)(e.h3,{id:"step-3-converting-the-model-for-the-web",children:"Step 3: Converting the Model for the Web"}),` `,(0,n.jsx)(e.p,{children:"Just so we can manipulate the model as we desire, we want to convert the glb file into a jsx component. How do we do that? Well you have two options."}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"First"})," you can drop the model on the ",(0,n.jsx)(e.a,{href:"https://gltf.pmnd.rs/",children:"gltf.pmnd"}),` website which shows you the model in real time and gives you the sample code which is the jsx we want. You then copy the jsx from the button copy clipboard and paste it inisde your project file.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Second"})," You can use a package called ",(0,n.jsx)(e.strong,{children:"gltfjsx"})," which you manually turn the glb file to jsx on your own local machine."]}),` `,(0,n.jsx)(e.h4,{id:"what-is-gltfjsx",children:"What is gltfjsx?"}),` `,(0,n.jsx)(e.p,{children:"It\u2019s a tool that helps us turn our .glb model into a format we can use in our React website."}),` `,(0,n.jsx)(e.p,{children:"Use gltfjsx to convert your .glb file into a JSX component. This makes it easier to include the model in our React code."}),` `,(0,n.jsx)(e.p,{children:"You can do this by running a command in your terminal (a special program where you type commands):"}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[" npx gltfjsx model",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"glb"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// ^^^ Source of the glb file"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsx)(e.span,{className:"token comment",children:"// if your using typescript add types too"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["To read more about this check out this repo on github ",(0,n.jsx)(e.a,{href:"https://github.com/pmndrs/gltfjsx",children:"gltfjsx"})]}),` `,(0,n.jsx)(e.h1,{id:"step-4-displaying-the-3d-model",children:"Step 4: Displaying the 3D Model"}),` `,(0,n.jsxs)(e.p,{children:["Weather you have copied from the ",(0,n.jsx)(e.a,{href:"https://gltf.pmnd.rs/",children:"gltf.pmnd"})," website or used gltfjsx command to get the model in jsx format you have to:"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"In your Next.js project, create a new component to hold your 3D model."}),` `,(0,n.jsx)(e.li,{children:"Import React Three Fiber and your converted JSX model."}),` `,(0,n.jsx)(e.li,{children:"Use these tools to set up a scene and add your model to it."}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Canvas"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@react-three/fiber"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CoffeeMachineModel"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"./CoffeeMachineModel"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"CoffeeMachine"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"5",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Canvas"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"ambientLight"]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"pointLight"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"position"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"CoffeeMachineModel"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"10",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // ^^^^jsx component extracted from the glb model `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"14",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"CoffeeMachine"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"The CoffeeMachineModel looks something like this"}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"three"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"React"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useEffect",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useRef ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"react"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"3",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useGLTF",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," useTexture ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"@react-three/drei"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"GLTF"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"three-stdlib"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"type"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"GLTFResult"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token constant",children:"GLTF"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[" nodes",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"8",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cylinder001"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mesh"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cylinder001_1"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mesh"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cylinder005"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mesh"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cylinder005_1"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mesh"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" main_body_black_All_Baked",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Mesh"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" materials",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"Body upper.001"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MeshStandardMaterial"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" plastic",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MeshPhysicalMaterial"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"plastic.002"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MeshPhysicalMaterial"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"BAKED BLACK"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"THREE"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MeshStandardMaterial"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"21",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Model"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"JSX"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"IntrinsicElements"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"group"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"any"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," nodes",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," materials ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useGLTF"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token string",children:'"/model/coffeemachinemodel.glb"'}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"as"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"GLTFResult"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"26",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"group"]})," ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"props",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"dispose"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"null"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"group"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"Scene",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"group"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"31",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"back_water_holder",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"32",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"position"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"0.064"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"2.73"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.526"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"33",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rotation"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"1.567"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"mesh"]}),` `]})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"36",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"Cylinder001",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"37",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"castShadow"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"38",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"receiveShadow"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"39",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"geometry"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"nodes",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Cylinder001"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"geometry"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"40",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"material"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"materials",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"Body upper.001"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"43",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` // ..... `})}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"44",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"45",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"46",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"47",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"48",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:["useGLTF",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"preload"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'"/model/coffeemachinemodel.glb"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Now you need to style the canvas to view the model"}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`you can style it using inline styling or target it with classname or if your using tailwindcss do as want but copy this style or the canvas won't show the model on the dom. You can style it to your own liking.`})}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:["canvas ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" display",(0,n.jsx)(e.span,{className:"token operator",children:":"})," fixed",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" width",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'100%'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" height",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'100vh'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" top",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" left",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" overflow",(0,n.jsx)(e.span,{className:"token operator",children:":"})," hidden",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" background",(0,n.jsx)(e.span,{className:"token operator",children:":"})," black",(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `]}),` `]}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`if you want helpers to see the model in a grid just like one in blender you can add custom helpers in the CoffeeMachine component`})}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"gridHelper"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"args"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0xff0000"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'white'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rotation-y"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"Math"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token constant",children:"PI"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"axesHelper"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"args"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"10"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]})]})}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsx)(e.p,{children:`if you want to Rotate, zoomIn and zoomOut and Pan you should add OrbitControls from @react-three/drei inside your CoffeeMachine Componenet`})}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"OrbitControls"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"makeDefault"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"enableZoom"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rotateSpeed"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token number",children:"0.4"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token attr-name",children:"target"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:(0,n.jsx)(e.span,{className:"token constant",children:"THREE"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Vector3"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0.9"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token tag",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^ where to look at, default is (0,0,0)"}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token tag",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})}),` `]})]})}),` `,(0,n.jsx)("div",{className:"w-full h-full rounded-lg border-4 border-white relative",children:(0,n.jsx)("img",{src:"/blog/shopifywiththreejs/model pic.jpg",width:1400,height:1400,alt:"apple-images",className:"w-full h-full"})}),` `,(0,n.jsx)("figcaption",{children:"Should look like this by now."}),` `,(0,n.jsx)(e.h1,{id:"step-5-adding-animation-with-gsap",children:"Step 5: Adding Animation with GSAP"}),` `,(0,n.jsx)(e.h3,{id:"1-what-is-gsap",children:"1. What is GSAP?"}),` `,(0,n.jsx)(e.p,{children:`GSAP is a library that makes it easy to animate things on the web. Animate Your Model:`}),` `,(0,n.jsx)(e.p,{children:"Install GSAP by running:"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:`npm install gsap @gsap/react `})})}),` `,(0,n.jsx)(e.p,{children:"Use GSAP to add cool animations to your model. For example, you can make parts of the coffee machine move or spin on scroll or when enter on page."}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:"gsap"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"gsap"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"useEffect"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" gsap",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"to"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:'".part"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," rotation",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"360"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," duration",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"2"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^ target"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsxs)(e.p,{children:[`if you want more detail using their new api with react i recommend viewing their docs at `,(0,n.jsx)(e.a,{href:"https://gsap.com/resources/React/",children:"gsap-react"})]})}),` `,(0,n.jsx)(e.h1,{id:"step-6-integrating-with-shopify",children:"Step 6: Integrating with Shopify"}),` `,(0,n.jsx)(e.h3,{id:"what-is-shopify",children:"What is Shopify?"}),` `,(0,n.jsx)(e.p,{children:"Shopify is a platform that helps you manage your products and sell them online."}),` `,(0,n.jsx)(e.h3,{id:"set-up-shopify",children:"Set Up Shopify:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Create a Shopify account at ",(0,n.jsx)(e.a,{href:"https://accounts.shopify.com/signup",children:" Shopify partner account"})]}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://shopify.dev/docs/api/development-stores",children:"Create a Shopify development store"})}),` `,(0,n.jsx)(e.li,{children:"Generate a Storefront API access token to authenticate your API requests and start querying the store data using GraphQL."}),` `,(0,n.jsx)(e.li,{children:'Create a new Shopify app. Check "Allow this app to access your storefront data using using the Storefront API".'}),` `,(0,n.jsx)(e.li,{children:"Add your coffee machine as a product. This can be pictures on the product section of shopify app."}),` `,(0,n.jsx)(e.li,{children:"Use Shopify\u2019s API to connect your Next.js website with your Shopify store. This lets you display product information and handle sales."}),` `]}),` `,(0,n.jsx)("figcaption",{children:(0,n.jsxs)(e.p,{children:[`If your having problems creating a custom app inside your shopify store please check this docs on their help center `,(0,n.jsx)(e.a,{href:"https://help.shopify.com/en/manual/apps/app-types/custom-apps",children:"custom-apps"})]})}),` `,(0,n.jsx)(e.p,{children:"After creating a custom app inside the store and naming it whatever you desire we want to access this store from our next js application, so how do we do that?"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["we have to get the generated Shopify access token and the domain of the store to an ",(0,n.jsx)(e.strong,{children:".env.local"})," file in your newly created application;"]}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"SHOPIFY_STOREFRONT_ACCESS_TOKEN"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"your-token"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token constant",children:"SHOPIFY_STORE_DOMAIN"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"your-store.myshopify.com"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"Great now we can access our store from our next js application, so whats next?"}),` `,(0,n.jsx)(e.p,{children:"well we can fetch our products info like prices, title, tags and so on using GraphQL."}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"create a folder named shopify for our functions to fetch our quries where we can call later inside our pages."}),` `]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," isShopifyError ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"error",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"unknown"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," error ",(0,n.jsx)(e.span,{className:"token keyword",children:"is"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ShopifyErrorLike"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token operator",children:"!"}),(0,n.jsx)(e.span,{className:"token function",children:"isObject"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"error",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"3",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"4",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"error ",(0,n.jsx)(e.span,{className:"token keyword",children:"instanceof"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Error"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"5",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"6",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token function",children:"findError"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"error",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"7",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"8",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"9",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsxs)(e.span,{className:"token generic-function",children:[(0,n.jsx)(e.span,{className:"token function",children:"shopifyFetch"}),(0,n.jsxs)(e.span,{className:"token generic class-name",children:[(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token constant",children:"T"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})]})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"10",children:[" cache ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token string",children:'"force-cache"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"11",children:[" headers",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"12",children:[" query",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"13",children:[" tags",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"14",children:[" variables",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"15",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"16",children:[" cache",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"RequestCache"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"17",children:[" headers",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"HeadersInit"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"18",children:[" query",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"19",children:[" tags",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"string"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"20",children:[" variables",(0,n.jsx)(e.span,{className:"token operator",children:"?"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ExtractVariables"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token constant",children:"T"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"21",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"Promise"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," status",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"number"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"})," body",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token constant",children:"T"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"|"})," ",(0,n.jsx)(e.span,{className:"token builtin",children:"never"}),(0,n.jsx)(e.span,{className:"token operator",children:">"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"22",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"try"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"23",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," result ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"await"})," ",(0,n.jsx)(e.span,{className:"token function",children:"fetch"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"endpoint",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"24",children:[" ",(0,n.jsx)(e.span,{className:"token comment",children:"// ^^ we will fill this endpoint later on"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"25",children:[" method",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"POST"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"26",children:[" headers",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"27",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"Content-Type"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"application/json"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"28",children:[" ",(0,n.jsx)(e.span,{className:"token string-property property",children:'"X-Shopify-Storefront-Access-Token"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," key",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"29",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"headers",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"30",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"31",children:[" body",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token known-class-name class-name",children:"JSON"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"stringify"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"32",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"query ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," query ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"33",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"variables ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," variables ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"34",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"35",children:[" cache",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"36",children:[" ",(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"tags ",(0,n.jsx)(e.span,{className:"token operator",children:"&&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," next",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," tags ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"37",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"38",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"39",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," body ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"await"})," result",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"json"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"40",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"41",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"body",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"errors"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"42",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"throw"})," body",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"errors"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token number",children:"0"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"43",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"44",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"45",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"46",children:[" status",(0,n.jsx)(e.span,{className:"token operator",children:":"})," result",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"status"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"47",children:[" body",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"48",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"49",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"catch"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"e",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"50",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"if"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token function",children:"isShopifyError"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"e",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"51",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"throw"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"52",children:[" cause",(0,n.jsx)(e.span,{className:"token operator",children:":"})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"cause"}),(0,n.jsx)(e.span,{className:"token operator",children:"?."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"toString"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"||"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"unknown"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"53",children:[" status",(0,n.jsx)(e.span,{className:"token operator",children:":"})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"status"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"||"})," ",(0,n.jsx)(e.span,{className:"token number",children:"500"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"54",children:[" message",(0,n.jsx)(e.span,{className:"token operator",children:":"})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"message"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"55",children:[" query",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"56",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"57",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line line-number",line:"58",children:` `}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"59",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"throw"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"60",children:[" error",(0,n.jsx)(e.span,{className:"token operator",children:":"})," e",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"61",children:[" query",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"62",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"63",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"64",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.h3,{id:"when-making-requests-your-endpoint-should-be",children:"When making requests your endpoint should be"}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line line-number",line:"1",children:["https",(0,n.jsx)(e.span,{className:"token operator",children:":"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"store_name",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"myshopify"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"com"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"admin",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"api",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token number",children:"2024"}),(0,n.jsx)(e.span,{className:"token operator",children:"-"}),(0,n.jsx)(e.span,{className:"token number",children:"07"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"graphql",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"json"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line line-number",line:"2",children:[(0,n.jsx)(e.span,{className:"token operator",children:"^"}),(0,n.jsx)(e.span,{className:"token operator",children:"^"}),` the store name you gave when creating your store `]})]})}),` `,(0,n.jsx)(e.p,{children:"what i usually do is store this api endpoint inside a enviroment variable like this"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"code-highlight",children:(0,n.jsx)(e.span,{className:"code-line",children:`export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2024-04/graphql.json'; `})})}),` `,(0,n.jsx)(e.p,{children:"Then call it when i need to fetch the api endpoint"}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," domain ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," process",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"env"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token constant",children:"SHOPIFY_STORE_DOMAIN"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," endpoint ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"domain",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),(0,n.jsx)(e.span,{className:"token constant",children:"SHOPIFY_GRAPHQL_API_ENDPOINT"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["now the endpoint can be used in our ",(0,n.jsx)(e.strong,{children:"shopifyfetch"})," function that was used on our above function"]}),` `,(0,n.jsxs)(e.p,{children:["If you want to get more into what fields you can access from the shopify admin panel shopify has an extensive doc for this case you should check out ",(0,n.jsx)(e.a,{href:"https://shopify.dev/docs/api/admin-graphql",children:"admin-graphql"})," and ",(0,n.jsx)(e.a,{href:"https://shopify.dev/docs/api/admin-graphql#endpoints",children:"endpoints"}),"."]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Now since you are fetching your products on your page now its upto you to style it as you like."}),` `,(0,n.jsx)(e.li,{children:"Use Next.js to create pages for your store, like a homepage and a product page."}),` `,(0,n.jsx)(e.li,{children:"Since we have Added the 3D model to the product page and make it look awesome by styling it alltogether, make sure the position of the canvas doesn't overlap with your other components or pages so be mindful how use positions."}),` `]}),` `,(0,n.jsx)(e.h2,{id:"test-and-deploy",children:"Test and Deploy:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Test your website to make sure everything works."}),` `,(0,n.jsx)(e.li,{children:"Deploy your website so everyone can see it. You can use services like Vercel or Netlify for this. You can use other services as well."}),` `]}),` `,(0,n.jsx)("br",{}),` `,(0,n.jsx)(e.h1,{id:"conclusion",children:"Conclusion"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Congratulations!"})," You\u2019ve built an amazing 3D ecommerce store using Blender, Next.js, React Three Fiber, Three.js, and Shopify. Now, anyone can visit your site and see your cool 3D model of the Senseo Philips coffee machine. Keep experimenting and have fun building more awesome projects!"]})]})}function w(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var x=w;function v(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(j);})(); ;return Component;

Milkias Portfolio

Socials