"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[888],{578:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"integration-threejs","title":"Three.js Integration","description":"Explore how to import Three.js with your  application.","source":"@site/Integration/001.integration-threejs.md","sourceDirName":".","slug":"/integration-threejs","permalink":"/guides/integration/integration-threejs","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"sidebar","next":{"title":"D3.js Integration","permalink":"/guides/integration/integration-D3js"}}');var i=n(4848),r=n(8453),o=n(8175);const l={sidebar_position:1},d="Three.js Integration",a={},c=[{value:"What is three.js ?",id:"what-is-threejs-",level:2},{value:"How to Build a 3D Website Using Three.js in EZsite",id:"how-to-build-a-3d-website-using-threejs-in-ezsite",level:2},{value:"Step 1 - Create a Project for interactive 3D graphics",id:"step-1---create-a-project-for-interactive-3d-graphics",level:3},{value:"Step 2 - Get Your 3D Model",id:"step-2---get-your-3d-model",level:3},{value:"Step 3 - Import the 3D Model into <CompanyNameDisplay></CompanyNameDisplay>",id:"step-3---import-the-3d-model-into-",level:3},{value:"Step 4 - Instruct the Coding Agent to Use the 3D Model",id:"step-4---instruct-the-coding-agent-to-use-the-3d-model",level:3}];function h(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"threejs-integration",children:"Three.js Integration"})}),"\n",(0,i.jsxs)(t.p,{children:["Explore how to import Three.js with your ",(0,i.jsx)(o.A,{})," application."]}),"\n",(0,i.jsx)(t.h2,{id:"what-is-threejs-",children:"What is three.js ?"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://threejs.org/",children:"Three.js"})," is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL."]}),"\n",(0,i.jsx)(t.h2,{id:"how-to-build-a-3d-website-using-threejs-in-ezsite",children:"How to Build a 3D Website Using Three.js in EZsite"}),"\n",(0,i.jsxs)(t.p,{children:["Want to create a stunning website with 3D models? Follow these steps to import and use 3D models in ",(0,i.jsx)(o.A,{}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"step-1---create-a-project-for-interactive-3d-graphics",children:"Step 1 - Create a Project for interactive 3D graphics"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Open ",(0,i.jsx)(t.a,{href:"https://ezsite.ai",children:(0,i.jsx)(o.A,{})}),"."]}),"\n",(0,i.jsx)(t.li,{children:'Click the "Create new project" button.'}),"\n",(0,i.jsx)(t.li,{children:"Enter your dream idea in the text box"}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"For example:"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"Create a 3D model display system\n"})}),"\n",(0,i.jsxs)(t.ol,{start:"4",children:["\n",(0,i.jsx)(t.li,{children:'Click "Generate your website".'}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"step-2---get-your-3d-model",children:"Step 2 - Get Your 3D Model"}),"\n",(0,i.jsx)(t.p,{children:"You can either:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Create your own 3D model"})," and upload it to a publicly accessible server."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.strong,{children:"Download a model"})," from a 3D resource website."]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Recommended 3D model sources:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["Sketchfab (",(0,i.jsx)(t.a,{href:"https://sketchfab.com/",children:"https://sketchfab.com/"}),")"]}),"\n"]}),"\n",(0,i.jsx)(t.p,{children:"Example model links:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["dog (",(0,i.jsx)(t.a,{href:"https://cdn.ezsite.ai/autodevweb/3d_model/dog_gltf/scene.gltf",children:"https://cdn.ezsite.ai/autodevweb/3d_model/dog_gltf/scene.gltf"}),")"]}),"\n",(0,i.jsxs)(t.li,{children:["small_car (",(0,i.jsx)(t.a,{href:"https://cdn.ezsite.ai/autodevweb/3d_model/small_car_gltf/scene.gltf",children:"https://cdn.ezsite.ai/autodevweb/3d_model/small_car_gltf/scene.gltf"}),")"]}),"\n"]}),"\n",(0,i.jsxs)(t.h3,{id:"step-3---import-the-3d-model-into-",children:["Step 3 - Import the 3D Model into ",(0,i.jsx)(o.A,{})]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Open your project in ",(0,i.jsx)(o.A,{}),"."]}),"\n",(0,i.jsx)(t.li,{children:"Click the Settings button in the top-right corner."}),"\n",(0,i.jsx)(t.li,{children:"Navigate to the Custom Knowledge tab."}),"\n",(0,i.jsx)(t.li,{children:"Add your 3D model names and their corresponding links."}),"\n"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"3D Models:\n- dog (https://cdn.ezsite.ai/autodevweb/3d_model/dog_gltf/scene.gltf)\n- small_car (https://cdn.ezsite.ai/autodevweb/3d_model/small_car_gltf/scene.gltf)\n"})}),"\n",(0,i.jsx)(t.h3,{id:"step-4---instruct-the-coding-agent-to-use-the-3d-model",children:"Step 4 - Instruct the Coding Agent to Use the 3D Model"}),"\n",(0,i.jsx)(t.p,{children:"Using the chat interface on the left side of the project, you can communicate with the Coding Agent and specify when and where to use your 3D model."}),"\n",(0,i.jsx)(t.p,{children:"Example Prompt:"}),"\n",(0,i.jsx)(t.p,{children:"Type this into the chat interface on the left side of your project, and the agent will handle the rest!"}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{children:"Please add the 3D models described in Custom Knowledge to the scene.\n"})})]})}function p(e={}){const{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},8175:(e,t,n)=>{n.d(t,{A:()=>i});n(6540);var s=n(4848);function i(){return(0,s.jsx)("code",{children:"EZsite"})}},8453:(e,t,n)=>{n.d(t,{R:()=>o,x:()=>l});var s=n(6540);const i={},r=s.createContext(i);function o(e){const t=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);