Needle Engine + three.js

### Basic Scene Setup with NPM Installation Source: https://engine.needle.tools/docs/three Sets up a basic scene by creating a green cube and adding it to the scene using the 'onStart' hook. This example assumes a project set up with a bundler like Vite and Needle Engine installed via NPM. ```javascript import { onStart } from '@needle-tools/engine'; import * as THREE from 'three'; onStart(context => { const cube = new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({ color: 0x00ff00 }) ); context.scene.add(cube); }); ``` -------------------------------- ### Start Needle License Server (Shorthand) Source: https://engine.needle.tools/docs/cloud Shorthand command to start the Needle license server. ```bash npx --yes needle-cloud start ``` -------------------------------- ### Adding Objects with onStart Source: https://engine.needle.tools/docs/three This example demonstrates adding a new three.js object (a cube) to the scene when the Needle Engine starts. It also attaches a DragControls component to the cube. ```html Needle Engine + three.js

``` -------------------------------- ### Start Needle License Server Source: https://engine.needle.tools/docs/cloud Command to start the Needle license server, required for builds outside of Unity/Blender to validate PRO licenses. Run this before your build process. ```bash npx --yes needle-cloud start-server ``` -------------------------------- ### Deploy from CLI using global installation Source: https://engine.needle.tools/docs/cloud Install the needle-cloud package globally to deploy from the command line. This method is suitable for frequent use across different projects. ```bash npm install -g needle-cloud needle-cloud deploy '/dist' --team 'My team' --name 'some-project-id' ``` -------------------------------- ### Particle System Component Setup in Unity Source: https://engine.needle.tools/samples Instructions for setting up a ParticleSystem component in Unity. Assign the created material to the Renderer tab's Material property. ```unity Create a new game object and add the ParticleSystem component. ``` ```unity Assign the material to the particle system in the Renderer tab to the Material property. ``` -------------------------------- ### Svelte Integration Setup Source: https://engine.needle.tools/samples Shows how to set up a Svelte project to use Needle Engine. The package.json file includes additional dependencies for Svelte, Vite, and TypeScript. ```json { "name": "svelte-needle-engine-sample", "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.0", "needle-engine": "^3.0.0", "svelte": "^4.0.0", "vite": "^4.0.0" } } ``` -------------------------------- ### Stencil Buffer Rendering Example Source: https://engine.needle.tools/samples Demonstrates the use of stencil buffers for rendering effects, such as portals. This sample utilizes Unity and specific runtime scripts. ```typescript import { TimeUI } from "needle-engine-samples/package/Runtime/Stencil Portals/Scripts/Runtime/StencilPortals~/TimeUI.ts"; ``` -------------------------------- ### SvelteKit Initialization and Configuration Source: https://cloud.needle.tools/%3Chttps:/stackblitz.com/edit/needle-react-shopping-cart-2 This snippet shows the initialization of SvelteKit, including environment variables and deferred loading of modules. It's part of the client-side bootstrapping process. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../../..", location).pathname.slice(0, -1), env: { "PUBLIC_MAINTENANCE_MODE": "False", "PUBLIC_BASE_URL": "https://cloud.needle.tools", "PUBLIC_NEEDLE_SHARE_API_ENDPOINT": "https://cloud.needle.tools/api" }, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [{ type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/%3Chttps://stackblitz.com/edit/needle-react-shopping-cart-2", route: { id: null }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) } }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 } }], form: null, error: { message: "Not Found" }, status: 404 }); }); ``` -------------------------------- ### Start AR Session Programmatically Source: https://engine.needle.tools/docs/how-to-guides/xr/ios-webxr-app-clip.html Manually start an XR session for AR mode in your code. This is an alternative to enabling the AR button. ```javascript NeedleXRSession.start("ar"); ``` -------------------------------- ### SvelteKit Application Initialization Script Source: https://cloud.needle.tools/apply/creator This script initializes the SvelteKit application, sets up deferred data loading, and starts the application with initial data. It is typically found within the main HTML file or an entry point script. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL(".", location).pathname.slice(0, -1), env: {"PUBLIC_MAINTENANCE_MODE":"False","PUBLIC_BASE_URL":"https://cloud.needle.tools","PUBLIC_NEEDLE_SHARE_API_ENDPOINT":"https://cloud.needle.tools/api"}, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("./_app/immutable/entry/start.BQHf7FJV.js"), import("./_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 8], data: [{type:"data",data:{maintenance:false,apiUnavailable:false,user:void 0,url:"/",route:{id:"/"},perform_signin_redirect:false,orgs_licenses:__sveltekit_78h6pq.defer(1),user_orgs:__sveltekit_78h6pq.defer(2),questionnaire:{welcome:__sveltekit_78h6pq.defer(3)}},uses:{search_params:["affiliate_id","gclid"],route:1,url:1}},{type:"data",data:{canWriteCollections:false,stats:__sveltekit_78h6pq.defer(4)},uses:{}}], form: null, error: null }); }); ``` -------------------------------- ### Install Needle Facefilter via NPM Source: https://samples.needle.tools/ Install the Needle Facefilter package independently using npm. This allows for integration into your own projects. ```bash npm i @needle-tools/facefilter ``` -------------------------------- ### Get Help for Specific CLI Command Source: https://engine.needle.tools/docs/cloud Command to get help for a specific command within the Needle Cloud CLI, such as 'deploy'. ```bash # Get help for a specific command npx needle-cloud help deploy ``` -------------------------------- ### Needle Cloud Initialization Script Source: https://cloud.needle.tools/%3Chttps:/forum.needle.tools/t/switching-sprite-images-via-timeline-causes-ghosting-glitches-when-exported/2709%3E This script initializes the Needle Cloud environment, including SvelteKit integration and data layer management. It handles deferred loading of modules and resolves data promises. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../../../..", location).pathname.slice(0, -1), env: {"PUBLIC_MAINTENANCE_MODE":"False","PUBLIC_BASE_URL":"https://cloud.needle.tools","PUBLIC_NEEDLE_SHARE_API_ENDPOINT":"https://cloud.needle.tools/api"}, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [{type:"data",data:{maintenance:false,apiUnavailable:false,user:void 0,url:"/%3Chttps://forum.needle.tools/t/switching-sprite-images-via-timeline-causes-ghosting-glitches-when-exported/2709%3E",route:{id:null},perform_signin_redirect:false,orgs_licenses:__sveltekit_78h6pq.defer(1),user_orgs:__sveltekit_78h6pq.defer(2),questionnaire:{welcome:__sveltekit_78h6pq.defer(3)}},uses:{search_params:["affiliate_id","gclid"],route:1,url:1}}], form: null, error: {message:"Not Found"}, status: 404 }); }); __sveltekit_78h6pq.resolve(1, () => [null]) __sveltekit_78h6pq.resolve(2, () => [null]) __sveltekit_78h6pq.resolve(3, () => [{status:401}]) ``` -------------------------------- ### Set Camera Focus Rectangle with Click to Move Example Source: https://cloud.needle.tools/llms-full.txt This example demonstrates using `setCameraFocusRect` in conjunction with click-to-move functionality for interactive responsive layouts. ```typescript import { NeedleContext } from "@needle-tools/engine"; const context = new NeedleContext(document.getElementById("my-canvas") as HTMLCanvasElement); // Example: Set focus rectangle and enable click-to-move const myElement = document.getElementById("my-html-element"); if (myElement) { context.setCameraFocusRect(myElement); // Add click event listener to move camera myElement.addEventListener("click", () => { // Logic to move camera to a new position console.log("Camera move triggered"); }); } ``` -------------------------------- ### Install Needle Engine AI Skill Source: https://docs.needle.tools/ Install the Needle Engine skill for AI coding assistants. This can be done automatically via the Vite plugin or manually. ```bash npx skills add needle-tools/ai ``` -------------------------------- ### SvelteKit Initialization Script Source: https://cloud.needle.tools/ This script initializes the SvelteKit application, sets up environment variables, and handles deferred data loading. It is typically found in the main HTML file or injected during the build process. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL(".", location).pathname.slice(0, -1), env: {"PUBLIC_MAINTENANCE_MODE":"False","PUBLIC_BASE_URL":"https://cloud.needle.tools","PUBLIC_NEEDLE_SHARE_API_ENDPOINT":"https://cloud.needle.tools/api"}, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("./_app/immutable/entry/start.BQHf7FJV.js"), import("./_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 8], data: [ { type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/", route: { id: "/" }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) }, }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 }, }, { type: "data", data: { canWriteCollections: false, stats: __sveltekit_78h6pq.defer(4) }, uses: {}, }, ], form: null, error: null, }); }); ``` -------------------------------- ### Initialize Global Environment and Fast WebSocket Source: https://discord.needle.tools/ Sets up global environment variables for the Discord client and initiates a fast WebSocket connection. This is used for real-time communication with the Discord gateway. ```javascript window.GLOBAL_ENV = {"NODE_ENV":"production","BUILT_AT":"1781767178439","HTML_TIMESTAMP":Date.now(),"BUILD_NUMBER":"565311","PROJECT_ENV":"production","RELEASE_CHANNEL":"stable","VERSION_HASH":"65b371be826a10b4c51b8c4a638a470b1b9dd802","PRIMARY_DOMAIN":"discord.com","SENTRY_TAGS":{"buildId":"65b371be826a10b4c51b8c4a638a470b1b9dd802","buildType":"normal"},"SENTRY_RELEASE":"2026-06-18-65b371be826a10b4c51b8c4a638a470b1b9dd802-discord_web","PUBLIC_PATH":"/assets/","LOCATION":"history","API_VERSION":9,"API_PROTOCOL":"https:","API_ENDPOINT":"//discord.com/api","GATEWAY_ENDPOINT":"wss://gateway.discord.gg","STATIC_ENDPOINT":"","ASSET_ENDPOINT":"//discord.com","MEDIA_PROXY_ENDPOINT":"//media.discordapp.net","IMAGE_PROXY_ENDPOINTS":"//images-ext-1.discordapp.net,//images-ext-2.discordapp.net","CDN_HOST":"cdn.discordapp.com","DEVELOPERS_ENDPOINT":"//discord.com","MARKETING_ENDPOINT":"//discord.com","WEBAPP_ENDPOINT":"//discord.com","WIDGET_ENDPOINT":"//discord.com/widget","SEO_ENDPOINT":"undefined","ADS_MANAGER_ENDPOINT":"//ads.discord.com","NETWORKING_ENDPOINT":"//router.discordapp.net","REMOTE_AUTH_ENDPOINT":"wss://remote-auth-gateway.discord.gg","RTC_LATENCY_ENDPOINT":"//latency.discord.media/rtc","INVITE_HOST":"discord.gg","GUILD_TEMPLATE_HOST":"discord.new","GIFT_CODE_HOST":"discord.gift","ACTIVITY_APPLICATION_HOST":"discordsays.com","MIGRATION_SOURCE_ORIGIN":"https://discordapp.com","MIGRATION_DESTINATION_ORIGIN":"https://discord.com","STRIPE_KEY":"pk_live_CUQtlpQUF0vufWpnpUmQvcdi","ADYEN_KEY":"live_E3OQ33V6GVGTXOVQZEAFQJ6DJIDVG6SY","BRAINTREE_KEY":"production_ktzp8hfp_49pp2rp4phym7387","MUX_ENV_KEY":"undefined","DEV_SESSION_KEY":"undefined","WEBAUTHN_ORIGIN":"discord.com","NATIVE_WEBSOCKET_ORIGIN":"undefined"} window.__OVERLAY__ = /overlay/.test(location.pathname); window.__BILLING_STANDALONE__ = /^\/billing/.test(location.pathname); !function(){if(null!=window.WebSocket&&function(n){try{var o=localStorage.getItem(n);if(null==o)return null;return JSON.parse(o)}catch(e){return null}}("token")&&!window.__OVERLAY__){var n=null!=window.DiscordNative||null!=window.require?"etf":"json",o=window.GLOBAL_ENV.GATEWAY_ENDPOINT+"/?encoding="+n+"&v="+window.GLOBAL_ENV.API_VERSION;null!=window.DiscordNative&&void 0!==window.Uint8Array&&void 0!==window.TextDecoder?o+="&compress=zstd-stream":void 0!==window.Uint8Array&&(o+="&compress=zlib-stream"),console.log("[FAST CONNECT] "+o+", encoding: "+n+", version: "+window.GLOBAL_ENV.API_VERSION);var e=new WebSocket(o);e.binaryType="arraybuffer";var i=Date.now(),r={open:!1,identify:!1,gateway:o,messages:[]};e.onopen=function(){console.log("[FAST CONNECT] connected in "+(Date.now()-i)+"ms"),r.open=!0},e.onclose=e.onerror=function(){window._ws=null},e.onmessage=function(n){r.messages.push(n)},window._ws={ws:e,state:r}}}(); ``` -------------------------------- ### Needle Cloud Initialization Script Source: https://cloud.needle.tools/%3Chttps:/github.com/needle-engine/needle-engine-bike-scrollytelling%3E This script initializes the Needle Cloud environment, including setting up data layers for analytics and handling deferred module loading. It's part of the SvelteKit application setup. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../../..", location).pathname.slice(-1), env: { PUBLIC_MAINTENANCE_MODE: "False", PUBLIC_BASE_URL: "https://cloud.needle.tools", PUBLIC_NEEDLE_SHARE_API_ENDPOINT: "https://cloud.needle.tools/api" }, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [ { type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/%3Chttps://github.com/needle-engine/needle-engine-bike-scrollytelling%3E", route: { id: null }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) } }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 } } ], form: null, error: { message: "Not Found" }, status: 404 }); }); __sveltekit_78h6pq.resolve(1, () => [null]) __sveltekit_78h6pq.resolve(2, () => [null]) __sveltekit_78h6pq.resolve(3, () => [{status:401}]) ``` -------------------------------- ### Example WebXR App Clip QR Code URL Source: https://engine.needle.tools/docs/how-to-guides/xr/ios-webxr-app-clip.html An example of a QR code URL that directs users to a specific WebXR experience via the App Clip. ```URL https://appclip.needle.tools/ar?url=https://example.com/my-ar-experience ``` -------------------------------- ### SvelteKit Initialization and Routing Source: https://cloud.needle.tools/%3Chttps:/stackblitz.com/edit/needle-engine-fit-camera-options This JavaScript code initializes SvelteKit, handles deferred loading of modules, and manages routing for the application. It includes logic for handling application data, errors, and redirects. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../../..", location).pathname.slice(0, -1), env: { "PUBLIC_MAINTENANCE_MODE": "False", "PUBLIC_BASE_URL": "https://cloud.needle.tools", "PUBLIC_NEEDLE_SHARE_API_ENDPOINT": "https://cloud.needle.tools/api" }, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [{ type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/%3Chttps://stackblitz.com/edit/needle-engine-fit-camera-options", route: { id: null }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) } }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 } }], form: null, error: { message: "Not Found" }, status: 404 }); }); __sveltekit_78h6pq.resolve(1, () => [null]) __sveltekit_78h6pq.resolve(2, () => [null]) __sveltekit_78h6pq.resolve(3, () => [{status:401}]) ``` -------------------------------- ### XRRig Component Setup Source: https://samples.needle.tools/ The XRRig component provides a basic XR rig for your scene, including camera and controller setups. It's crucial for positioning and tracking the user in XR. ```typescript import { XRRig } from "@needle-tools/engine/dist/engine/src/engine-components/webxr/WebXRRig"; // Add the XRRig component to a GameObject const xrRigComponent = gameObject.addComponent(XRRig); ``` -------------------------------- ### Custom Hover Component Source: https://engine.needle.tools/docs/three Defines a reusable 'Hover' component that adds a sine-wave motion to a GameObject's Y position. It uses the 'Behaviour' class and 'serializable' decorator for properties. The 'start' method initializes the starting Y position, and 'update' applies the animation. ```typescript import { Behaviour, serializable } from '@needle-tools/engine'; import * as THREE from 'three'; class Hover extends Behaviour { @serializable() amplitude: number = 0.2; @serializable() frequency: number = 1; private startY: number = 0; start() { this.startY = this.gameObject.position.y; } update() { this.gameObject.position.y = this.startY + Math.sin(this.context.time.time * this.frequency) * this.amplitude; } } onStart(context => { const cube = new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({ color: 'hotpink' }) ); context.scene.add(cube); cube.addComponent(Hover); }); ``` -------------------------------- ### Get All CLI Commands Source: https://engine.needle.tools/docs/cloud Command to display all available commands in the Needle Cloud CLI. ```bash # See all available commands npx needle-cloud help ``` -------------------------------- ### Collision Event Callbacks Source: https://samples.needle.tools/ Implement these methods to react to physics interactions. They are called when collisions start, continue, or end. ```typescript onCollisionEnter(collision: Collision) { // Called when the collider starts touching another collider } onCollisionStay(collision: Collision) { // Called while the collider is touching another collider } onCollisionExit(collision: Collision) { // Called when the collider stops touching another collider } ``` -------------------------------- ### Initialize Needle Cloud with Three.js Source: https://cloud.needle.tools/%3Chttps:/see-through-walls-z23hmxbz1kjfjn.needle.run/%3E This snippet shows how to import and initialize Needle Cloud components when using it with Three.js. It sets up dataLayer for analytics and configures the SvelteKit environment. ```javascript { "imports": { "three": "https://cdn.jsdelivr.net/npm/@needle-tools/three/build/three.module.js", "three/": "https://cdn.jsdelivr.net/npm/@needle-tools/three/" } } ``` ```javascript window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} ``` ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../..", location).pathname.slice(0, -1), env: { "PUBLIC_MAINTENANCE_MODE": "False", "PUBLIC_BASE_URL": "https://cloud.needle.tools", "PUBLIC_NEEDLE_SHARE_API_ENDPOINT": "https://cloud.needle.tools/api" }, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); } try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [{ type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/%3Chttps://see-through-walls-z23hmxbz1kjfjn.needle.run/%3E", route: { id: null }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) } }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 } }], form: null, error: { message: "Not Found" }, status: 404 }); }); ``` ```javascript __sveltekit_78h6pq.resolve(1, () => [null]) __sveltekit_78h6pq.resolve(2, () => [null]) __sveltekit_78h6pq.resolve(3, () => [{status:401}]) ``` -------------------------------- ### Basic Component Script Source: https://cloud.needle.tools/llms.txt A fundamental TypeScript component for Needle Engine. It demonstrates the 'start', 'update', and 'onPointerClick' lifecycle methods. ```typescript import { Behaviour } from "@needle-tools/engine"; export class MyComponent extends Behaviour { start() { console.log("Hello World"); } update() { console.log("Frame #" + this.context.time.frame); } onPointerClick() { console.log("CLICKED"); } } ``` -------------------------------- ### SvelteKit Initialization and Data Handling Source: https://cloud.needle.tools/%3Chttps:/engine.needle.tools/docs/api/ScrollFollow%3E This JavaScript code initializes SvelteKit and handles data deferral and resolution for the application. It includes configuration for environment variables and routing. ```javascript const deferred = new Map(); __sveltekit_78h6pq = { base: new URL("../../../../..", location).pathname.slice( 0, -1 ), env: { "PUBLIC_MAINTENANCE_MODE": "False", "PUBLIC_BASE_URL": "https://cloud.needle.tools", "PUBLIC_NEEDLE_SHARE_API_ENDPOINT": "https://cloud.needle.tools/api" }, defer: (id) => new Promise((fulfil, reject) => { deferred.set(id, { fulfil, reject }); }), resolve: async (id, fn) => { const [data, error] = fn(); const try_to_resolve = () => { if (!deferred.has(id)) { setTimeout(try_to_resolve, 0); return; } const { fulfil, reject } = deferred.get(id); deferred.delete(id); if (error) reject(error); else fulfil(data); }; try_to_resolve(); } }; const element = document.currentScript.parentElement; Promise.all([ import("../../../../../_app/immutable/entry/start.BQHf7FJV.js"), import("../../../../../_app/immutable/entry/app.4RUGDDaU.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 1], data: [ { type: "data", data: { maintenance: false, apiUnavailable: false, user: void 0, url: "/%3Chttps://engine.needle.tools/docs/api/ScrollFollow%3E", route: { id: null }, perform_signin_redirect: false, orgs_licenses: __sveltekit_78h6pq.defer(1), user_orgs: __sveltekit_78h6pq.defer(2), questionnaire: { welcome: __sveltekit_78h6pq.defer(3) } }, uses: { search_params: ["affiliate_id", "gclid"], route: 1, url: 1 } } ], form: null, error: { message: "Not Found" }, status: 404 }); }); ``` -------------------------------- ### DragControls Component Setup Source: https://samples.needle.tools/ The DragControls component allows users to drag and manipulate objects in the scene. This is useful for interactive XR experiences. ```typescript import { DragControls } from "@needle-tools/engine/dist/engine/src/engine-components/DragControls"; // Add the DragControls component to a GameObject that should be draggable const dragControls = gameObject.addComponent(DragControls); ``` -------------------------------- ### Generate AI Material with Options Source: https://engine.needle.tools/docs/cloud Generate an AI material with specified resolution, output directory, and filename. Requires a PRO license. ```bash npx needle-cloud generate-material "brushed stainless steel" \ --resolution 2k --outdir ./assets/materials --name steel ```