1import{_ as p,c as g,a as e,g as t,i as r,w as a,f as s,h as o,o as k}from"./app-BVev90Ro.js";const c={},m={id:"needle-engine-three.js",tabindex:"-1"},u={class:"header-anchor",href:"#needle-engine-three.js"},F={class:"hint-container tip"},y={class:"hint-container tip"},b={class:"hint-container tip"};function f(D,i){const l=o("logo-header"),d=o("discountbanner"),n=o("RouteLink"),h=o("codewrap");return k(),g("div",null,[e("h1",m,[e("a",u,[e("span",null,[t(l,{logo:"/imgs/threejs-logo.webp",alt:"three.js"},{default:a(()=>i[0]||(i[0]=[s("Needle Engine + three.js",-1)])),_:1,__:[0]})])])]),i[39]||(i[39]=e("p",null,[e("strong",null,"Welcome!"),s(" If you're here because you know three.js, you're in the right place. Needle Engine is a "),e("strong",null,"web-based 3D engine built on top of three.js"),s(" that makes it easier and faster to create interactive 3D experiences for the web.")],-1)),t(d),i[40]||(i[40]=r('<h2 id="what-is-needle-engine" tabindex="-1"><a class="header-anchor" href="#what-is-needle-engine"><span>What is Needle Engine?</span></a></h2><p>Think of Needle Engine as <strong>three.js with superpowers</strong>:</p><ul><li>All the power of three.js (since it's built on it)</li><li>Plus a component system for better code organization</li><li>Plus built-in features like physics, XR, networking, and particles</li><li>Plus visual editing tools (Unity and Blender integrations)</li><li>Plus automatic optimization and compression</li></ul><p><strong>All three.js APIs remain fully accessible</strong> â you can write vanilla three.js code, use any three.js-compatible library, or mix and match as needed.</p><div class="hint-container tip"><p class="hint-container-title">Try It in 30 Seconds</p><p>Want to see what Needle Engine can do? Create a new project instantly:</p><p>ð <strong><a href="https://engine.needle.tools/new" target="_blank" rel="noopener noreferrer">engine.needle.tools/new</a></strong> - Opens a ready-to-go project in StackBlitz</p><p>No installation, no setup. Just click and start experimenting with three.js + Needle Engine in your browser!</p></div><h2 id="why-choose-needle-engine-over-vanilla-three.js" tabindex="-1"><a class="header-anchor" href="#why-choose-needle-engine-over-vanilla-three.js"><span>Why Choose Needle Engine Over Vanilla three.js?</span></a></h2><p><strong>Enhanced Developer Experience:</strong></p><ul><li>𧩠<strong>Component system</strong> for organizing and reusing 3D logic</li><li>â¡ <strong>Built-in features</strong> like physics, XR, networking, particles, and UI</li><li>ð¨ <strong>Editor integrations</strong> with Unity and Blender for visual scene creation</li><li>ð <strong>Optimized build pipeline</strong> with automatic 3D asset compression and optimization</li><li>ð¨ <strong>Faster development</strong> with less boilerplate and better tooling</li></ul><p><a href="/docs/why">Why Needle Engine exists</a> goes into this properly â the problem it solves, who it suits, and where plain three.js or React Three Fiber is the better answer.</p><p><strong>Full Flexibility:</strong> Whether you're building a simple scene with pure three.js or a complex application with Needle's components, you have complete freedom. The component system is an enhancement, not a replacement â use what makes sense for your project.</p>',10)),e("div",F,[i[5]||(i[5]=e("p",{class:"hint-container-title"},"Want Visual Editing?",-1)),i[6]||(i[6]=e("p",null,"Check out our editor integrations for powerful visual creation workflows:",-1)),e("ul",null,[e("li",null,[t(l,{logo:"/imgs/unity-logo.webp",alt:"Unity"},{default:a(()=>i[1]||(i[1]=[e("a",{href:"../unity/"}
1,"Unity Integration",-1)])),_:1,__:[1]}),i[2]||(i[2]=s(" â Full-featured 3D editor with C# scripting support",-1))]),e("li",null,[t(l,{logo:"/blender/logo.png",alt:"Blender"},{default:a(()=>i[3]||(i[3]=[e("a",{href:"../blender/"},"Blender Integration",-1)])),_:1,__:[3]}),i[4]||(i[4]=s(" â Open-source 3D creation suite with Python scripting",-1))])])]),e("div",y,[i[10]||(i[10]=e("p",{class:"hint-container-title"},"Inspect and Debug",-1)),e("p",null,[i[8]||(i[8]=s("Use the ",-1)),t(n,{to:"/three/needle-devtools-for-threejs-chrome-extension.html"},{default:a(()=>i[7]||(i[7]=[s("Needle Inspector",-1)])),_:1,__:[7]}),i[9]||(i[9]=s(" Chrome extension to inspect, debug, and edit any three.js scene directly in your browser â perfect for development and learning.",-1))])]),i[41]||(i[41]=r('<div class="hint-container tip"><p class="hint-container-title">Optimize Your Assets</p><p>Use the <a href="/docs/products/needle-mesh-baker">Needle Mesh Baker</a> to turn heavy models into reduced meshes with baked PBR textures â right in your browser, without uploading anything.</p></div><hr><h2 id="quick-start-web-component" tabindex="-1"><a class="header-anchor" href="#quick-start-web-component"><span>Quick Start: Web Component</span></a></h2><p>The easiest way to get started is using the <code><needle-engine></code> web component. Display rich, interactive 3D scenes directly in HTML with just a few lines of code.</p><h3 id="basic-example" tabindex="-1"><a class="header-anchor" href="#basic-example"><span>Basic Example</span></a></h3>',5)),t(h,null,{default:a(()=>i[11]||(i[11]=[e("div",{class:"language-html","data-highlighter":"shiki","data-ext":"html",style:{"--shiki-light":"#383A42","--shiki-dark":"#EEFFFF","--shiki-light-bg":"#FAFAFA","--shiki-dark-bg":"#263238"}},[e("pre",{class:"shiki shiki-themes one-light material-theme vp-code"},[e("code",{class:"language-html"},[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#A0A1A7","--shiki-light-font-style":"italic","--shiki-dark":"#546E7A","--shiki-dark-font-style":"italic"}},"<!-- Import the component -->")]),s(` 2`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"<"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"script"),e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," type"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"module"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," src"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"></"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"script"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},">")]),s(` 3`),e("span",{class:"line"}),s(` 4`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#A0A1A7","--shiki-light-font-style":"italic","--shiki-dark":"#546E7A","--shiki-dark-font-style":"italic"}},"<!-- Use it like any other HTML element -->")]),s(` 5`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"<"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"needle-engine")]),s(` 6`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," src"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"https://cloud.needle.tools/-/assets/Z23hmXBZ21QnG-Z21QnG-world/file"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"')]),s(` 7`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," background-color"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"transparent"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},">")]),s(` 8`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"</"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"needle-engine"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},">")])])])],-1)])),_:1,__:[11]}),i[42]||(i[42]=e("iframe",{src:"/docs/code-samples/basic-webcomponent.html",style:{width:"100%","aspect-ratio":"16/9",outline:"none",border:"none"},allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;
8 xr-spatial-tracking",allowfullscreen:""},null,-1)),e("p",null,[i[13]||(i[13]=e("a",{href:"https://stackblitz.com/edit/needle-engine-prebundled?file=index.html",target:"_blank",rel:"noopener noreferrer"},"Open this example on StackBlitz",-1)),i[14]||(i[14]=s(" ⢠",-1)),t(n,{to:"/reference/needle-engine-attributes.html"},{default:a(()=>i[12]||(i[12]=[s("View all web component attributes",-1)])),_:1,__:[12]})]),i[43]||(i[43]=r('<hr><h2 id="scripting-with-three.js-and-needle-engine" tabindex="-1"><a class="header-anchor" href="#scripting-with-three.js-and-needle-engine"><span>Scripting with three.js and Needle Engine</span></a></h2><p>Think of the <code><needle-engine></code> web component as a three.js canvas with superpowers. You can reach the scene through lifecycle hooks and add your own three.js objects, or attach components to them.</p><p>The <a href="/docs/tutorials/scripting-walkthrough">Scripting Walkthrough</a> covers all of it in short steps, each one running live next to the code that produces it:</p><ul><li>writing a component and attaching it to an object</li><li>the lifecycle: <code>awake</code>, <code>onEnable</code>, <code>start</code>, <code>update</code>, <code>onDestroy</code></li><li>pointer input, physics, networking, AR and VR, audio, and gizmos</li></ul><p>Every example there is a single HTML file that loads the engine from a CDN, so you can copy one into a file and open it â no project, no build step.</p><hr><h2 id="installation-options" tabindex="-1"><a class="header-anchor" href="#installation-options"><span>Installation Options</span></a></h2><h3 id="install-from-cdn" tabindex="-1"><a class="header-anchor" href="#install-from-cdn"><span>Install from CDN</span></a></h3><p>Use Needle Engine directly with vanilla JavaScript â no bundler required. The prebundled version includes core components, physics, particles, networking, XR, and more.</p>',10)),t(h,null,{default:a(()=>i[15]||(i[15]=[e("div",{class:"language-html","data-highlighter":"shiki","data-ext":"html",style:{"--shiki-light":"#383A42","--shiki-dark":"#EEFFFF","--shiki-light-bg":"#FAFAFA","--shiki-dark-bg":"#263238"}},[e("pre",{class:"shiki shiki-themes one-light material-theme vp-code"},[e("code",{class:"language-html"},[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"<"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"script"),e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," type"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"module"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#986801","--shiki-dark":"#C792EA"}}," src"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"="),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#C3E88D"}},"https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"),e("span",{style:{"--shiki-light":"#50A14F","--shiki-dark":"#89DDFF"}},'"'),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},">")]),s(` 9`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},"</"),e("span",{style:{"--shiki-light":"#E45649","--shiki-dark":"#F07178"}},"script"),e("span",{style:{"--shiki-light":"#383A42","--shiki-dark":"#89DDFF"}},">")])])])],-1)])),_:1,__:[15]}),i[44]||(i[44]=r(`<p><strong>When to use:</strong></p><ul><li>Quick prototypes and experiments</li><li>Simple integrations into existing websites</li><li>Learning and exploring Needle Engine</li><li>Projects without a build pipeline</li><li>When your GLB was already built and exported (e.g. from Unity or Blender, or hosted on Needle Cloud) and you just want to display it</li></ul><h3 id="install-from-npm" tabindex="-1"><a class="header-anchor" href="#install-from-npm"><span>Install from NPM</span></a></h3><p>For projects using modern JavaScript tooling and bundlers, use the <a href="https://github.com/needle-engine/vite-template" target="_blank" rel="noopener noreferrer">Vite template</a> as a starting point:</p><div class="language-bash" data-highlighter="shiki" data-ext="bash" style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#263238;"><pre class="shiki shiki-themes one-light material-theme vp-code"><code class="language-bash"><span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#FFCB6B;">npm</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> create</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;"> needle</span></span></code></pre></div><p>This sets up a ready-to-go project with Vite, TypeScript, and Needle Engine preconfigured. With a bundler, bare specifiers like <code>'three'</code> and <code>'@needle-tools/engine'</code> are resolved automatically â no import map or CDN script tag needed (and you should avoid them to prevent duplicate module instances). Then add your code:</p><div class="language-typescript" data-highlighter="shiki" data-ext="typescript" style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#263238;"><pre class="shiki shiki-themes one-light material-theme vp-code"><code class="language-typescript"><span class="line"><span style="--shiki-light:#A626A4;--shiki-light-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;">
9import</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;"> {</span><span style="--shiki-light:#E45649;--shiki-dark:#EEFFFF;"> onStart</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;"> }</span><span style="--shiki-light:#A626A4;--shiki-light-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;"> '</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;">@needle-tools/engine</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;">'</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">;</span></span> 10<span class="line"><span style="--shiki-light:#A626A4;--shiki-light-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;">import</span><span style="--shiki-light:#E45649;--shiki-dark:#89DDFF;"> *</span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> as</span><span style="--shiki-light:#E45649;--shiki-dark:#EEFFFF;"> THREE</span><span style="--shiki-light:#A626A4;--shiki-light-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic;"> from</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;"> '</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;">three</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;">'</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">;</span></span> 11<span class="line"></span> 12<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#82AAFF;">onStart</span><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;">(</span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#EEFFFF;--shiki-dark-font-style:italic;">context</span><span style="--shiki-light:#A626A4;--shiki-dark:#C792EA;"> =></span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;"> {</span></span> 13<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C792EA;"> const</span><span style="--shiki-light:#986801;--shiki-dark:#EEFFFF;"> cube</span><span style="--shiki-light:#0184BC;--shiki-dark:#89DDFF;"> =</span><span style="--shiki-light:#A626A4;--shiki-dark:#89DDFF;"> new</span><span style="--shiki-light:#986801;--shiki-dark:#EEFFFF;"> THREE</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#82AAFF;">Mesh</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">(</span></span> 14<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#89DDFF;"> new</span><span style="--shiki-light:#986801;--shiki-dark:#EEFFFF;"> THREE</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#82AAFF;">BoxGeometry</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">()</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">,</span></span> 15<span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#89DDFF;"> new</span><span style="--shiki-light:#986801;--shiki-dark:#EEFFFF;"> THREE</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#82AAFF;">MeshStandardMaterial</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">{</span><span style="--shiki-light:#E45649;--shiki-dark:#F07178;"> color</span><span style="--shiki-light:#0184BC;--shiki-dark:#89DDFF;">:</span><span style="--shiki-light:#986801;--shiki-dark:#F78C6C;"> 0x00ff00</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;"> }</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">)</span></span> 16<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#F07178;"> )</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">;</span></span> 17<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;"> context</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#E45649;--shiki-dark:#EEFFFF;">
17scene</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">.</span><span style="--shiki-light:#4078F2;--shiki-dark:#82AAFF;">add</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">(</span><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;">cube</span><span style="--shiki-light:#383A42;--shiki-dark:#F07178;">)</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">;</span></span> 18<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">}</span><span style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;">)</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">;</span></span></code></pre></div><div class="language-html" data-highlighter="shiki" data-ext="html" style="--shiki-light:#383A42;--shiki-dark:#EEFFFF;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#263238;"><pre class="shiki shiki-themes one-light material-theme vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;"><</span><span style="--shiki-light:#E45649;--shiki-dark:#F07178;">needle-engine</span><span style="--shiki-light:#986801;--shiki-dark:#C792EA;"> src</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#50A14F;--shiki-dark:#C3E88D;">scene.glb</span><span style="--shiki-light:#50A14F;--shiki-dark:#89DDFF;">"</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">></</span><span style="--shiki-light:#E45649;--shiki-dark:#F07178;">needle-engine</span><span style="--shiki-light:#383A42;--shiki-dark:#89DDFF;">></span></span></code></pre></div><p><strong>When to use:</strong></p><ul><li>Production applications</li><li>TypeScript projects</li><li>When you need tree-shaking and optimal bundle size</li><li>Teams and larger projects</li></ul><hr><h2 id="development-setup" tabindex="-1"><a class="header-anchor" href="#development-setup"><span>Development Setup</span></a></h2><h3 id="rapid-prototyping-on-stackblitz" tabindex="-1"><a class="header-anchor" href="#rapid-prototyping-on-stackblitz"><span>Rapid Prototyping on StackBlitz</span></a></h3><p>For quick experiments, create a new project instantly:</p><p>ð <strong><a href="https://engine.needle.tools/new" target="_blank" rel="noopener noreferrer">engine.needle.tools/new</a></strong> - Start a new project in seconds</p><p>ð <strong><a href="https://stackblitz.com/@marwie/collections/needle-engine" target="_blank" rel="noopener noreferrer">StackBlitz Collection</a></strong> - Browse example projects</p><p><strong>Perfect for:</strong></p><ul><li>Learning and experimentation</li><li>Sharing code snippets</li><li>Quick proof-of-concepts</li><li>Testing ideas without local setup</li></ul><h3 id="local-development-with-vs-code" tabindex="-1"><a class="header-anchor" href="#local-development-with-vs-code"><span>
18Local Development with VS Code</span></a></h3><p>For more control and offline development:</p><p><strong>Setup:</strong></p><ol><li>Open your project folder in Visual Studio Code</li><li>Install the <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer" target="_blank" rel="noopener noreferrer">Live Server extension</a></li><li>Click <strong>Go Live</strong> in the VSCode footer</li><li>Open <code>http://localhost:5500</code> in your browser (usually opens automatically)</li></ol><p><strong>Benefits:</strong></p><ul><li>Full control over your development environment</li><li>Works offline</li><li>Better performance for large projects</li><li>Easier integration with version control</li></ul><div class="hint-container tip"><p class="hint-container-title">Sample glTF Files</p><p>Need a test scene? <a href="https://github.com/needle-tools/needle-engine-samples/raw/main/vanilla/myScene.glb" target="_blank" rel="noopener noreferrer">Download this sample glb</a> to get started quickly.</p></div><hr><h2 id="three.js-compatibility" tabindex="-1"><a class="header-anchor" href="#three.js-compatibility"><span>three.js Compatibility</span></a></h2><p>Needle Engine uses a fork of <a href="https://threejs.org/" target="_blank" rel="noopener noreferrer">three.js</a> that includes additional features and improvements, especially for:</p><ul><li><strong>WebXR</strong> - Enhanced XR session management and features</li><li><strong>Animation</strong> - Improved animation playback and blending</li><li><strong>USDZ Export</strong> - Better support for iOS AR</li></ul><p><strong>Full Compatibility:</strong> All standard three.js functionality is available in Needle Engine. You can:</p><ul><li>Use any three.js-compatible library</li><li>Follow three.js tutorials and examples</li><li>Import existing three.js code</li><li>Mix vanilla three.js with Needle components</li></ul><hr><h2 id="next-steps" tabindex="-1"><a class="header-anchor" href="#next-steps"><span>Next Steps</span></a></h2><p><strong>Learn More:</strong></p>`,34)),e("ul",null,[e("li",null,[t(n,{to:"/reference/needle-engine-attributes.html"},{default:a(()=>i[16]||(i[16]=[s("Web Component Attributes",-1)])),_:1,__:[16]}),i[17]||(i[17]=s(" - Configure the ",-1)),i[18]||(i[18]=e("code",null,"<needle-engine>",-1)),i[19]||(i[19]=s(" component",-1))]),e("li",null,[t(n,{to:"/reference/components.html"},{default:a(()=>i[20]||(i[20]=[s("Core Components",-1)])),_:1,__:[20]}),i[21]||(i[21]=s(" - 100+ built-in components for physics, XR, audio, UI, and more",-1))]),e("li",null,[t(n,{to:"/scripting.html"},{default:a(()=>i[22]||(i[22]=[s("Scripting Guide",-1)])),_:1,__:[22]}),i[23]||(i[23]=s(" - Create custom scripts and components",-1))]),e("li",null,[t(n,{to:"/scripting-examples.html"},{default:a(()=>i[24]||(i[24]=[s("Scripting Examples",-1)])),_:1,__:[24]}),i[25]||(i[25]=s(" - Code samples and patterns",-1))]),e("li",null,[t(n,{to:"/three/needle-devtools-for-threejs-chrome-extension.html"},{default:a(()=>i[26]||(i[26]=[s("Needle DevTools",-1)])),_:1,__:[26]}),i[27]||(i[27]=s(" - Debug and inspect scenes",-1))])]),i[45]||(i[45]=e("p",null,[e("strong",null,"Build Bigger:")],-1)),e("ul",null,[e("li",null,[t(l,{logo:"/imgs/unity-logo.webp",alt:"Unity"},{default:a(()=>i[28]||(i[28]=[e("a",{href:"../unity/"}
18,"Unity Integration",-1)])),_:1,__:[28]}),i[29]||(i[29]=s(" - Visual editing with full-featured 3D editor",-1))]),e("li",null,[t(l,{logo:"/blender/logo.png",alt:"Blender"},{default:a(()=>i[30]||(i[30]=[e("a",{href:"../blender/"},"Blender Integration",-1)])),_:1,__:[30]}),i[31]||(i[31]=s(" - Open-source 3D creation workflow",-1))]),e("li",null,[t(n,{to:"/features-overview.html"},{default:a(()=>i[32]||(i[32]=[s("Features Overview",-1)])),_:1,__:[32]}),i[33]||(i[33]=s(" - See what's possible with Needle Engine",-1))])]),i[46]||(i[46]=e("p",null,[e("strong",null,"Get Help:")],-1)),i[47]||(i[47]=e("ul",null,[e("li",null,[e("a",{href:"https://forum.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Forum"),s(" - Ask questions and share projects")]),e("li",null,[e("a",{href:"https://discord.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Discord"),s(" - Join the community")]),e("li",null,[e("a",{href:"https://engine.needle.tools/samples",target:"_blank",rel:"noopener noreferrer"},"Examples"),s(" - Browse sample projects")])],-1)),i[48]||(i[48]=e("hr",null,null,-1)),e("div",b,[i[36]||(i[36]=e("p",{class:"hint-container-title"},"Using Editor Integrations",-1)),i[37]||(i[37]=e("p",null,"Did you know that Needle Engine seamlessly integrates with Blender and Unity? Create complex 3D scenes visually and export them directly to the web. Perfect for large projects and team collaboration.",-1)),t(l,{logo:"/imgs/unity-logo.webp",alt:"Unity"},{default:a(()=>i[34]||(i[34]=[e("a",{href:"../unity/"},"Learn about Unity Integration",-1)])),_:1,__:[34]}),i[38]||(i[38]=s(" ⢠",-1)),t(l,{logo:"/blender/logo.png",alt:"Blender"},{default:a(()=>i[35]||(i[35]=[e("a",{href:"../blender/"},"Learn about Blender Integration",-1)])),_:1,__:[35]})])])}const w=p(c,[["render",f]]),E=JSON.parse(`{"path":"/three/","title":"Using Needle Engine with three.js","lang":"en-US","frontmatter":{"title":"Using Needle Engine with three.js","head":[["link",{"rel":"canonical","href":"https://engine.needle.tools/docs/three/"}],["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/imgs/default-unfurl-image-2.webp"}],["meta",{"name":"og:description","content":"# Welcome! If you're here because you know three.js, you're in the right place. Needle Engine is a web-based 3D engine built on top of three.js that makes it easier and faster to create interactive 3D experiences for the web."}],["meta",{"property":"og:title","content":"Using Needle Engine with three.js â Needle Engine"}]],"description":"# Welcome! If you're here because you know three.js, you're in the right place. Needle Engine is a web-based 3D engine built on top of three.js that makes it easier and faster to create interactive 3D experiences for the web."},"git":{"updatedTime":1787656443000,"contributors":[{"name":"Marcel Wiessler","username":"","email":"[email protected]","commits":21},{"name":"hybridherbst","username":"hybridherbst","email":"[email protected]","commits":4,"url":"https://github.com/hybridherbst"},{"name":"Claude","username":"Claude","email":"[email protected]","commits":2,"url":"https://github.com/Claude"},{"name":"Claude Opus 5 (1M context)","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"841d0b1e45999d6d4a6a5d2d1c648aa07df4fffa","time":1787656443000,"email":"[email protected]","author":"Marcel Wiessler","message":"docs: add Needle Mesh Baker page","coAuthors":[{"name":"Claude Opus 5 (1M context)","email":"[email protected]"}]},{"hash":"7c8b9c9ffd85635c3c56a7c36f6916c01a3cf6fd","time":1785922837000,"email":"[email protected]","author":"Claude","message":"Move the Scripting Walkthrough into Tutorials"},{"hash":"447500267c91e85c7c5078e97281102ae9d5baf4","time":1785871626000,"email":"[email protected]","author":"Claude","message":"Add an audio step to the walkthrough, and link it from the entry pages"},{"hash":"4fbaff139c450c11f898638a10720a943d34691f","time":1781819973000,"email":"[email protected]","author":"Marcel Wiessler","message":"feat(docs): add What's New engagement tracking to banner; show banner on three.js page"}
18,{"hash":"fd9297e1ca3eb095eebe0ffcfbd428c7035eb13b","time":1775828046000,"email":"[email protected]","author":"Marcel Wiessler","message":"update three+custom"},{"hash":"98b24091983c474fa13ced35195ac1bf18cab3a7","time":1775827851000,"email":"[email protected]","author":"Marcel Wiessler","message":"three: add npm create needle info"},{"hash":"5a1b456956b600b1ce1c8a79ac0fbfa4900bb0f8","time":1775827560000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update three getting started"},{"hash":"7b99ea9ff8b58ddbcb5e408df1b01bd541cab473","time":1769522754000,"email":"[email protected]","author":"Marcel Wiessler","message":"wip"},{"hash":"bdb0afe50ad837b57284a241b39f1cbfeb031821","time":1769509220000,"email":"[email protected]","author":"Marcel Wiessler","message":"update docs"},{"hash":"1bc974c3b662fd6c050da524adee918660d26760","time":1767797755000,"email":"[email protected]","author":"Marcel Wiessler","message":"add mor examples"},{"hash":"a9eaa10aa6388323cdfe54e8b54e94312af5e376","time":1767797619000,"email":"[email protected]","author":"Marcel Wiessler","message":"update three.js docs page"},{"hash":"44bc730cdd77fa02cad27790560de52d19d662f8","time":1767796751000,"email":"[email protected]","author":"Marcel Wiessler","message":"some inspector docs + mcp server"},{"hash":"38fa7ee05bb7181c890ec8731a7085dee7a332ec","time":1758633442000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update docs"},{"hash":"d32e30fadef1c4241c56fb777331ee95fc52cf60","time":1757582749000,"email":"[email protected]","author":"Marcel Wiessler","message":"update embed page + support page"},{"hash":"8af1a61b675419cde9d2b36e5f98b2b86554a733","time":1749147792000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md","tag":"blender/0.60.0"},{"hash":"31cf7069765baa9e6d785a022a5dd0e7c19c1214","time":1745319724000,"email":"[email protected]","author":"Marcel Wiessler","message":"Replace some old code-group syntax with code-tabs"},{"hash":"9070ec4b627bde77416b932e28a9cbd95b02511a","time":1744804432000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md","tag":"release/4.4.0"},{"hash":"d6c5a5015cfcb50e418beb68d7bd614313b8b171","time":1742907449000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md"},{"hash":"6e674b45080da4adbf1fbf17a2d860b83dd35a1d","time":1737894124000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md","tag":"release/4.1.0-beta.3"},{"hash":"d1699df043975980e7cac537ecae8c1303870edb","time":1731155804000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md"},{"hash":"a97c0cce6607dcdf418a5d0e396f49da63697208","time":1731155784000,"email":"[email protected]","author":"Marcel Wiessler","message":"Update index.md"},{"hash":"868fbe7e03a2a6c26c748ccec894dae79b28dca2","time":1727707190000,"email":"[email protected]","author":"hybridherbst","message":"add embedding page"},{"hash":"9556d04419f60f42734e403cc1bd6870c2202899","time":1727190853000,"email":"[email protected]","author":"Marcel Wiessler","message":"minor web componet, add stackblitz link, adjust support page"},{"hash":"2a5a5c3755373616b84a3bb1dcf1d6c1b5df0ffd","time":1727182460000,"email":"[email protected]","author":"hybridherbst","message":"create download tiles, add section and sample about web component usage, add after-download forward URLs","tag":"release/3.48.2"},{"hash":"433ae7c3df91f86d859b2bf248a9d05aa361ea9b","time":1727125836000,"email":"[email protected]","author":"hybridherbst","message":"adding index pages for unity, blender, three"},{"hash":"18d58c13a5b19643f7fc651797cd8c4e94b8ed4e","time":1727106484000,"email":"[email protected]","author":"hybridherbst","message":"add sitemap package, add better lists, product table"},{"hash":"10d5b43b3b394929169a287d5226340e92baa479","time":1666433573000,"email":"[email protected]","author":"Marcel Wiessler","message":"add vuepress"}]},"filePathRelative":"three/index.md"}`);export{w as comp,E as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.