Add this class to your project to always open with Chrome instead of your default browser (Firefox in my case) when you click "Play" or "Start Server". Note: This is an editor class and should either be put into an editor-only assembly or wrapped in #if UNITY_EDITOR and #endif.
using System.Diagnostics;
+using UnityEditor;
+using UnityEngine;
+using Needle.Engine;
+
+[InitializeOnLoad]
+public static class CustomBrowserOpen
+{
+ static CustomBrowserOpen()
+ {
+ Init();
+ }
+
+ [RuntimeInitializeOnLoadMethod]
+ static void Init()
+ {
+ ActionsBrowser.BeforeOpen += ActionsBrowser_BeforeOpen;
+ }
+
+ private static void ActionsBrowser_BeforeOpen(ActionsBrowser.OpenBrowserArguments args)
+ {
+ args.PreventDefault = true;
+ string processArgs = args.Url;
+ var psi = new ProcessStartInfo
+ {
+ FileName = "chrome.exe",
+ Arguments = processArgs
+ };
+ Process.Start(psi);
+ }
+}flowchart LR
+ Editor([<b>C# components</b><br/>on GameObjects]) --> gltf[<b>JSON data</b><br/>as glTF Extension] --> Runtime([<b>JavaScript components</b><br/>on Object3D])
+ class Editor,gltf,Runtime bg;flowchart LR
+ Editor([Unity Editor]) --> EditorExt([Components + Tools])
+ EditorExt -- export data --> glTF([glTF + Extensions])
+ glTF --> Bundler([Bundler - vite])
+ Runtime([Needle Runtime]) --> Bundler
+ Three([Three.js]) --> Bundler
+ YourWebsite([Classic web files - HTML, CSS, JS]) --> Bundler
+ Bundler -- outputs --> DevPage([web app - dev])
+ Bundler -- outputs --> DeploymentPage([web app - deploy])
+ glTF -- compressed with --> gltfTransform([glTF-transform]) --> DeploymentPage
+ class EditorExt,glTF,Runtime ndl;
+ class Editor,Three,Bundler,Page,gltfTransform,DeploymentPage,DevPage,YourWebsite ext;This section contains pieces of information that are important, but need to be sorted into their correct categories.
1: no custom shader support
Generated Projects can either be added to source control or kept dynamic. Adding them to source control unlocks being able to adjust HTML, CSS, etc very flexible.
To generate dynamic projects, change their path to ../Library/MyScene. They will be regenerated if needed.
Please follow the instructions in the Authentication section if this is your first time accessing packages by needle on this machine.
Note: This section is deprecated. Needle Engine is currently on Open Beta, and there's no need to authenticate against our registry at this point.
Make sure you have a Needle Engine and Exporter license, otherwise the following steps will fail (you'll not be able to get authenticated package access).
Needs to be setup once per machine.
starter/Authenticate with Unity 2020.3.xi icon in the top right corner opening the Registry Info window._authToken (see the video below)https://github.com/needle-tools/needle-engine-support/assets/30328735/92404e43-9d45-4ee2-a018-fb00412b6bd5
import { Behaviour, serializable, setWorldPosition } from "@needle-tools/engine";
+import { Object3D, Vector3 } from "three";
+
+const vector1 = new Vector3();
+const vector2 = new Vector3();
+
+export class PointerFollower extends Behaviour {
+
+ @serializable(Object3D)
+ target?: Object3D;
+
+ @serializable()
+ offset: number = 10;
+
+ update(): void {
+ const cam = this.context.mainCamera;
+ const input = this.context.input;
+
+ if(!this.target || !cam)
+ return;
+
+ // get relative mouse position, in range -1 to 1
+ const mouse = input.mousePositionRC;
+
+ // get world position of mouse on the near plane
+ vector1.set(mouse.x, mouse.y, -1).unproject(cam!);
+
+ // caulculate direction from camera to world mouse
+ vector2.copy(vector1).sub(cam.position).normalize();
+
+ // offset it to the wanted distance
+ vector1.addScaledVector(vector2, this.offset);
+
+ // apply the result
+ setWorldPosition(this.target, vector1);
+ }
+}Put it anywhere in your scene to render a camera video behind your 3D scene Live demo
import { Behaviour, ClearFlags, RGBAColor } from "@needle-tools/engine";
+
+export class VideoBackground extends Behaviour {
+
+ async awake() {
+ // create video element and put it inside the <needle-engine> component
+ const video = document.createElement("video");
+ video.style.cssText = \`
+ position: fixed;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -1;
+ \`
+ this.context.domElement.shadowRoot!.appendChild(video);
+
+ // get webcam input
+ const input = await navigator.mediaDevices.getUserMedia({ video: true })
+ if (!input) return;
+ video.srcObject = input;
+ video.play();
+
+ // make sure the camera background is transparent
+ const camera = this.context.mainCameraComponent;
+ if (camera) {
+ camera.clearFlags = ClearFlags.SolidColor;
+ camera.backgroundColor = new RGBAColor(125, 125, 125, 0);
+ }
+ }
+}This is mostly a basic example on how to contribute. It will then be added on our documentation contributions page: https://engine.needle.tools/docs/community/contributions
Please include at least one code snippet, for example like this:
import { Behaviour, serializable } from "@needle-tools/engine"
+import { Object3D } from "three"
+
+export class MyComponent extends Behaviour {
+
+ @serializable(Object3D)
+ myObjectReference?: Object3D;
+
+ start() {
+ console.log("Hello world", this);
+ }
+
+ update() {
+ // called every frame
+ }
+}When working in Unity or Blender then you will notice that when you create a new Needle Engine component in Typescript or Javascript it will automatically generate a Unity C# stub component OR a Blender panel for you.
This is thanks to the magic of the Needle component compiler that runs behind the scenes in an editor environment and watches changes to your script files. When it notices that you created a new Needle Engine component it will then generate the correct Unity component or Blender panel including public variables or properties that you can then set or link from within the Editor.
You can use the following comments in your typescript code to control C# code generation behavior:
| Attribute | Result |
|---|---|
// @generate-component | Force generation of next class |
// @dont-generate-component | Disable generation of next class, this is useful in cases where you already have an existing C# script in your project |
// @serializeField | Decorate generated field with [SerializeField] |
// @type UnityEngine.Camera | Specify generated C# field type |
// @nonSerialized | Skip generating the next field or method |
Force the component compiler to generate a C# AudioClip field named myAudioClip
import { Behaviour, serializable } from "@needle-tools/engine";
+
+export class MyComponent extends Behaviour {
+ //@type UnityEngine.AudioClip
+ @serializable()
+ myAudioClip?: string;
+}Force the component compiler to derive from a specific subclass
import { Behaviour } from "@needle-tools/engine";
+export class MyCustomBaseClass extends Behaviour { /* ... */ }
+// ---cut-before---
+//@type MyNamespace.MyCustomBaseClass
+export class MyComponent extends MyCustomBaseClass {
+}If you want to add scripts inside the src/scripts folder in your project then you need to have a Component Generator on the GameObject with your ExportInfo component.
Now when adding new components in your/threejs/project/src/scriptsit will automatically generate Unity scripts in Assets/Needle/Components.codegen.
If you want to add scripts to any NpmDef file you can just create them - each NpmDef automatically watches script changes and handles component generation, so you don't need any additional component in your scene.
For C# fields to be correctly generated it is currently important that you explictly declare a Typescript type. For example myField : number = 5
You can switch between Typescript input and generated C# stub components using the tabs below
`,15)),a(k,null,{default:l(()=>[a(e,{title:"Typescript"},{default:l(()=>t[0]||(t[0]=[i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," AssetReference"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," serializable "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyCustomComponent"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," myFloatValue"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 42"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," myOtherObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"AssetReference"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," prefabs"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," AssetReference[] "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," []"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"sayHello"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," sayHello"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"Hello World"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1}),a(e,{title:"Generated C#"},{default:l(()=>t[1]||(t[1]=[i("div",{class:"language-csharp","data-highlighter":"shiki","data-ext":"csharp","data-title":"csharp",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// NEEDLE_CODEGEN_START")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// auto generated code - do not edit directly")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"#"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"pragma"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," warning"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," disable")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"namespace"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Needle"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Typescript"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"GeneratedComponents")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," partial"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyCustomComponent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," :"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"MonoBehaviour")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," float"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @myFloatValue "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 42f"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @myOtherObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"[]"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @prefabs "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," new"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"[]{"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," };")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"(){}")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," update"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"(){}")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// NEEDLE_CODEGEN_END")])])])],-1)])),_:1}),a(e,{title:"Extending Generated C#"},{default:l(()=>t[2]||(t[2]=[i("div",{class:"language-csharp","data-highlighter":"shiki","data-ext":"csharp","data-title":"csharp",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"using"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEditor"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// you can add code above or below the NEEDLE_CODEGEN_ blocks")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// NEEDLE_CODEGEN_START")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// auto generated code - do not edit directly")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"#"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"pragma"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," warning"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," disable")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"namespace"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Needle"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Typescript"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"GeneratedComponents")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," partial"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyCustomComponent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," :"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"MonoBehaviour")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," float"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @myFloatValue "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 42f"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @myOtherObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"[]"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," @prefabs "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," new"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Transform"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"[]{"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," };")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"(){}")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," update"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"(){}")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// NEEDLE_CODEGEN_END")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"namespace"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Needle"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Typescript"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"GeneratedComponents")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // This is how you extend the generated component (namespace and class name must match!)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," partial"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyCustomComponent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," :"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"MonoBehaviour")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyAdditionalMethod"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," OnValidate"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," myFloatValue "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 42"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // of course you can also add custom editors")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ["),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"CustomEditor"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"typeof"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"MyCustomComponent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"))]")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," MyCustomComponentEditor"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," :"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Editor")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," override"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," OnInspectorGUI"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," EditorGUILayout"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"HelpBox"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"This is my sample component"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," MessageType"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"None"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},");")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," base"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"OnInspectorGUI"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"();")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1})]),_:1}),t[4]||(t[4]=h('Component C# classes are generated with the partial flag so that it is easy to extend them with functionality. This is helpful to draw gizmos, add context menus or add additional fields or methods that are not part of a built-in component.
Member Casing
Exported members will start with a lowercase letter. For example if your C# member is named MyString it will be assigned to myString.
| Name | Description |
|---|---|
AudioListener | |
AudioSource | Use to play audio |
| Name | Description |
|---|---|
Animator with AnimatorController | Export with animation state machine, conditions, transitions |
Animation | Most basic animation component. Only first clip is exported |
PlayableDirector with TimelineAsset | Export powerful sequences to control animation, audio, state and more |
| Name | Description |
|---|---|
Camera | |
Light | DirectionalLight, PointLight, Spotlight. Note that you can use it to bake light (e.g. Rectangular Light shapes) as well |
XRFlag | Control when objects will be visible. E.g. only enable object when in AR |
DeviceFlag | Control on which device objects will be visible |
LODGroup | |
ParticleSystem | Experimental and currently not fully supported |
VideoPlayer | Playback videos from url or referenced video file (will be copied to output on export). The VideoPlayer also supports streaming from MediaStream objects or M3U8 livestream URLs |
MeshRenderer | Used to handle rendering of objects including lightmapping and instancing |
SkinnedMeshRenderer | See MeshRenderer |
SpriteRenderer | Used to render Sprites and Spriteanimations |
Volume with PostProcessing asset | See table below |
Postprocessing effects use the pmndrs postprocessing library under the hood. This means you can also easily add your own custom effects and get an automatically optimized postprocessing pass.
| Effect Name | |
|---|---|
| Antialiasing | extra Unity Component |
| Bloom | via Volume asset |
| Chromatic Aberration | via Volume asset |
| Color Adjustments / Color Correction | via Volume asset |
| Depth Of Field | via Volume asset |
| Vignette | via Volume asset |
| ToneMappingEffect | via Volume asset or separate component |
| Pixelation | |
| Screenspace Ambient Occlusion N8 | |
| Screenspace Ambient Occlusion | |
| Tilt Shift Effect | |
| SharpeningEffect | |
| Your custom effect | See example on stackblitz |
| Name | Description |
|---|---|
SyncedRoom | Main networking component. Put in your scene to enable networking |
Networking | Used to setup backend server for networking. |
SyncedTransform | Automatically network object transformation |
SyncedCamera | Automatically network camera position and view to other users in room. You can define how the camera is being rendered by referencing an object |
WebXRSync | Networks WebXR avatars (AR and VR) |
Voip | Enables voice-chat |
Screensharing | Enables screen-sharing capabilities |
| Name | Description |
|---|---|
EventSystem | Handles raising pointer events and UI events on objects in the scene |
ObjectRaycater | Required for DragControls and Duplicatable |
GraphicsRaycaster | Same as ObjectRaycaster but for UI elements |
DragControls | Allows objects to be dragged in the scene. Requires raycaster in parent hierarchy, e.g. ObjectRaycaster |
Duplicatable | Can duplicate assigned objects by drag. Requires DragControls |
Interactable | Basic component to mark an object to be interactable. |
OrbitControls | Add to camera to add camera orbit control functionality |
SmoothFollow | Allows to interpolate smoothly to another object's transform |
DeleteBox | Will destroy objects with the Deletable component when entering the box |
Deletable | The GameObject this component is attached to will be deleted when it enters or intersects with a DeleteBox |
DropListener | Add to receive file drop events for uploading |
SpatialTrigger | Use to raise event if an object enters a specific space or area. You can also use Physics events |
SpatialTriggerReceiver | Use to receive events from SpatialTrigger |
Physics is implemented using Rapier.
| Name | Description |
|---|---|
Rigidbody | Add to make an object react to gravity (or be kinematic and static) |
BoxCollider | A Box collider shape that objects can collide with or raise trigger events when set to trigger |
SphereCollider | See BoxCollider |
CapsuleCollider | See BoxCollider |
MeshCollider | See BoxCollider |
| Physics Materials | Physics materials can be used to define e.g. the bouncyness of a collider |
| Name | Description |
|---|---|
GridHelper | Draws a grid |
BoxGizmo | Draws a box |
AxesHelper | Draws XYZ axes |
Note: When you're writing custom code you can use the static Gizmos methods for drawing debugging lines and shapes |
| Name | Description |
|---|---|
GltfExport | Experimental! Use to export gltf from web runtime. |
DropListener | Receive file drop events for uploading and networking |
Spatial UI components are mapped from Unity UI (Canvas, not UI Toolkit) to three-mesh-ui. UI can be animated.
| Name | Description |
|---|---|
Canvas | Unity's UI system. Needs to be in World Space mode right now. |
Text (Legacy) | Render Text using Unity's UI Text component. Custom fonts are supported, a font atlas will be automatically generated on export. Use the font settings to control which characters are included in the atlas. Note: In Unity make sure to use the Legacy/Text component (TextMeshPro is not supported at the moment) |
Button | Receives click events - use the onClick event to react to it. It can be added too 3D scene objects as well. Note: Make sure to use the Legacy/Text component in the Button (or create the Button via the UI/Legacy/Button Unity context menu since TextMeshPro is not supported at the moment) |
Image | Renders a sprite image |
RawImage | Renders a texture |
InputField | Allows text input |
Note: Depending on your project, often a mix of spatial and 2D UI makes sense for cross-platform projects where VR, AR, and screens are supported. Typically, you'd build the 2D parts with HTML for best accessibility, and the 3D parts with geometric UIs that also support depth offsets (e.g. button hover states and the like).
| Name | Description |
|---|---|
SceneSwitcher | Handles loading and unloading of other scenes or prefabs / glTF files. Has features to preload, change scenes via swiping, keyboard events or URL navigation |
| Name | Description |
|---|---|
ExportInfo | Main component for managing the web project(s) to e.g. install or start the web app |
EditorSync | Add to enable networking material or component value changes to the running three.js app directly from the Unity Editor without having to reload |
Use the mouse wheel or touch delta to update a timeline's time.
import { Behaviour, PlayableDirector, serializeable } from "@needle-tools/engine";
+import { Mathf } from "@needle-tools/engine";
+
+// Example of setting a timeline's time
+// without relying on any HTML elements.
+// Here we directly use the mousewheel scroll and the touch delta
+
+export class ScrollTimeline_2 extends Behaviour {
+
+ @serializeable(PlayableDirector)
+ timeline?: PlayableDirector;
+
+ @serializeable()
+ scrollSpeed: number = 0.5;
+
+ @serializeable()
+ lerpSpeed: number = 2.5;
+
+ private targetTime: number = 0;
+
+ start() {
+
+ this.timeline?.pause();
+
+ // Grab the mousewheel event
+ window.addEventListener("wheel", (evt: WheelEvent) => this.updateTime(evt.deltaY));
+
+ // Touch events are a bit more complicated
+ // We need to keep track of the last touch position
+ // and calculate the delta between the current and the last position
+ let lastTouchPosition = -1;
+ window.addEventListener("touchmove", (evt: TouchEvent) => {
+ const delta = evt.touches[0].clientY - lastTouchPosition;
+ // We only want to apply the delta if it's not TOO big
+ // e.g. when the user is scrolling the page
+ if (delta < 10) this.updateTime(-delta);
+ // Update the last touch position
+ lastTouchPosition = evt.touches[0].clientY;
+ });
+ }
+
+ private updateTime(delta) {
+ if (!this.timeline) return;
+ this.targetTime += delta * 0.01 * this.scrollSpeed;
+ this.targetTime = Mathf.clamp(this.targetTime, 0, this.timeline.duration);
+ }
+
+ onBeforeRender(): void {
+ if (!this.timeline) return;
+ this.timeline.pause();
+ this.timeline.time = Mathf.lerp(this.timeline.time, this.targetTime, this.lerpSpeed * this.context.time.deltaTime);
+ this.timeline.evaluate();
+ }
+}I combined two checks - Needle's check to see if it's a mobile device (this way, you can exclude desktops), and then a second check that uses user agent info to see if it's one of the most common mobile systems. Result: the button does not appear on mobile phones, but it is visible on Quest and Pico ๐
P.S: I am using Svelte for 2D UI handling.
import { isMobileDevice, NeedleXRSession } from "@needle-tools/engine";
+
+...
+
+// check if this is a mobile phone
+function isMobilePhone() {
+ return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+...
+
+// show the button, if the device is not a mobile phone and VR is supported
+{#if isMobileDevice() && !isMobilePhone() && $haveVR }
+ <VrButton buttonFunction={() => StartVR()} />
+{/if}To inspect glTF or glb files online:
To inspect them locally:
Debug Flags can be appended as URL query parameters.
Use ?help to get a list of ALL parameters available.
Here are some of the most commonly used:
help print all available url parameter in the consoleconsole opens an on-screen dev console, useful for mobile debuggingprintGltf logs loaded gltf files to the consolestats shows FPS module and logs threejs renderer stats every few secondsshowcolliders visualizes physics collidersgizmos enables gizmo rendering (e.g. when using BoxCollider or AxesHelper components)help to see them allnpm install -g http-serverhttp-server -g | -g enables gzip supporthttp-server -g -S to enable https (required for WebXR).You can attach VSCode to the running local server to set breakpoints and debug your code. You can read more about debugging with VSCode here.
Create a launch.json file at .vscode/launch.json in your web project with the following content:
{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Attach Chrome",
+ "url": "https://localhost:3000",
+ "webRoot": "\${workspaceFolder}"
+ }
+ ]
+}If you have changed the port on which your server starts make sure to update the url field accordingly.
You can then start your local server from within VSCode:
For Android debugging, you can attach Chrome Dev Tools to your device and see logs right from your PC. You have to switch your device into development mode and connect it via USB.
See the official chrome documentation here
chrome://inspect/#deviceschrome://inspect/#devices)Inspect on the tab you want to debugFor easy iOS debugging add the ?console URL parameter to get a useful on-screen JavaScript console.
If you have a Mac, you can also attach to Safari (similar to the Android workflow above).
WebXR usage and debugging on iOS requires using a third-party browser: Mozilla WebXR Viewer.
Quest is just an Android device - see the Android Debugging section for steps.
',19))])}const b=n(g,[["render",u],["__file","debugging.html.vue"]]),f=JSON.parse('{"path":"/debugging.html","title":"How To Debug","lang":"en-US","frontmatter":{"title":"How To Debug","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/how to debug.png"}],["meta",{"name":"og:description","content":"---\\nTo inspect glTF or glb files online:"}]],"description":"---\\nTo inspect glTF or glb files online:"},"headers":[{"level":2,"title":"Useful resources for working with glTF","slug":"useful-resources-for-working-with-gltf","link":"#useful-resources-for-working-with-gltf","children":[]},{"level":2,"title":"Built-in URL parameters","slug":"built-in-url-parameters","link":"#built-in-url-parameters","children":[]},{"level":2,"title":"Debug Methods","slug":"debug-methods","link":"#debug-methods","children":[]},{"level":2,"title":"Local Testing of release builds","slug":"local-testing-of-release-builds","link":"#local-testing-of-release-builds","children":[]},{"level":2,"title":"VSCode","slug":"vscode","link":"#vscode","children":[]},{"level":2,"title":"Mobile","slug":"mobile","link":"#mobile","children":[{"level":3,"title":"Android Debugging","slug":"android-debugging","link":"#android-debugging","children":[]},{"level":3,"title":"iOS Debugging","slug":"ios-debugging","link":"#ios-debugging","children":[]},{"level":3,"title":"Quest Debugging","slug":"quest-debugging","link":"#quest-debugging","children":[]}]}],"git":{"updatedTime":1700724672000},"filePathRelative":"debugging.md"}');export{b as comp,f as data}; diff --git a/assets/deployment.html-C3wlSpNe.js b/assets/deployment.html-C3wlSpNe.js new file mode 100644 index 000000000..d4e8d7ada --- /dev/null +++ b/assets/deployment.html-C3wlSpNe.js @@ -0,0 +1,4 @@ +import{_ as a}from"./texture-compression-BuEaeBZn.js";import{_ as s}from"./ktx-env-variable-DxwKzzNo.js";import{_ as r,r as l,o as d,c as p,e as o,a as t,d as c,b as h}from"./app-CRZRGfEE.js";const i="/docs/imgs/unity-texture-compression.jpg",m="/docs/imgs/unity-texture-compression-options.jpg",u="/docs/imgs/unity-mesh-compression-component.jpg",g="/docs/imgs/unity-mesh-simplification.jpg",y="/docs/imgs/unity-progressive-textures.jpg",b="/docs/imgs/unity-lods-settings-1.jpg",f="/docs/imgs/unity-lods-settings-2.jpg",w="/docs/deployment/deploytoglitch-1.jpg",v="/docs/deployment/deploytoglitch-2.jpg",k="/docs/blender/deploy_to_glitch.webp",x="/docs/deployment/deploytonetlify-2.jpg",T="/docs/deployment/deploytonetlify.jpg",_="/docs/deployment/deploytoftp.jpg",j="/docs/deployment/deploytoftp2.jpg",D="/docs/deployment/deploytoftp3.jpg",P="/docs/deployment/buildoptions_gzip.jpg",F="/docs/deployment/deploytogithubpages.jpg",G="/docs/deployment/deploytofacebookinstantgames.jpg",I="/docs/deployment/deploytofacebookinstantgames-hosting.jpg",U="/docs/deployment/deploytofacebookinstantgames-upload.jpg",N="/docs/deployment/facebookinstantgames-1.jpg",B="/docs/deployment/facebookinstantgames-2.jpg",C="/docs/deployment/facebookinstantgames-3.jpg",S="/docs/imgs/unity-build-window-menu.jpg",O="/docs/imgs/unity-build-window.jpg",A={},z={class:"hint-container details"};function E(M,e){const n=l("video-embed");return d(),p("div",null,[e[2]||(e[2]=o('Deployment is the process of making your application available to the public on a website. Needle Engine ensures that your project is as small and fast as possible by using the latest compression techniques such as KTX2, Draco, and Meshopt.
Feel something is missing?
Please let us know in our discord!
See guides above on how to access the options from within your Editor (e.g. Unity or Blender).
The main difference to a production build is that it does not perform ktx2 and draco compression (for reduction of file size and loading speed) as well as the option to progressively load high-quality textures.
We generally recommend making production builds for optimized file size and loading speed (see more information below).
To make a production build, you need to have toktx installed, which provides texture compression using the KTX2 supercompression format. Please go to the toktx Releases Page and download and install the latest version (v4.1.0 at the time of writing). You may need to restart Unity after installing it.
If you're sure that you have installed toktx and it's part of your PATH but still can't be found, please restart your machine and try build again.
If you plan on adding your own custom glTF extensions, building for production requires handling those in gltf-transform. See @needle-tools/gltf-build-pipeline for reference.
Production builds will by default compress textures using KTX2 (either ETC1S or UASTC depending on their usage in the project)
but you can also select WebP compression and select a quality level.
| Format | ETC1S | UASTC | WebP |
|---|---|---|---|
| GPU Memory Usage | Low | Low | High (uncompressed) |
| File Size | Low | High | Very low |
| Quality | Medium | Very high | Depends on quality setting |
| Typical usage | Works for everything, but best for color textures | High-detail data textures: normal maps, roughness, metallic, etc. | Files where ETC1S quality is not sufficient but UASTC is too large |
You have the option to select texture compression and progressive loading options per Texture by using the Needle Texture Importer in Unity or in the Material tab in Blender.
Select the material tab. You will see compression options for all textures that are being used by that material.
Windows: Make sure you have added toktx to your system environment variables. You may need to restart your computer after adding it to refresh the environment variables. The default install location is C:\\Program Files\\KTX-Software\\bin
By default, a production build will compress meshes using Draco compression. Use the MeshCompression component to select between draco and mesh-opt per exported glTF.
Additionally you can setup mesh simplification to reduce the polycount for production builds in the mesh import settings (Unity). When viewing your application in the browser, you can append ?wireframe to your URL to preview the meshes.
| Format | Draco | Meshopt |
|---|---|---|
| GPU Memory Usage | Medium | Low |
| File Size | Lowest | Low |
| Animation compression | No | Yes |
Add the MeshCompression component to select which compression should be applied per exported glTF.
GltfObject or the prefab that is referenced / exported by any of your components.Select a Mesh and open the Needle importer options to see available options for the selected mesh:
You can also add the Progressive Texture Settings component anywhere in your scene, to make all textures in your project be progressively loaded. Progressive loading is not applied to lightmaps or skybox textures at this point.
With progressive loading textures will first be loaded using a lower resolution version. A full quality version will be loaded dynamically when the texture becomes visible. This usually reduces initial loading of your scene significantly.
Since Needle Engine 3.36 we automatically generate LOD meshes and switch between them at runtime. LODs are loaded on demand and only when needed so so this feature both reduces your loading time as well as performance.
Key Beneftis
You can either disable LOD generation for your whole project in the Progressive Loading Settings component or in the Mesh Importer settings.
Glitch provides a fast and free way for everyone to host small and large websites. We're providing an easy way to remix and deploy to a new Glitch page (based on our starter), and also to run a minimalistic networking server on the same Glitch page if needed.
You can deploy to glitch by adding the DeployToGlitch component to your scene and following the instructions.
Note that free projects hosted on glitch may not exceed ~100 MB. If you need to upload a larger project consider using a different deployment target.
Add the DeployToGlitch component to the GameObject that also has the ExportInfo component.
Click the Create new Glitch Remix button on the component
Glitch will now create a remix of the template. Copy the URL from your browser
Open Unity again and paste the URL in the Project Name field of your Deploy To Glitch component
Wait a few seconds until Unity has received your deployment key from glitch (this key is safely stored in the .env file on glitch. Do not share it with others, everyone with this key will be able to upload to your glitch website)
Once the Deploy Key has been received you can click the Build & Deploy button to upload to glitch.
Remix on glitch button on the component.env file and enter a password in the field Variable Value next to the DEPLOY_KEYKey fieldDeployToGlitch button to build and upload your project to glitch. A browser will open when the upload has finished. Try to refresh the page if it shows black after having opened it.If you click Create new Glitch Remix and the browser shows an error like there was an error starting the editor you can click OK. Then go to glitch.com and make sure you are signed in. After that you then try clicking the button again in Unity or Blender.
Just add the DeployToNetlify component to your scene and follow the instructions. You can create new projects with the click of a button or by deploying to existing projects.
See our sample project for the project configuration
Create a new project on itch.io
Set Kind of project to HTML
Add the DeployToItch component to your scene and click the Build button
Wait for the build to finish, it will open a folder with the final zip when it has finished
Upload to final zip to itch.io
Select This file will be played in the browser
Save your itch page and view the itch project page.
It should now load your Needle Engine project ๐
If you see this error after uploading your project make sure you do not upload a gzipped index.html. You can disable gzip compression in vite.config.js in your Needle web project folder. Just remove the line with viteCompression({ deleteOriginFile: true }). The build your project again and upload to itch.
DeployToFTP componentยน on a GameObject in your scene (it is good practice to add it to the same GameObject as ExportInfo - but it is not mandatory)DeployToFTP component to build your project and uploading it to your FTP account
ยน Deploy to FTP component
ยฒ FTP Server asset containing the access information of your FTP user account
Deploy To FTP component after server asset is assigned. You can directly deploy to a subfolder on your server using the path field
File > Build Settings, select Needle Engine, and click on Builddist folder will open automatically after all build and compression steps have run.dist folder to your FTP storage.That's it! ๐
Note: If the result doesn't work when uploaded it might be that your web server does not support serving gzipped files. You have two options to fix the problem:
Option 1: You can try enabling gzip compression on your server using a htaccess file!
Option 2: You can turn gzip compression off in the build settings at File/Build Window and selecting the Needle Engine platform.
Note: If you're getting errors during compression, please let us know and report a bug! If your project works locally and only fails when doing production builds, you can get unstuck right away by doing a Development Build. For that, simply toggle
Development Buildon in the Build Settings.
To enable gzip compression on your FTP server you can create a file named .htaccess in the directory you want to upload to (or a parent directory).
Insert the following code into your .htaccess file and save/upload it to your server:
<IfModule mod_mime.c>
+RemoveType .gz
+AddEncoding gzip .gz
+AddType application/javascript .js.gzWith Needle Engine you can build to Facebook Instant Games automatically
No manual adjustments to your web app or game are required.
Deploy To Facebook Instant Games component to your scene: Build For Instant Games buttonInstant Games module and go to Instant Games/Web hostingUpload version button (1). After the upload has finished and the zip has been processed click the Stage for testing button to test your app (2, here the blue button) or Push to production (the button with the star icon) Play button next to each version to test your game on facebook.Create a new app and select Other. Then click Next
Select type Instant Games
After creating the app add the Instant Games product
Here you can find the official instant games documentation on facebook.
Note that all you have to do is to create an app with instant games capabilities.
We will take care of everything else and no manual adjustments to your Needle Engine website are required.
In Unity open File/Build Settings and select Needle Engine for options:
To build your web project for uploading to any web server you can click Build in the Unity Editor Build Settings Window. You can enable the Development Build checkbox to omit compression (see below) which requires toktx to be installed on your machine.
To locally preview your final build you can use the Preview Build button at the bottom of the window. This button will first perform a regular build and then start a local server in the directory with the final files so you can see what you get once you upload these files to your webserver.
Nodejs is only required during development. The distributed website (using our default vite template) is a static page that doesn't rely on Nodejs and can be put on any regular web server. Nodejs is required if you want to run our minimalistic networking server on the same web server (automatically contained in the Glitch deployment process).
It's possible to create regular Unity projects where you can build both to Needle Engine and to regular Unity platforms such as Desktop or even WebGL. Our "component mapping" approach means that no runtime logic is modified inside Unity - if you want you can regularily use Play Mode and build to other target platforms. In some cases this will mean that you have duplicate code (C# code and matching TypeScript logic). The amount of extra work through this depends on your project.
Enter Play Mode in Unity
In Project Settings > Needle Engine, you can turn off Override Play Mode and Override Build settings to switch between Needle's build process and Unity's build process:
Needle Engine for Unity supports various commandline arguments to export single assets (Prefabs or Scenes) or to build a whole web project in batch mode (windowsless).
The following list gives a table over the available options:
-scene | path to a scene or a asset to be exported e.g. Assets/path/to/myObject.prefab or Assets/path/to/myScene.unity |
-outputPath <path/to/output.glb> | set the output path for the build (only valid when building a scene) |
-buildProduction | run a production build |
-buildDevelopment | run a development build |
-debug | open a console window for debugging |
Needle allows for a very fast, iterative workflow between Unity and the browser. Usually, exports take less than a few seconds. However, once scenes become more complex, for some types of changes (adjusting material properties, nudging objects around), we provide an even faster way to see your changes โ Editor Sync.
You can enable Editor Sync by adding the EditorSync component to your scene. This component will connect your Unity Editor with your browser project and automatically sync applicable changes between the two.
Tips
Editor Sync is currently an experimental feature. Please let us know about your experience with it! We're eager to hear your feedback.
This tutorial shows the Editor Sync workflow in action:
',7)),s(t,{src:"https://www.youtube.com/watch?v=gZX_sqrne8U",limit_height:""})])}const p=o(d,[["render",l],["__file","editor-sync.html.vue"]]),u=JSON.parse('{"path":"/unity/editor-sync.html","title":"Editor Sync","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/unity: editor sync.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":2,"title":"How to use Editor Sync","slug":"how-to-use-editor-sync","link":"#how-to-use-editor-sync","children":[]},{"level":2,"title":"Video Tutorial","slug":"video-tutorial","link":"#video-tutorial","children":[]}],"git":{"updatedTime":1727106484000},"filePathRelative":"unity/editor-sync.md"}');export{p as comp,u as data}; diff --git a/assets/embedding.html-Bwm82YNo.js b/assets/embedding.html-Bwm82YNo.js new file mode 100644 index 000000000..080c44d32 --- /dev/null +++ b/assets/embedding.html-Bwm82YNo.js @@ -0,0 +1,16 @@ +import{_ as p,r as l,o as r,c,e as o,b as t,w as a,a as e,d as s}from"./app-CRZRGfEE.js";const k={};function u(g,i){const n=l("CodeGroupItem"),h=l("CodeGroup"),d=l("RouteLink");return r(),c("div",null,[i[6]||(i[6]=o('Needle Engine can be used to create new web apps, and can also be integrated into existing websites. In both cases, you'll want to upload your project's distribution folder to a web hoster to make them accessible to the world.
There are several ways to integrate Needle Engine with your website. Which one is better depends on a number of factors, like complexity of your project, if you're using custom scripts or only core components, how much control you have over the target website, what the "trust level" is between you and the target website, and so on.
The two most common workflows are:
Try it out now!
If you want to quickly try out how projects made with Needle will look on your website, just add these two lines anywhere on your page for testing:
Recommended Workflow
This is the easiest option, and recommended for most workflows โ it's very fast! You can iteratively work on your project on your computer, and then upload a new version to the web in seconds.
If you don't want to use our "Deploy to..." components, or there's no component for your particlar workflow, you can do the same process manually. The resulting web app will be identical to what you see in your local server while working on the project.
Make a production build of your web project. This will create a dist/ folder with all necessary files, ready for distribution. It contains all necessary files, including the JavaScript bundle, the HTML file, and any other assets like textures, audio, or video files.
Upload the content of the dist/ folder from your Web Project to your web hoster. You can do this via FTP, SFTP, or any other file transfer method your hoster provides. Look at the documentation of your web hoster for details.
That's it! Your web app is now live.
The folder location influences the URL of your web app.
Depending on your hoster's settings, the folder location and name determine what the URL of your web app is. Here's an example:
https://your-website.com/ points at the folder /var/www/html on your webspace./var/www/html/my-app so that the index.html file is at /var/www/html/my-app/index.html.https://your-website.com/my-app/.In some cases, you want a Needle Engine project to be part of an existing web site, for example as a part of a blog post, a product page, or a portfolio. The process is very similar, but instead of uploading the files to the root of your web space, you embed the project into an existing website with a few lines of code.
Make a production build of your web project. This will create a dist/ folder with all necessary files, ready for distribution. It contains all necessary files, including the JavaScript bundle, the HTML file, and any other assets like textures, audio, or video files.
Upload the dist/ folder from your Web Project to your web hoster.
The folder can be hosted anywhere!
If you don't have access to your web hoster's file system, or no way to upload files there, you can upload the folder to any other webspace and use the public URL of that in the next step.
Inside your dist folder, you'll find an index.html file. We want to copy some lines from this folder, so open the file in a text editor. Typically, it looks like this:
<head>
+ ...
+ <script type="module" crossorigin src="./assets/index-732f0764.js"></script>
+ ...
+</head>
+<body>
+ <needle-engine src="assets/scene.glb"></needle-engine>
+</body>There are two important lines here:
<script>,<needle-engine> HTML tag.On the target website, add the <script...> and <needle-engine...> tags as well. Make sure that the paths point at the location where you have uploaded the files to.
<script type="module" src="/your-upload-folder/assets/index-732f0764.js"></script>
+<needle-engine src="/your-upload-folder/assets/scene.glb"></needle-engine>That's it! The scene should now be displayed on your website.
When you have limited access to a website, for example when you're using a CMS like WordPress, you can use an iframe to embed a Needle Engine scene into your website. You may know this workflow from embedding YouTube videos or Sketchfab models.
Make a production build of your web project. This will create a dist/ folder with all necessary files, ready for distribution.
Upload the dist/ folder from your Web Project to your web hoster.
The folder can be hosted anywhere!
If you don't have access to your web hoster's file system, or no way to upload files there, you can upload the folder to any other webspace and use the public URL of that in the next step.
Add an iframe to your website, pointing to the index.html file in the dist/ folder.
<iframe
+ src="https://your-website.com/needle-files/dist/index.html"
+ allow="xr; xr-spatial-tracking; fullscreen;">
+</iframe>Permissions inside iframes
The list inside allow= depends on the features your web app uses. For example, XR applications require xr and xr-spatial-tracking to work inside iframes.
There may be additional features needed, for example camera; microphone; display-capture; geolocation. See the full list of iframe Permissions Policy directives on MDN.
That's it! The scene should now be displayed on your website.
When your project uses only core components and no custom scripts, you can directly use Needle Engine from a CDN (content-delivery network).
Add the following snippet to your website, for example as "HTML Block" in your CMS:
<script type="module" src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.min.js"></script>
+<needle-engine src="https://cloud.needle.tools/api/v1/public/873a48a/10801b111/MusicalInstrument.glb" background-blurriness="0.8"></needle-engine>Upload the assets/ folder from your Web Project to your web hoster. Depending on your project settings, this folder contains one or more .glb files and any number of other files like audio, video, skybox and more.
Change the src= attribute of the needle-engine tag to the URL of the .glb file you want to display. Typically, this will be some path like https://your-website.com/assets/MyScene.glb.
That's it! The scene should now be displayed on your website.
If you deployed your project to Needle Cloud, you can easily display it on your own website with an iframe.
Under construction. This section is not yet complete.
Decide on the method you want to use to embed your Needle Engine project. You can either use the "Embedding a Needle project into an existing website" method, or the "Embedding a Needle project as iframe" method.
Upload the content of the dist/ folder from your Web Project to your web hoster. Usually, the Wordpress uploads directory is located at wp-content/uploads/.
Wordpress Backups
You can decide if your new project should be at wp-content/uploads/my-project/, or at a different location like my-projects/my-project. This affects if and how your project will be contained in Wordpress backups.
In the page you want to add Needle Engine to, add a HTML block and paste the code snippet as outlined above โ either as script embed, or as iframe.
Under construction. Needs to be documented.
Under construction. Needs to be documented.
Under construction. Needs to be documented.
Example for adding custom USDZ behaviours for iOS AR
This is an USDZ / iOS AR only example
export class EmphasizeOnClick extends Behaviour implements UsdzBehaviour {
+
+ @serializable()
+ target?: Object3D;
+
+ @serializable()
+ duration: number = 0.5;
+
+ @serializable()
+ motionType: MotionType = MotionType.bounce;
+
+ beforeCreateDocument() { }
+
+ createBehaviours(ext, model, _context) {
+ if (!this.target) return;
+
+ if (model.uuid === this.gameObject.uuid) {
+ const emphasize = new BehaviorModel("emphasize " + this.name,
+ TriggerBuilder.tapTrigger(this.gameObject),
+ ActionBuilder.emphasize(this.target, this.duration, this.motionType, undefined, "basic"),
+ );
+ ext.addBehavior(emphasize);
+ }
+ }
+
+ afterCreateDocument(_ext, _context) { }
+}Needle's Everywhere Actions are a set of carefully chosen components that allow you to create interactive experiences in Unity without writing a single line of code.
They are designed to serve as building blocks for experiences across the web, mobile and XR, including Augmented Reality on iOS.
From low-level triggers and actions, higher-level complex interactive behaviours can be built.
For iOS support add the USDZExporter component to your scene. It is good practice to add it to the same object as the WebXR component (but not mandatory)
To add an action to any object in your scene
select it and then click Add Component > Needle > Everywhere Actions > [Action].
| Action | Description | Example Use Cases |
|---|---|---|
| Play Animation on Click | Plays a selected animation state from an Animator. After playing, it can optionally transition to another animation. | Product presentations, interactive tutorials, character movement |
| Change Material on Click | Switch out one material for others. All objects with that material will be switched together. | Product configurators, characters |
| Look At | Make an object look at the camera. | UI elements, sprites, info graphics, billboard effects, clickable hotspots |
| Play Audio on Click | Plays a selected audio clip. | Sound effects, Narration, Museum exhibits |
| Hide on Start | Hides an object at scene start for later reveal. | |
| Set Active on Click | Show or hide objects. | |
| Change Transform on Click | Move, rotate or scale an object. Allows for absolute or relative movement. | Characters, products, UI animation (use animation for more complex movements) |
| Audio Source | Plays audio on start and keeps looping. Spatial or non-spatial | Background music, ambient sounds |
| WebXR Image Tracking | Tracks an image target and shows or hides objects. | AR experiences, product presentations |
Demonstrates spatial audio, animation, and interactions.
',14)),s(t,{src:"https://engine.needle.tools/samples-uploads/musical-instrument"}),i[1]||(i[1]=e("h3",{id:"simple-character-controllers",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#simple-character-controllers"},[e("span",null,"Simple Character Controllers")])],-1)),i[2]||(i[2]=e("p",null,"Demonstrates combining animations, look at, and movement.",-1)),s(t,{src:"https://engine.needle.tools/samples-uploads/usdz-characters"}),i[3]||(i[3]=a('Demonstrates how to attach 3D content onto a custom image marker. Start the scene below in AR and point your phone's camera at the image marker on a screen, or print it out.
On Android: please turn on "WebXR Incubations" in the Chrome Flags. You can find those by pasting chrome://flags/#webxr-incubations into the Chrome browser address bar of your Android phone.
',5)),s(t,{src:"https://engine.needle.tools/samples-uploads/image-tracking"}),i[4]||(i[4]=e("h3",{id:"interactive-building-blocks-overview",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#interactive-building-blocks-overview"},[e("span",null,"Interactive Building Blocks Overview")])],-1)),s(t,{src:"https://engine.needle.tools/samples-uploads/usdz-interactivity"}),i[5]||(i[5]=a(`Creating new Everywhere Actions involves writing code for your action in TypeScript, which will be used in the browser and for WebXR, and using our TriggerBuilder and ActionBuilder API to create a matching setup for Augmented Reality on iOS via QuickLook. When creating custom actions, keep in mind that QuickLook has a limited set of features available. You can still use any code you want for the browser and WebXR, but the behaviour for QuickLook may need to be an approximation built from the available triggers and actions.
Tips
Often constructing specific behaviours requires thinking outside the box and creatively applying the available low-level actions. An example would be a "Tap to Place" action โ there is no raycasting or hit testing available in QuickLook, but you could cover the expected placement area with a number of invisible objects and use a "Tap" trigger to move the object to be placed to the position of the tapped invisible object.
Triggers and Actions for QuickLook are based on Apple's Preliminary Interactive USD Schemas
Here's the implementation for HideOnStart as an example for how to create an Everywhere Action with implementations for both the browser and QuickLook:
import { Behaviour, UsdzBehaviour, BehaviorModel, TriggerBuilder, ActionBuilder, BehaviorExtension, USDObject, USDZExporterContext } from "@needle-tools/engine";
+
+export class HideOnStart extends Behaviour implements UsdzBehaviour {
+
+ start() {
+ this.gameObject.visible = false;
+ }
+
+ createBehaviours(ext: BehaviorExtension, model: USDObject, _context: USDZExporterContext) {
+ if (model.uuid === this.gameObject.uuid)
+ ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+ TriggerBuilder.sceneStartTrigger(),
+ ActionBuilder.fadeAction(model, 0, false)
+ ));
+ }
+
+ beforeCreateDocument() {
+ this.gameObject.visible = true;
+ }
+
+ afterCreateDocument() {
+ this.gameObject.visible = false;
+ }
+}Tips
Often, getting the right behaviour will involve composing higher-level actions from the available lower-level actions. For example, our "Change Material on Click" action is composed of a number of fadeActions and internally duplicates objects with different sets of materials each. By carefully constructing these actions, complex behaviours can be achieved.
| Triggers | |
|---|---|
TriggerBuilder.sceneStartTrigger | |
TriggerBuilder.tapTrigger |
| Actions | |
|---|---|
ActionBuilder.fadeAction | |
ActionBuilder.startAnimationAction | |
ActionBuilder.waitAction | |
ActionBuilder.lookAtCameraAction | |
ActionBuilder.emphasize | |
ActionBuilder.transformAction | |
ActionBuilder.playAudioAction |
| Group Actions | |
|---|---|
ActionBuilder.sequence | |
ActionBuilder.parallel | |
GroupAction.addAction | |
GroupAction.makeParallel | |
GroupAction.makeSequence | |
GroupAction.makeLooping | |
GroupAction.makeRepeat |
To see the implementation of our built-in Everywhere Actions, please take look at src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts.
The following pages provide more examples and samples that you can test and explore right now:
Explore some real world applications, websites and demos made with Needle Engine.
Get started now โข Learn more about our vision โข Features Overview โข Samples to download
Visit Website โ by Needle
',5)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186126996-27b45c5f-f3b9-40f7-b8c7-6ecba1d25a6e.mp4"}),n[1]||(n[1]=e("h2",{id:"castle-builder",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#castle-builder"},[e("span",null,"Castle Builder")])],-1)),n[2]||(n[2]=e("p",null,[e("a",{href:"https://castle.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Play Now"),a(" โ by Needle")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186145731-705cfec2-1779-4a0b-97d9-95f3edaaf2d0.mp4"}),n[3]||(n[3]=e("h2",{id:"bike-configurator",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#bike-configurator"},[e("span",null,"Bike Configurator")])],-1)),n[4]||(n[4]=e("p",null,[e("a",{href:"https://bike.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Bike Configurator"),a(" โ by Needle")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186146814-52fb05c7-a073-4efa-a226-47a9c1835413.mp4"}),n[5]||(n[5]=e("h2",{id:"sandbox-template",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#sandbox-template"},[e("span",null,"Sandbox Template")])],-1)),n[6]||(n[6]=e("p",null,[e("a",{href:"https://fwd.needle.tools/needle-engine/glitch-starter",target:"_blank",rel:"noopener noreferrer"},"Sandbox Template"),a(" โ by Needle")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186149117-ca7cf22f-dc7d-4c74-86d4-d78fe53a208c.mp4"}),n[7]||(n[7]=e("h2",{id:"songs-of-cultures",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#songs-of-cultures"},[e("span",null,"Songs of Cultures")])],-1)),n[8]||(n[8]=e("p",null,[e("a",{href:"https://fwd.needle.tools/needle-engine/projects/songs-of-cultures",target:"_blank",rel:"noopener noreferrer"},"Songs of Cultures"),a(" โ by A.MUSE")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186147814-159a33f9-f1a6-47d4-804f-5f8f5a63125d.mp4"}),n[9]||(n[9]=e("h2",{id:"pok-mon-card",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#pok-mon-card"},[e("span",null,"Pokรฉmon Card")])],-1)),n[10]||(n[10]=e("p",null,[e("a",{href:"https://fwd.needle.tools/needle-engine/projects/pokemon-card",target:"_blank",rel:"noopener noreferrer"},"Pokรฉmon Card"),a(" โ Scene from Alex Ameye โข "),e("a",{href:"https://alexanderameye.github.io/notes/holographic-card-shader/",target:"_blank",rel:"noopener noreferrer"},"Original Blog Post by Alex")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186149736-49a697b3-4282-4b71-ab13-a6b176955c13.mp4"}),n[11]||(n[11]=e("h2",{id:"encryption-in-space",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#encryption-in-space"},[e("span",null,"Encryption in Space")])],-1)),n[12]||(n[12]=e("p",null,[e("a",{href:"https://fwd.needle.tools/needle-engine/projects/encryption",target:"_blank",rel:"noopener noreferrer"},"Encryption in Space"),a(" โ by Katja Rempel & Nick Jwu")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186151157-0c0a7d05-ad42-44be-b553-8d4cd48cbb81.mp4"}),n[13]||(n[13]=e("h2",{id:"physics-playground",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#physics-playground"},[e("span",null,"Physics Playground")])],-1)),n[14]||(n[14]=e("p",null,[e("a",{href:"https://bruno-simon-20k-needle.glitch.me/",target:"_blank",rel:"noopener noreferrer"},"Physics Playground"),a(" โ Scene from Bruno Simon")],-1)),r(t,{src:"https://user-images.githubusercontent.com/5083203/186149536-987ee796-3fe0-42bc-bd80-4c25aaf174aa.mp4"})])}const m=o(p,[["render",u],["__file","examples.html.vue"]]),h=JSON.parse('{"path":"/examples.html","title":"Example Projects โจ","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/examples.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":2,"title":"Needle Website","slug":"needle-website","link":"#needle-website","children":[]},{"level":2,"title":"Castle Builder","slug":"castle-builder","link":"#castle-builder","children":[]},{"level":2,"title":"Bike Configurator","slug":"bike-configurator","link":"#bike-configurator","children":[]},{"level":2,"title":"Sandbox Template","slug":"sandbox-template","link":"#sandbox-template","children":[]},{"level":2,"title":"Songs of Cultures","slug":"songs-of-cultures","link":"#songs-of-cultures","children":[]},{"level":2,"title":"Pokรฉmon Card","slug":"pok-mon-card","link":"#pok-mon-card","children":[]},{"level":2,"title":"Encryption in Space","slug":"encryption-in-space","link":"#encryption-in-space","children":[]},{"level":2,"title":"Physics Playground","slug":"physics-playground","link":"#physics-playground","children":[]}],"git":{"updatedTime":1726606065000},"filePathRelative":"examples.md"}');export{m as comp,h as data}; diff --git a/assets/export.html-Cyapuf2Z.js b/assets/export.html-Cyapuf2Z.js new file mode 100644 index 000000000..1a003d44e --- /dev/null +++ b/assets/export.html-Cyapuf2Z.js @@ -0,0 +1,23 @@ +import{_ as s,r as n,o,c as l,e as a,a as r,d as t,b as p,w as h}from"./app-CRZRGfEE.js";const d={};function c(g,e){const i=n("RouteLink");return o(),l("div",null,[e[3]||(e[3]=a('Add an ExportInfo component to your Unity scene to generate a new web project from a template, link to an existing web project that you want to export to, set up dependencies to other libraries and packages and to deploy your project.
By default, your scene is exported on save. This setting can be changed by disabling Auto Export in the ExportInfo component.
To export meshes, materials, animations, textures (...) create a new GameObject in your hierarchy and add a GltfObject component to it. This is the root of a new glTF file. It will be exported whenever you make a change to the scene and save.
Only scripts and data on and inside those root objects is exported. Scripts and data outside of them are not exported.
Add a cube as a child of your root object and save your scene. Note that the output assets/ folder (see project structure) now contains a new .glb file with the same name as your root GameObject.
You can enable the Smart Export setting (via Edit/Project Settings/Needle ) to only export when a change in this object's hierarchy is detected.
Objects with the EditorOnly tag will be ignored on export including their child hierarchy.
Be aware that this is preferred over disabling objects as disabled will still get exported in case they're turned on later.
If you want to split up your application into multiple levels or scenes then you can simply use the SceneSwitcher component. You can then structure your application into multiple scenes or prefabs and add them to the SceneSwitcher array to be loaded and unloaded at runtime. This is a great way to avoid having to load all your content upfront and to keep loading times small (for example it is what we did on needle.tools by separating each section of your website into its own scene and only loading them when necessary)
The scene complexity here is recommended to ensure good performance across a range of web-capable devices and bandwidths. There's no technical limitation to this beyond the capabilities of your device.
Prefabs can be exported as invidual glTF files and instantiated at runtime. To export a prefab as glTF just reference a prefab asset (from the project browser and not in the scene) from one of your scripts.
Exporting Prefabs works with nesting too: a component in a Prefab can reference another Prefab which will then also be exported.
This mechanism allows for composing scenes to be as lightweight as possible and loading the most important content first and defer loading of additional content.
Similar to Prefab assets, you can reference other Scene assets.
To get started, create a component in Unity with a UnityEditor.SceneAsset field and add it to one of your GameObjects inside a GltfObject. The referenced scene will now be exported as a separate glTF file and can be loaded/deserialized as a AssetReference from TypeScript.
You can keep working inside a referenced scene and still update your main exporter scene/website. On scene save or play mode change we will detect if the current scene is being used by your currently running server and then trigger a re-export for only that glb. (This check is done by name - if a glb inside your <web_project>/assets/ folder exists, it is exported again and the main scene reloads it.)
As an example on our website each section is setup as a separate scene and on export packed into multiple glb files that we load on demand:
If you want to reference and load a prefab from one of your scripts you can declare a AssetReference type.
Here is a minimal example:
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since \`\`instantiate()\`\` does create a copy of the asset after loading it
+ }
+}Needle Engine supports a considerable and powerful subset of Unity's animation features:
Needle Engine is one of the first to support the new glTF extension KHR_ANIMATION_POINTER.
This means that almost all properties, including script variables, are animatable.
One current limitation is that materials won't be duplicated on export โ if you want to animate the same material with different colors, for example, you currently need to split the material in two.
The Unity skybox and custom reflection (if any) are baked into a texture on export and automatically exported inside the NEEDLE_lightmaps extension.
To change the skybox resolution you can add a SkyboxExportSettings component to your scene.
If you don't want to skybox to be exported at all in a glb file you can untick the Embed Skybox option on your GltfObject component
By default, materials are converted into glTF materials on export. glTF supports a physically based material model and has a number of extensions that help to represent complex materials.
For full control over what gets exported, it's highly recommended to use the glTF materials provided by UnityGltf:
These materials are exported as-is, with no conversion necessary. They allow for using advanced material properties such as refractive transmission and iridescence, which can be exported as well.
Materials that can be converted out-of-the-box:
Other materials are converted using a propery name heuristic. That means that depending on what property names your materials and shaders use, you might want to either refactor your custom shader's properties to use the property names of either URP/Lit or PBRGraph, or export the material as Custom Shader.
To export custom shaders (e.g. ShaderGraph shaders), add an ExportShader Asset Label (see bottom of the inspector) to the shader you want to export.
Warning
Please see limitations listed below
Note that Custom Shaders aren't part of the ratified glTF material model. The resulting GLB files will not display correctly in other viewers (the materials will most likely display white).
To export lightmaps simply generate lightmaps in Unity. Lightmaps will be automatically exported.
When working on multiple scenes, disable "Auto Generate" and bake lightmaps explicitly. Otherwise, Unity will discard temporary lightmaps on scene change.
There's no 100% mapping between how Unity handles lights and environment and how three.js handle that. For example, Unity has entirely separate code paths for lightmapped and non-lightmapped objects (lightmapped objects don't receive ambient light since that is already baked into their maps), and three.js doesn't distinguish in that way.
This means that to get best results, we currently recommend specific settings if you're mixing baked and non-baked objects in a scene:
Environment Lighting: Skybox
+Ambient Intensity: 1
+Ambient Color: black2021.3+
2020.3+
If you have no baked objects in your scene, then the following settings should also yield correct results:
Environment Lighting: Color
+Ambient Color: anyOpen Edit/Project Settings/Needle to get the Needle Engine plugin settings. At the top of the window you'll find fields for entering your license information.
Email - Enter the email you purchased the license withInvoice ID - Enter one of the invoice ids that you received by emailOpen Addon Preferences/Needle Engine to get to the Needle Engine addon settings
Email - Enter the email you purchased the license withInvoice ID - Enter one of the invoice ids that you received by emailThis usually happens when you're using custom shaders or materials and their properties don't cleanly translate to known property names for glTF export.
You can either make sure you're using glTF-compatible materials and shaders, or mark shaders as "custom" to export them directly.
You might see a warning in your browser about SSL Security depending on your local configuration.
This is because while the connection is encrypted, by default there's no SSL certificate that the browser can validate. If that happens: click Advanced and Proceed to Site. In Safari, you might need to refresh the page afterwards, because it does not automatically proceed. Now you should see your scene in the browser!
The dialogue should only show up once for the same local server.
',15)),i("div",k,[e[3]||(e[3]=i("p",{class:"hint-container-title"},"Tips",-1)),e[4]||(e[4]=i("p",null,"Connections are secured, because we're enforcing HTTPS to make sure that WebXR and other modern web APIs work out-of-the-box. Some browsers will still complain that the SSL connection (between your local development server and the local website) can't be automatically trusted, and that you need to manually verify you trust that page. Automatic Page Reload and Websocket connections may also be affected depending on the browser and system settings.",-1)),i("p",null,[e[1]||(e[1]=t("See ")),o(s,{to:"/testing.html"},{default:a(()=>e[0]||(e[0]=[t("the Testing docs")])),_:1}),e[2]||(e[2]=t(" for information on how to set up a self-signed certificate for a smoother development experience."))])]),e[15]||(e[15]=n(`If that happens there's usually an exception either in engine code or your code. Open the dev tools (Ctrl + Shift + I or F12 in Chrome) and check the Console for errors.
In some cases, especially when you just updated the Needle Engine package version, this can be fixed by stopping and restarting the local dev server.
For that, click on the running progress bar in the bottom right corner of the Editor, and click the little X to cancel the running task. Then, simply press Play again.
If you are using vite or next.js make sure to add the Needle Engine plugins to your config. Example for vite:
const { needlePlugins } = await import('@needle-tools/engine/plugins/vite/index.js');
+plugins: [needlePlugins(command, needleConfig)]Example for next.js
const { needleNext } = await import("@needle-tools/engine/plugins/next/index.js");
+return needleNext({}, { modules: { webpack } });You can also just declare the missing variables in e.g. your root index.html in a script tag like so:
<script>
+ var NEEDLE_ENGINE_META = {}
+ var NEEDLE_USE_RAPIER = true;
+</script>Please make sure that sure that you have set Lightmap Encoding to Normal Quality.
Go to Edit/Project Settings/Player for changing the setting.
This can have many reasons, but a few common ones are:
EditorOnly to completely ignore them for export.GltfObject components in your scene and they all have EmbedSkybox enabled (you need to have the skybox only once per scene you export)UI/Legacy/Text component and not the TextMeshPro - Text componentEnsure you're following best practices for lightmaps and read about mixing baked and non-baked objects
Make sure that your lights are set to "Baked" or "Realtime". "Mixed" is currently not supported.
Intensity Multiplier factor for Skybox in Lighting/Environment is currently not supported and has no effect in Needle Engine
Also see the docs on mixing baked and non-baked objects.
If you use a custom cubemap: You can override the texture import settings of the skybox texture (assigned to your cubemap)
If you use the default skybox: Add a SkyboxExportSettings component anywhere in your scene to override the default resolution
Please the following points:
Ensure your project is set to Linear colorspace.
WebXR component somewhere inside your root GltfObject.AR Session Root component on your root GltfObject or within the child hierarchy to specify placement, scale and orientation for WebXR.XR Rig component to control where users start in VRWhen creating new scripts in npmdefs in sub-scenes (that is a scene that is exported as a reference from a script in your root export scene) you currently have to re-export the root scene again. This is because the code-gen that is responsible for registering new scripts currently only runs for scenes with a ExportInfo component. This will be fixed in the future.
The most likely reason is an incorrect installation. Check the console and the ExportInfo component for errors or warnings.
If these warnings/errors didn't help, try the following steps in order. Give them some time to complete. Stop once your problem has been resolved. Check the console for warnings and errors.
',27)),i("ul",null,[i("li",null,[e[11]||(e[11]=t("Make sure you follow the ")),o(s,{to:"/getting-started/#prerequisites"},{default:a(()=>e[10]||(e[10]=[t("Prerequisites")])),_:1}),e[12]||(e[12]=t("."))]),e[13]||(e[13]=n("ExportInfo component and clicking InstallExportInfo component, holding Alt and clicking Clean Installnpm install and then npm run dev-hostnode_modules/@needle-tools/engine) as well as three.js (node_modules/three) did install.npm install in both of these directories as well.While generating C# components does technically run with vanilla javascript too we don't recommend it and fully support it since it is more guesswork or simply impossible for the generator to know which C# type to create for your javascript class. Below you find a minimal example on how to generate a Unity Component from javascript if you really want to tho.
class MyScript extends Behaviour
+{
+ //@type float
+ myField = 5;
+}Please check that you're not accidentally in the Inspector's Debug mode โ switch back to Normal:
Make sure to download and install toktx
On Windows: Make sure you have added toktx to your system environment variables. You may need to restart your computer after adding it to refresh the environment variables. The default install location is C:\\Program Files\\KTX-Software\\bin
Make sure your project is on a disk that is known to work with node.js. Main reason for failures is that the disk doesn't support symlinks (symbolic links / softlinks), which is a requirement for proper functioning of node.js.
NTFS formatting should always work. Known problematic file system formattings are exFAT and FAT32.
To check the format of your drives, you can:
msinfo32 in cmd Windows + R)@. Expected identifier, string literal, numeric literal or ..."Needle Engine uses typescript decorators for serialization.
To fix this error make sure to enable experimentalDecorators in your tsconfig.json
You're likely using an x86_64 version of Unity on an (ARM) Apple Silicon processor. Unity 2020.3 is only available for x86_64, later versions also have Apple Silicon versions.
Our Unity integration calling npm will thus do so from an x86_64 process, resulting in the x86_64 version of node and vite/esbuild being used. When you afterwards try to run npm commands in the same project from an Apple Silicon app (e.g. VS Code), npm will complain about mismatching architectures with a long error message.
To fix this, use an Apple Silicon version of Unity (2021.1 or later).
You can also temporarily fix it on 2020.3 by deleting the node_modules folder and running npm install again from VS Code. You'll have to delete node_modules again when you switch back to Unity.
This can happen when you have e.g. a SceneSwitcher (or any other component that loads a scene or asset) and the referenced Asset in Unity contains a GltfObject that has the same name as your original scene with the SceneSwitcher. You can double check this in Unity if you get an error that says something like:
Failed to export โ YourSceneName.glb
+you seem to have objects with the same name referencing each other.To fix this you can:
GltfObject in the referenced Prefab or SceneIf this doesn't fix the problem please ask in our discord.
Please see the circular reference error section.
Use a detector like this one to determine if your device supports WebGL 2, it also hints at what could be the cause of your problem, but generally make sure you have updated your browser and drivers. WebGL 1 is not supported.
Ask in our friendly discord community
Lightmaps can be baked in Unity or Blender to easily add beautiful static light to your 3d content. Lightbaking for the web was never as easy. Just mark objects that you want to lightmap as static in Unity, add one or many lights to your scene (or use emissive materials) and click bake. Needle Engine will export your lightmaps per scene and automatically load and display them just as you see it in the Editor!
Note: There is no technical limitation on which lightmapper to use, as long as they end up in Unity's lightmapping data structures. Third party lightmappers such as Bakery thus are also supported.
Networking is built into the core runtime. Needle Engine deployments to Glitch come with a tiny server that allows you to deploy a multiplayer 3D environment in seconds. The built-in networked components make it easy to get started, and you can create your own synchronized components. Synchronizing variables and state is super easy!
Needle Engine brings powerful animations, state control and sequencing to the web โ from just playing a single animation to orchestrating and blending complex animations and character controllers. The Exporter can translate Unity components like Animator and Timeline into a web-ready format.
We even added this functionality to our Blender addon so you can craft compatible animation state machines and export nla tracks as timelines to the web from within Blender too.
The Animator and AnimatorController components in Unity let you setup animations and define conditions for when and how to blend between them. We support exporting state machines, StateMachineBehaviours, transitions and layers. StateMachineBehaviours are also supported with OnStateEnter, OnStateUpdate and OnStateExit events.
Note: Sub-states and Blend Trees are not supported.
We're also translating Unity's Timeline setup and tracks into a web-ready format.
Supported tracks include: AnimationTrack, AudioTrack, ActivationTrack, ControlTrack, SignalTrack.
Note: Sub-Timelines are currently not supported.
',9)),t("ul",null,[t("li",null,[e[29]||(e[29]=n("Read more about ")),o(l,{to:"/component-reference.html#animation"},{default:r(()=>e[28]||(e[28]=[n("Animation Components")])),_:1})])]),e[68]||(e[68]=t("h2",{id:"physics",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#physics"},[t("span",null,"Physics")])],-1)),e[69]||(e[69]=t("p",null,"Use Rigidbodies, Mesh Colliders, Box Colliders and SphereColliders to add some juicy physics to your world.",-1)),t("ul",null,[t("li",null,[e[31]||(e[31]=n("Read more about ")),o(l,{to:"/component-reference.html#physics"},{default:r(()=>e[30]||(e[30]=[n("Physics Components")])),_:1})])]),o(s,{src:"https://engine.needle.tools/samples-uploads/physics-animation/"}),e[70]||(e[70]=t("h2",{id:"ui",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#ui"},[t("span",null,"UI")])],-1)),e[71]||(e[71]=t("p",null,"Building UI using Unity's UI canvas system is in development. Features currently include exporting Text (including fonts), Images, Buttons.",-1)),t("p",null,[e[33]||(e[33]=n("See the ")),o(l,{to:"/component-reference.html#ui"},{default:r(()=>e[32]||(e[32]=[n("ui component reference")])),_:1}),e[34]||(e[34]=n(" for supported component."))]),o(s,{src:"https://engine.needle.tools/samples-uploads/screenspace-ui"}),e[72]||(e[72]=t("h2",{id:"particles",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#particles"},[t("span",null,"Particles")])],-1)),e[73]||(e[73]=t("p",null,[n("Export of Unity ParticleSystem (Shuriken) is in development. Features currently include world/local space simulation, box and sphere emitter shapes, emission over time as well as burst emission, velocity- and color over time, emission by velocity, texturesheet animation, basic trails."),t("br"),n(" See a "),t("a",{href:"https://engine.needle.tools/samples/particles",target:"_blank",rel:"noopener noreferrer"},"live sample"),n(" of supported features below:")],-1)),o(s,{src:"https://engine.needle.tools/samples-uploads/particles/"}),e[74]||(e[74]=t("h2",{id:"postprocessing",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#postprocessing"},[t("span",null,"PostProcessing")])],-1)),t("p",null,[e[36]||(e[36]=n("Builtin effects include Bloom, Screenspace Ambient Occlusion, Depth of Field, Color Correction. You can also create your own custom effects. See ")),o(l,{to:"/component-reference.html#postprocessing"},{default:r(()=>e[35]||(e[35]=[n("the component reference")])),_:1}),e[37]||(e[37]=n(" for a complete list."))]),o(s,{src:"https://engine.needle.tools/samples-uploads/postprocessing/"}),e[75]||(e[75]=t("h2",{id:"editor-integrations",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#editor-integrations"},[t("span",null,"Editor Integrations")])],-1)),e[76]||(e[76]=t("p",null,[n("Needle Engine comes with powerful integrations into the Unity Editor and Blender."),t("br"),n(" It allows you to setup and export complex scenes in a visual way providing easy and flexible collaboration between artists and developers.")],-1)),e[77]||(e[77]=t("h2",{id:"scripting",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#scripting"},[t("span",null,"Scripting")])],-1)),t("p",null,[e[39]||(e[39]=n("Needle Engine uses as ")),o(l,{to:"/scripting.html#component-architecture"},{default:r(()=>e[38]||(e[38]=[n("component based workflow")])),_:1}),e[40]||(e[40]=n(". Create custom scripts in typescript or javascript. Use our ")),e[41]||(e[41]=t("a",{href:"https://fwd.needle.tools/needle-engine/docs/npmdef",target:"_blank",rel:"noopener noreferrer"},"modular npm-based package workflow",-1)),e[42]||(e[42]=n(" integrated into Unity. A ")),e[43]||(e[43]=t("a",{href:"https://fwd.needle.tools/needle-engine/docs/component-compiler",target:"_blank",rel:"noopener noreferrer"},"typescript to C# component compiler",-1)),e[44]||(e[44]=n(" produces Unity components magically on the fly."))]),e[78]||(e[78]=t("ul",null,[t("li",null,[n("Read more about "),t("a",{href:"scripting"},"Scripting Reference"),n(" โข "),t("a",{href:"https://fwd.needle.tools/needle-engine/docs/npmdef",target:"_blank",rel:"noopener noreferrer"},"Npm Definition Files")])],-1)),e[79]||(e[79]=t("h2",{id:"and-there-is-more",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#and-there-is-more"},[t("span",null,"And there is more")])],-1)),t("ul",null,[e[48]||(e[48]=t("li",null,"PostProcessing โ Bloom, Screenspace Ambient Occlusion, Depth of Field, Color Correction...",-1)),e[49]||(e[49]=t("li",null,"EditorSync โ Live synchronize editing in Unity to the running three.js application for local development",-1)),t("li",null,[e[46]||(e[46]=n("Interactive AR on iOS and Android โ Use our ")),o(l,{to:"/everywhere-actions.html"},{default:r(()=>e[45]||(e[45]=[n("Everywhere Actions")])),_:1}),e[47]||(e[47]=n(" feature set or build your own"))])]),e[80]||(e[80]=t("hr",null,null,-1)),e[81]||(e[81]=t("h1",{id:"where-to-go-next",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#where-to-go-next"},[t("span",null,"Where to go next")])],-1)),t("p",null,[e[51]||(e[51]=n("See our ")),o(l,{to:"/getting-started/"},{default:r(()=>e[50]||(e[50]=[n("Getting Started Guide")])),_:1}),e[52]||(e[52]=n(" to learn about how to download and set up Needle Engine.")),e[53]||(e[53]=t("br",null,null,-1)),e[54]||(e[54]=n(" Learn about ")),e[55]||(e[55]=t("a",{href:"vision"},"our vision",-1)),e[56]||(e[56]=n(" or dive deeper into some of the ")),e[57]||(e[57]=t("a",{href:"technical-overview"},"technical background and glTF",-1)),e[58]||(e[58]=n(" powering it all."))])])}const k=p(g,[["render",b],["__file","features-overview.html.vue"]]),w=JSON.parse('{"path":"/features-overview.html","title":"Feature Overview","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/features overview.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":2,"title":"Shaders and Materials","slug":"shaders-and-materials","link":"#shaders-and-materials","children":[]},{"level":2,"title":"Crossplatform: VR, AR, Mobile, Desktop","slug":"crossplatform-vr-ar-mobile-desktop","link":"#crossplatform-vr-ar-mobile-desktop","children":[]},{"level":2,"title":"Lightmaps","slug":"lightmaps","link":"#lightmaps","children":[]},{"level":2,"title":"Multiplayer and Networking","slug":"multiplayer-and-networking","link":"#multiplayer-and-networking","children":[]},{"level":2,"title":"Animations and Sequencing","slug":"animations-and-sequencing","link":"#animations-and-sequencing","children":[{"level":3,"title":"Animator","slug":"animator","link":"#animator","children":[]},{"level":3,"title":"Timeline","slug":"timeline","link":"#timeline","children":[]}]},{"level":2,"title":"Physics","slug":"physics","link":"#physics","children":[]},{"level":2,"title":"UI","slug":"ui","link":"#ui","children":[]},{"level":2,"title":"Particles","slug":"particles","link":"#particles","children":[]},{"level":2,"title":"PostProcessing","slug":"postprocessing","link":"#postprocessing","children":[]},{"level":2,"title":"Editor Integrations","slug":"editor-integrations","link":"#editor-integrations","children":[]},{"level":2,"title":"Scripting","slug":"scripting","link":"#scripting","children":[]},{"level":2,"title":"And there is more","slug":"and-there-is-more","link":"#and-there-is-more","children":[]}],"git":{"updatedTime":1727125836000},"filePathRelative":"features-overview.md"}');export{k as comp,w as data}; diff --git a/assets/for-unity-developers.html-9HXvx0qv.js b/assets/for-unity-developers.html-9HXvx0qv.js new file mode 100644 index 000000000..2a695bad9 --- /dev/null +++ b/assets/for-unity-developers.html-9HXvx0qv.js @@ -0,0 +1,122 @@ +import{_ as p,r as h,o as r,c as o,e as l,a as s,d as e,b as t,w as n}from"./app-CRZRGfEE.js";const d={},c={class:"hint-container details"};function g(y,i){const a=h("RouteLink"),k=h("video-embed");return r(),o("div",null,[i[41]||(i[41]=l('Note: It's possible to export custom timeline tracks.
Needle Engine provides a tight integration into the Unity Editor. This allows developers and designers alike to work together in a familiar environment and deliver fast, performant and lightweight web-experiences.
The following guide is mainly aimed at developers with a Unity3D background but it may also be useful for developers with a web or three.js background. It covers topics regarding how things are done in Unity vs in three.js or Needle Engine.
If you are all new to Typescript and Javascript and you want to dive into writing scripts for Needle Engine then we also recommend reading the Typescript Essentials Guide for a basic understanding between the differences between C# and Javascript/Typescript.
If you want to code-along you can open engine.needle.tools/new to create a small project that you can edit in the browser โก
Needle Engine is a 3d web engine running on-top of three.js. Three.js is one of the most popular 3D webgl based rendering libraries for the web. Whenever we refer to a gameObject in Needle Engine we are actually also talking about a three.js Object3D, the base type of any object in three.js. Both terms can be used interchangeably. Any gameObject is a Object3D.
This also means that - if you are already familiar with three.js - you will have no problem at all using Needle Engine. Everything you can do with three.js can be done in Needle Engine as well. If you are already using certain libraries then you will be able to also use them in a Needle Engine based environment.
',7)),s("p",null,[i[1]||(i[1]=e("Note: ")),i[2]||(i[2]=s("strong",null,[e("Needle Engine's Exporter does "),s("em",null,"NOT"),e(" compile your existing C# code to Web Assembly")],-1)),i[3]||(i[3]=e(".")),i[4]||(i[4]=s("br",null,null,-1)),i[5]||(i[5]=e(" While using Web Assembly ")),i[6]||(i[6]=s("em",null,"may",-1)),i[7]||(i[7]=e(" result in better performance at runtime, it comes at a high cost for iteration speed and flexibility in building web experiences. Read more about our ")),t(a,{to:"/getting-started/vision.html"},{default:n(()=>i[0]||(i[0]=[e("vision")])),_:1}),i[8]||(i[8]=e(" and ")),i[9]||(i[9]=s("a",{href:"./technical-overview"},"technical overview",-1)),i[10]||(i[10]=e("."))]),s("details",c,[i[11]||(i[11]=s("summary",null,"How to create a new Unity project with Needle Engine? (Video)",-1)),t(k,{src:"https://www.youtube.com/watch?v=gZX_sqrne8U",limit_height:""})]),i[42]||(i[42]=l(`In Unity you create a new component by deriving from MonoBehaviour:
using UnityEngine;
+public class MyComponent : MonoBehaviour {
+}A custom component in Needle Engine on the other hand is written as follows:
import { Behaviour } from "@needle-tools/engine"
+export class MyComponent extends Behaviour {
+}If you have seen some Needle Engine scripts then you might have noticed that some variables are annotated with @serializable above their declaration. This is a Decorator in Typescript and can be used to modify or annotate code. In Needle Engine this is used for example to let the core serialization know which types we expect in our script when it converts from the raw component information stored in the glTF to a Component instance.
Consider the following example:
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Object3D } from "three";
+
+class SomeClass extends Behaviour{
+ @serializable(Behaviour)
+ myOtherComponent?: Behaviour;
+ @serializable(Object3D)
+ someOtherObject?: Object3D;
+}This tells Needle Engine that myOtherComponent should be of type Behaviour. It will then automatically assign the correct reference to the field when your scene is loaded. The same is true for someOtherObject where we want to deserialize to an Object3D reference.
Note that in some cases the type can be ommitted. This can be done for all primitive types in Javascript. These are boolean, number, bigint, string, null and undefined.
import { Behaviour, serializable } from "@needle-tools/engine";
+class SomeClass {
+ @serializable() // < no type is needed here because the field type is a primitive
+ myString?: string;
+}Field without any accessor modified like private, public or protected will by default be public in javascript
import { Behaviour, serializable } from "@needle-tools/engine";
+class SomeClass {
+ /// no accessor means it is public:
+ myNumber?: number;
+ // explicitly making it private:
+ private myPrivateNumber?: number;
+ protected myProtectedNumber?: number;
+}The same is true for methods as well.
To access the current scene from a component you use this.scene which is equivalent to this.context.scene, this gives you the root three.js scene object.
To traverse the hierarchy from a component you can either iterate over the children of an object
with a for loop:
for (let i = 0; i < this.gameObject.children; i++) {
+ console.log(this.gameObject.children[i]);
+}or you can iterate using the foreach equivalent:
for (const child of this.gameObject.children) {
+ console.log(child);
+}You can also use three.js specific methods to quickly iterate all objects recursively using the traverse method:
import { GameObject } from "@needle-tools/engine";
+//---cut-before---
+this.gameObject.traverse((obj: GameObject) => console.log(obj))or to just traverse visible objects use traverseVisible instead.
Another option that is quite useful when you just want to iterate objects being renderable you can query all renderer components and iterate over them like so:
import { Renderer } from "@needle-tools/engine";
+
+for(const renderer of this.gameObject.getComponentsInChildren(Renderer))
+ console.log(renderer);For more information about getting components see the next section.
For getting component you can use the familiar methods similar to Unity. Note that the following uses the Animator type as an example but you can as well use any component type that is either built-in or created by you.
| Method name | Desciption |
|---|---|
this.gameObject.getComponent(Animator) | Get the Animator component on a GameObject/Object3D. It will either return the Animator instance if it has an Animator component or null if the object has no such componnent. |
this.gameObject.getComponentInChildren(Animator) | Get the first Animator component on a GameObject/Object3D or on any of its children |
this.gameObject.getComponentsInParents(Animator) | Get all animator components in the parent hierarchy (including the current GameObject/Object3D) |
These methods are also available on the static GameObject type. For example GameObject.getComponent(this.gameObject, Animator) to get the Animator component on a passed in GameObject/Object3D.
To search the whole scene for one or multiple components you can use GameObject.findObjectOfType(Animator) or GameObject.findObjectsOfType(Animator).
Some Unity-specific types are mapped to different type names in our engine. See the following list:
| Type in Unity | Type in Needle Engine | |
|---|---|---|
UnityEvent | EventList | A UnityEvent will be exported as a EventList type (use serializable(EventList) to deserialize UnityEvents) |
GameObject | Object3D | |
Transform | Object3D | In three.js and Needle Engine a GameObject and a Transform are the same (there is no Transform component). The only exception to that rule is when referencing a RectTransform which is a component in Needle Engine as well. |
Color | RGBAColor | The three.js color type doesnt have a alpha property. Because of that all Color types exported from Unity will be exported as RGBAColor which is a custom Needle Engine type |
Transform data can be accessed on the GameObject / Object3D directly. Unlike to Unity there is no extra transform component that holds this data.
this.gameObject.position is the position in local spacethis.gameObject.rotation is the rotation in euler angles in local spacethis.gameObject.quaternion - is the quaternion in local spacethis.gameObject.scale - is the scale in local spaceThe major difference here to keep in mind is that position in three.js is by default a localspace position whereas in Unity position would be worldspace. The next section will explain how to get the worldspace position in three.js.
In three.js (and thus also in Needle Engine) the object.position, object.rotation, object.scale are all local space coordinates. This is different to Unity where we are used to position being worldspace and using localPosition to deliberately use the local space position.
If you want to access the world coordinates in Needle Engine we have utility methods that you can use with your objects. Call getWorldPosition(yourObject) to calculate the world position. Similar methods exist for rotation/quaternion and scale. To get access to those methods just import them from Needle Engine like so import { getWorldPosition } from "@needle.tools/engine"
Use this.context.time to get access to time data:
this.context.time.time is the time since the application started runningthis.context.time.deltaTime is the time that has passed since the last framethis.context.time.frameCount is the number of frames that have passed since the application startedthis.context.time.realtimeSinceStartup is the unscaled time since the application has started runningIt is also possible to use this.context.time.timeScale to deliberately slow down time for e.g. slow motion effects.
Use this.context.physics.raycast() to perform a raycast and get a list of intersections. If you dont pass in any options the raycast is performed from the mouse position (or first touch position) in screenspace using the currently active mainCamera. You can also pass in a RaycastOptions object that has various settings like maxDistance, the camera to be used or the layers to be tested against.
Use this.context.physics.raycastFromRay(your_ray) to perform a raycast using a three.js ray
Note that the calls above are by default raycasting against visible scene objects. That is different to Unity where you always need colliders to hit objects. The default three.js solution has both pros and cons where one major con is that it can perform quite slow depending on your scene geometry. It may be especially slow when raycasting against skinned meshes. It is therefor recommended to usually set objects with SkinnedMeshRenderers in Unity to the Ignore Raycast layer which will then be ignored by default by Needle Engine as well.
Another option is to use the physics raycast methods which will only return hits with colliders in the scene.
const hit = this.context.physics.engine?.raycast();Here is a editable example for physics raycast
Use this.context.input to poll input state:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ update(){
+ if(this.context.input.getPointerDown(0)){
+ console.log("POINTER DOWN")
+ }
+ }
+}You can also subscribe to events in the InputEvents enum like so:
import { Behaviour, InputEvents, NEPointerEvent } from "@needle-tools/engine";
+
+export class MyScript extends Behaviour
+{
+ onEnable(){
+ this.context.input.addEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+ onDisable() {
+ // it is recommended to also unsubscribe from events when your component becomes inactive
+ this.context.input.removeEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+
+ inputPointerDown = (evt: NEPointerEvent) => { console.log(evt); }
+}If you want to handle inputs yourself you can also subscribe to all events the browser provides (there are a ton). For example to subscribe to the browsers click event you can write:
window.addEventListener("click", () => { console.log("MOUSE CLICK"); });Note that in this case you have to handle all cases yourself. For example you may need to use different events if your user is visiting your website on desktop vs mobile vs a VR device. These cases are automatically handled by the Needle Engine input events (e.g. PointerDown is raised both for mouse down, touch down and in case of VR on controller button down).
Similar to Unity (see IPointerClickHandler in Unity) you can also register to receive input events on the component itself.
To make this work make sure your object has a ObjectRaycaster or GraphicRaycaster component in the parent hierarchy.
import { Behaviour, IPointerEventHandler, PointerEventData } from "@needle-tools/engine";
+
+export class ReceiveClickEvent extends Behaviour implements IPointerEventHandler {
+ onPointerClick(args: PointerEventData) {
+ console.log("Click", args);
+ }
+}Note: IPointerEventHandler subscribes the object to all possible pointer events. The handlers for them are:
onPointerDownonPointerUponPointerEnteronPointerMoveonPointerExitonPointerClickAll have a PointerEventData argument describing the event.
The Debug.Log() equivalent in javascript is console.log(). You can also use console.warn() or console.error().
import { GameObject, Renderer } from "@needle-tools/engine";
+const someVariable = 42;
+// ---cut-before---
+
+console.log("Hello web");
+// You can pass in as many arguments as you want like so:
+console.log("Hello", someVariable, GameObject.findObjectOfType(Renderer), this.context);In Unity you normally have to use special methods to draw Gizmos like OnDrawGizmos or OnDrawGizmosSelected. In Needle Engine on the other hand such methods dont exist and you are free to draw gizmos from anywhere in your script. Note that it is also your responsibility then to not draw them in e.g. your deployed web application (you can just filter them by if(isDevEnvironment))).
Here is an example to draw a red wire sphere for one second for e.g. visualizing a point in worldspace
import { Vector3 } from "three";
+const hit = { point: new Vector3(0, 0, 0) };
+// ---cut-before---
+import { Gizmos } from "@needle-tools/engine";
+Gizmos.DrawWireSphere(hit.point, 0.05, 0xff0000, 1);Here are some of the available gizmo methods:
| Method name | |
|---|---|
Gizmos.DrawArrow | |
Gizmos.DrawBox | |
Gizmos.DrawBox3 | |
Gizmos.DrawDirection | |
Gizmos.DrawLine | |
Gizmos.DrawRay | |
Gizmos.DrawRay | |
Gizmos.DrawSphere | |
Gizmos.DrawWireSphere |
Import from @needle-tools/engine e.g. import { getParam } from "@needle-tools/engine"
| Method name | Description |
|---|---|
getParam() | Checks if a url parameter exists. Returns true if it exists but has no value (e.g. ?help), false if it is not found in the url or is set to 0 (e.g. ?help=0), otherwise it returns the value (e.g. ?message=test) |
isMobileDevice() | Returns true if the app is accessed from a mobile device |
isDevEnvironment() | Returns true if the current app is running on a local server |
isMozillaXR() | |
isiOS | |
isSafari |
import { isMobileDevice } from "@needle-tools/engine"
+if( isMobileDevice() )import { getParam } from "@needle-tools/engine"
+// returns true
+const myFlag = getParam("some_flag")
+console.log(myFlag)In C# you usually work with a solution containing one or many projects. In Unity this solution is managed by Unity for you and when you open a C# script it opens the project and shows you the file.
You usually install Packages using Unity's built-in package manager to add features provided by either Unity or other developers (either on your team or e.g. via Unity's AssetStore). Unity does a great job of making adding and managing packages easy with their PackageManager and you might never have had to manually edit a file like the manifest.json (this is what Unity uses to track which packages are installed) or run a command from the command line to install a package.
In a web environment you use npm - the Node Package Manager - to manage dependencies / packages for you. It does basically the same to what Unity's PackageManager does - it installs (downloads) packages from some server (you hear it usually called a registry in that context) and puts them inside a folder named node_modules.
When working with a web project most of you dependencies are installed from npmjs.com. It is the most popular package registry out there for web projects.
Here is an example of how a package.json might look like:
{
+ "name": "@optional_org/package_name",
+ "version": "1.0.0",
+ "scripts": {
+ "start": "vite --host"
+ },
+ "dependencies": {
+ "@needle-tools/engine": "^3.5.9-beta",
+ "three": "npm:@needle-tools/three@0.146.8"
+ },
+ "devDependencies": {
+ "@types/three": "0.146.0",
+ "@vitejs/plugin-basic-ssl": "^1.0.1",
+ "typescript": "^5.0.4",
+ "vite": "^4.3.4",
+ "vite-plugin-compression": "^0.5.1"
+ }
+}Our default template uses Vite as its bundler and has no frontend framework pre-installed. Needle Engine is unoppionated about which framework to use so you are free to work with whatever framework you like. We have samples for popular frameworks like Vue.js, Svelte, Next.js, React or React Three Fiber.
To install a dependency from npm you can open your web project in a commandline (or terminal) and run npm i <the/package_name> (shorthand for npm install)
For example run npm i @needle-tools/engine to install Needle Engine. This will then add the package to your package.json to the dependencies array.
To install a package as a devDependency only you can run npm i --save-dev <package_name>. More about the difference between dependencies and devDependencies below.
You may have noticed that there are two entries containing dependency - dependencies and devDependencies.
dependencies are always installed (or bundled) when either your web project is installed or in cases where you develop a library and your package is installed as a dependency of another project.
devDependencies are only installed when developing the project (meaning that when you directly run install in the specific directory) and they are otherwise not included in your project.
The Installing section taught us that you can install dependencies by running npm i <package_name> in your project directory where the package_name can be any package that you find on npm.js.
Let's assume you want to add a tweening library to your project. We will use @tweenjs/tween.js for this example. Here is the final project if you want to jump ahead and just see the result.
First run npm install @tweenjs/tween.js in the terminal and wait for the installation to finish. This will add a new entry to our package.json:
"dependencies": {
+ "@needle-tools/engine": "^3.5.11-beta",
+ "@tweenjs/tween.js": "^20.0.3",
+ "three": "npm:@needle-tools/three@0.146.8"
+}Then open one of your script files in which you want to use tweening and import at the top of the file:
import * as TWEEN from '@tweenjs/tween.js';Note that we do here import all types in the library by writing * as TWEEN. We could also just import specific types like import { Tween } from @tweenjs/tween.js.
Now we can use it in our script. It is always recommended to refer to the documentation of the library that you want to use. In the case of tween.js they provide a user guide that we can follow. Usually the Readme page of the package on npm contains information on how to install and use the package.
To rotate a cube we create a new component type called TweenRotation, we then go ahead and create our tween instance for the object rotation, how often it should repeat, which easing to use, the tween we want to perform and then we start it. We then only have to call update every frame to update the tween animation. The final script looks like this:
import { Behaviour } from "@needle-tools/engine";
+import * as TWEEN from '@tweenjs/tween.js';
+
+export class TweenRotation extends Behaviour {
+
+ // save the instance of our tweener
+ private _tween?: TWEEN.Tween<any>;
+
+ start() {
+ const rotation = this.gameObject.rotation;
+ // create the tween instance
+ this._tween = new TWEEN.Tween(rotation);
+ // set it to repeat forever
+ this._tween.repeat(Infinity);
+ // set the easing to use
+ this._tween.easing(TWEEN.Easing.Quintic.InOut);
+ // set the values to tween
+ this._tween.to({ y: Math.PI * 0.5 }, 1000);
+ // start it
+ this._tween.start();
+ }
+
+ update() {
+ // update the tweening every frame
+ // the '?' is a shorthand for checking if _tween has been created
+ this._tween?.update();
+ }
+}Now we only have to add it to any of the objects in our scene to rotate them forever.
You can see the final script in action here.
Needle Engine is build as a web component.
This means just install @needle-tools/engine in your project and include <needle-engine src="path/to/your.glb"> anywhere in your web-project.
npm i @needle-tools/engineWith our default Vite based project template Needle Engine gets bundled into a web app on deployment. This ensures smaller files, tree-shaking (similar to code stripping in Unity) and optimizes load times. Instead of downloading numerous small scripts and components, only one or a few are downloaded that contain the minimal code needed.
Vite (our default bundler) has a good explanation why web apps should be bundled: Why Bundle for Production
Needle Engine is unoponiated about the choice of framework. Our default template uses the popular vite as bundler. From there, you can add vue, svelte, nuxt, react, react-three-fiber or other frameworks, and we have samples for a lot of them. You can also integrate other bundlers, or use none at all โ just plain HTML and Javascript.
Here's some example tech stacks that are possible and that we use Needle Engine with:
',8)),i("ul",null,[e[3]||(e[3]=l('Vite + HTML โ This is what our default template uses!
Vite + Vue โ This is what the Needle Tools website uses!. Find a sample to download here.
Vite + Svelte
Vite + SvelteKit
Vite + React โ There's an experimental template shipped with the Unity integration for this that you can pick when generating a project!
react-three-fiber โ There's an experimental template shipped with the Unity integration for this that you can pick when generating a project!
Vercel & Nextjs โ Find a example nextjs project here
You can create and share your own web project templates to use other bundlers, build systems, or none at all.
Create a new Template
Create/Needle Engine/Project Template to add a ProjectTemplate into the folder you want to use as a templateThe dependencies come from unity when there is a NpmDef in the project (so when your project uses local references).
You could also publish your packages to npm and reference them via version number.
Tree shaking refers to a common practice when it comes to bundling of web applications (see MSDN docs). It means that code paths and features that are not used in your code will be removed from the final bundled javascript file(s) to reduce filesize. See below about features that Needle Engine includes and remove them:
Option 1: via needlePlugins config:
Set useRapier to false in your vite.config: needlePlugins(command, needleConfig, { useRapier: false }),
Option 2: via vite.define config:
Declare the NEEDLE_USE_RAPIER define with false
define: {
+ NEEDLE_USE_RAPIER: false
+},Option 3: via .env
Create a .env file in your web project and add VITE_NEEDLE_USE_RAPIER=false
Option 4: via Unity component
Add the Needle Engine Modules component to your scene and set Physics Engine to None
We support easily creating a Progressive Web App (PWA) directly from our vite template.
PWAs are web applications that load like regular web pages or websites but can offer user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.
By default, PWAs created with Needle have offline support, and can optionally refresh automatically when you publish a new version of your app.
npm install vite-plugin-pwa --save-devvite.config.js as seen below. Make sure to pass the same pwaOptions object to both needlePlugins and VitePWA.import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig(async ({ command }) => {
+
+ // Create the pwaOptions object.
+ // You can edit or enter PWA settings here (e.g. change the PWA name or add icons).
+ /** @type {import("vite-plugin-pwa").VitePWAOptions} */
+ const pwaOptions = {};
+
+ const { needlePlugins } = await import("@needle-tools/engine/plugins/vite/index.js");
+
+ return {
+ plugins: [
+ // pass the pwaOptions object to the needlePlugins and the VitePWA function
+ needlePlugins(command, needleConfig, { pwa: pwaOptions }),
+ VitePWA(pwaOptions),
+ ],
+ // the rest of your vite config...All assets are cached by default
Note that by default, all assets in your build folder are added the PWA precache โ for large applications with many dynamic assets, this may not be what you want (imagine the YouTube PWA caching all videos once a user opens the app!). See More PWA Options for how to customize this behavior.
To test your PWA, deploy the page, for example using the DeployToFTP component.
Then, open the deployed page in a browser and check if the PWA features work as expected:
PWAs use Service Workers to cache resources and provide offline support. Service Workers are somewhat harder to use during development, and typically are only enabled for builds (e.g. when you use a DeployTo... component).
You can enable PWA support for development by adding the following to the options object in your vite.config.js.
const pwaOptions = {
+ // Note: PWAs behave different in dev mode.
+ // Make sure to verify the behaviour in production builds!
+ devOptions: {
+ enabled: true,
+ }
+};Please note that PWAs in development mode do not support offline usage โ trying it may result in unexpected behavior.
Websites typically show new or updated content on page refresh.
In some situations, you may want the page to refresh and reload automatically when a new version has been published โ such as in a museum, trade show, public display, or other long-running scenarios.
To enable automatic updates, set the updateInterval property in the pwaOptions object to a duration (in milliseconds) in which the app should check for updates. If an update is detected, the page will reload automatically.
const pwaOptions = {
+ updateInterval: 15 * 60 * 1000, // 15 minutes, in milliseconds
+};Periodic Reloads and User Data
It's not recommended to use automatic reloads in applications where users are interacting with forms or other data that could be lost on a reload. For these applications, showing a reload prompt is recommended.
See the Vite PWA plugin documentation for more information on how to implement a reload prompt instead of automatic reloading.
Since Needle uses the Vite PWA plugin under the hood, you can use all options and hooks provided by that.
For example, you can provide a partial manifest with a custom app title or theme color:
const pwaOptions = {
+ // manifest options provided here will override the defaults
+ manifest: {
+ name: "My App",
+ short_name: "My App",
+ theme_color: "#B2D464",
+ }
+};For complex requirements like partial caching, custom service workers or different update strategies, you can remove the { pwa: pwaOptions } option from needlePlugins and add PWA functionality directly through the Vite PWA plugin.
The needle-engine loading appearance can use a light or dark skin.
To change the appearance use the loading-style attribute on the <needle-engine> web component.
Options are light and dark (default):
<needle-engine loading-style="light"></needle-engine>
In Blender, go to File > Settings > Add-ons and click the Install button.
Select the downloaded zip file (named needle-blender-plugin-*.zip) to install it.
Search for "Needle" in the Add-ons search bar and make sure `Needle Engine.
Thank you for using Needle Engine for Blender.
With this add-on you can create highly interactive and optimized WebGL and WebXR experiences inside Blender, that run using Needle Engine and three.js.
You'll be able to sequence animations, easily lightmap your scenes, add interactivity or create your own scripts written in Typescript or Javascript that run on the web.
',6)),t(n,{src:"/docs/blender/environment-light.mp4"}),i[20]||(i[20]=a('Matching lighting and environment settings between Blender and Needle Engine. HDRI environment lights are automatically exported, directly from Blender. Once you save, the page is automatically reloaded.
Providing Feedback
Your feedback is invaluable when it comes to deciding which features and workflows we should prioritize. If you have feedback for us (good or bad), please let us know in the forum!
First create or open a new blend file that you want to be exported to the web.
Open the Properties window open the scene category. Select a Project Path in the Needle Engine panel. Then click Generate Project. It will automatically install and start the server - once it has finished your browser should open and the threejs scene will load.
By default your scene will automatically re-exported when you save the blend file.
If the local server is running (e.g. by clicking Run Project) the website will automatically refresh with your changed model.
When your web project already exists and you just want to continue working on the website
click the blue Run Project button to start the local server:
Run Project button shows up when the Project path shows to a valid web project. A web project is valid when it contains a package.jsonDirectory open the directory of your web project (the Project Path)Code Editor tries to open the vscode workspace in your web projectBuild: Development or Build: Production buttons when you want to upload your web project to a server. This will bundle your web project and produce the files that you can upload. When clicking Build: Production it will also apply optimization to your textures (they will be compressed for the web)By default the blender viewport is set to Filmic - with this setting your colors in Blender and in three.js will not match. To fix this go to the Blender Render category and in the ColorManagement panel select View Transform: Standard
You can change the environment lighting and skybox using the Viewport shading options.
Assign a cubemap to use for lighting or the background skybox. You can adjust the strength or blur to modify the appearance to your liking.
Note: To also see the skybox cubemap in the browser increase the World Opacity to 1.
Note: Alternatively you can enable the Scene World setting in the Viewport Shading tab to use the environment texture assigned in the blender world settings.
To exclude an object from being exported you can disable the Viewport and the Render display (see image below)
For simple usecases you can use the Animation component for playback of one or multiple animationclips.
Just select your object, add an Animation component and assign the clip (you can add additional clips to be exported to the clips array.
By default it will only playback the first clip assigned when playAutomatically is enabled. You can trigger the other clips using a simple custom typescript component)
Creating a new animator-controller asset โ or select one from your previously created assets
Shift+A to create a new AnimatorStateParameters node will be created once you add a first node. Select it to setup parameters to be used in transitions (via the Node panel on the right border)Set default state button in the Node/Properties panel)Conditions array to select parameters that must match the condition for doing the transition.To use an AnimatorController add an Animator component to the root object of your animations and select the AnimatorController asset that you want to use for this object.
You can set the Animator parameters from typescript or by e.g. using the event of a Button component
You can export Blender NLA tracks directly to the web.
Add a PlayableDirector component (via Add Component) to a any blender object. Assign the objects in the animation tracks list in the component for which you want the NLA tracks to be exported.
Add this script to src/scripts (see custom components section) and add it to any object in Blender to make a timeline's time be controlled by scrolling in the browsers
import { Behaviour, PlayableDirector, serializable, Mathf } from "@needle-tools/engine";
+
+export class ScrollTimeline extends Behaviour {
+
+ @serializable(PlayableDirector)
+ timeline?: PlayableDirector;
+
+ @serializable()
+ sensitivity: number = .5;
+
+ @serializable()
+ clamp: boolean = false;
+
+ private _targetTime: number = 0;
+
+ awake() {
+ this.context.domElement.addEventListener("wheel", this.onWheel);
+ if (this.timeline) this.timeline.pause();
+ }
+
+ private onWheel = (e: WheelEvent) => {
+ if (this.timeline) {
+ this._targetTime = this.timeline.time + e.deltaY * 0.01 * this.sensitivity;
+ if (this.clamp) this._targetTime = Mathf.clamp(this._targetTime, 0, this.timeline.duration);
+ }
+ }
+
+ update(): void {
+ if (!this.timeline) return;
+ const time = Mathf.lerp(this.timeline.time, this._targetTime, this.context.time.deltaTime / .3);
+ this.timeline.time = time;
+ this.timeline.pause();
+ this.timeline.evaluate();
+ }
+}You can add or remove components to objects in your hierarchy using the Needle Components panel:
For example by adding an OrbitControls component to the camera object
you get basic camera controls for mobile and desktop devicesAdjust settings for each component in their respective panels
Components can be removed using the X button in the lower right:
Custom components can also be easily added by simply writing Typescript classes. They will automatically compile and show up in Blender when saved.
To create custom components open the workspace via the Needle Project panel and add a .ts script file in src/scripts inside your web project. Please refer to the scripting documentation to learn how to write custom components for Needle Engine.
Note
Make sure @needle-tools/needle-component-compiler 2.x is installed in your web project (package.json devDependencies)
Needle includes a lightmapping plugin that makes it very easy to bake beautiful lights to textures and bring them to the web. The plugin will automatically generate lightmap UVs for all models marked to be lightmapped, there is no need to make a manual texture atlas. It also supports lightmapping of multiple instances with their own lightmap data. For lightmapping to work, you need at least one light and one object with Lightmapped turned on in the Needle Object panel.
Tips
You can download the .blend file from the video here.
Use the Needle Object panel to enable lightmapping for a mesh object or light:
For quick access to lightmap settings and baking options you can use the scene view panel in the Needle tab:
Alternatively you can also use the Lightmapping panel in the Render Properties tab:
Experimental Feature
The lightmapping plugin is experimental. We recommend creating a backup of your .blend file when using it. Please report problems or errors you encounter in our forum ๐
The lightbulb in the Needle Project panel informs you when a new version of the addon is available.
Simply click the icon to download the new version.
If you run into any problems we're more than happy to help! Please join our discord for fast support.
Please also check the logs in Blender. You can find logs specific to the Needle Engine Addon via Help/Needle in Blender.
You can also automatically create and upload a bugreport directly from Blender. Uploaded bugreports will solely be used for debugging. They are encrypted on our backend and will be deleted after 30 days.
If needed, in certain cases we're also able to set up custom NDAs for your projects. Please contact us for more information.
Using the Bug Reporter requires a web project
Make sure you've set up a web project before sending a bug report โ it will allow us to understand more about your system and setup and make it easier to reproduce the issue.
Needle Engine is a web engine for complex and simple 3D applications alike. Work on your machine and deploy anywhere. Needle Engine is flexible, extensible and has built-in support for collaboration and XR. It is built around the glTF standard for 3D assets.
Powerful integrations for Unity and Blender allow artists and developers to collaborate and manage web applications inside battle-tested 3d editors. These Integrations allow you to use editor features for creating models, authoring materials, animating and sequencing animations, baking lightmaps and more with ease.
Our powerful compression and optimization pipeline for the web make sure your files are ready, small and load fast.
',4)),n(r,null,{default:i(()=>t[0]||(t[0]=[e("div",null,[o("Unbelievable Unity editor integration by an order of magnitude,"),e("br"),o("and as straightforward as the docs claim. Wow. โ Chris Mahoney")],-1),e("div",null,"This is the best thing I have seen after cinemachine in Unity โ Rinesh Thomas",-1),e("div",null,[o("Spent the last 2.5 months building this game, never built a game or used Unity before"),e("br"),o("but absolutely loving the whole process. So rapid! โ Matthew Pieri")],-1),e("div",null,[e("a",{href:"https://needle.tools?utm_source=needle_docs&utm_content=quote"},"needle.tools"),o(" is a wonderful showcase of what Needle contributes to 3D via the web. I just love it. โ Kevin Curry")],-1),e("div",null,"Played with this a bit this morning ๐คฏ๐คฏ pretty magical โ Brit Gardner",-1),e("div",null,"This is huge for WebXR and shared, immersive 3D experiences! The AR part worked flawlessly on my Samsung S21. โ Marc Wakefield",-1),e("div",null,"This is amazing and if you are curious about WebXR with Unity this will help us get there โ Dilmer Valecillos",-1),e("div",null,"We just gotta say WOW ๐คฉ โ Unity for Digital Twins",-1)])),_:1}),n(l,null,{default:i(()=>[n(s,{href:"getting-started/"},{default:i(()=>t[1]||(t[1]=[o(" Get started โญ ")])),_:1}),n(s,{href:"features-overview"},{default:i(()=>t[2]||(t[2]=[o(" Features ๐จ ")])),_:1}),n(s,{href:"https://engine.needle.tools/samples?utm_source=needle_docs&utm_content=actionbutton"},{default:i(()=>t[3]||(t[3]=[o(" Samples ๐ ")])),_:1}),n(s,{subtitle:"with AI support",href:"https://forum.needle.tools?utm_source=needle_docs&utm_content=actionbutton"},{default:i(()=>t[4]||(t[4]=[o(" Get Help ๐ฌ ")])),_:1})]),_:1}),t[7]||(t[7]=e("br",null,null,-1)),t[8]||(t[8]=e("br",null,null,-1)),n(l,null,{default:i(()=>t[5]||(t[5]=[e("p",null,[e("a",{class:"no-external-link-icon",href:"https://www.npmjs.com/package/@needle-tools/engine"},[e("img",{src:"https://img.shields.io/npm/v/@needle-tools/engine?style=flat&colorA=ddd&colorB=ddd"})])],-1),e("p",null,[e("a",{class:"no-external-link-icon",href:"https://engine.needle.tools/docs/getting-started/"},[e("img",{src:"https://img.shields.io/npm/dt/@needle-tools/engine.svg?style=flat&colorA=ddd&colorB=ddd"})])],-1),e("p",null,[e("a",{class:"no-external-link-icon",href:"https://discord.needle.tools"},[e("img",{src:"https://img.shields.io/discord/717429793926283276?style=flat&colorA=ddd&colorB=ddd&label=discord&logo=discord&logoColor=ffffff"})])],-1)])),_:1}),t[9]||(t[9]=e("p",null,null,-1)),n(d),n(p,null,{default:i(()=>[n(u)]),_:1})])}const k=g(b,[["render",w],["__file","index.html.vue"]]),x=JSON.parse('{"path":"/","title":"","lang":"en-US","frontmatter":{"next":"./getting-started/index.md","sidebar":false,"editLink":false,"lastUpdated":false,"footer":"Copyright ยฉ 2024 Needle Tools GmbH","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/needle engine.png"}],["meta",{"name":"og:description","content":"---\\nNeedle Engine is a web engine for complex and simple 3D applications alike. Work on your machine and deploy anywhere. Needle Engine is flexible, extensible and has built-in support for collaboration and XR. It is built around the glTF standard for 3D assets.\\nPowerful integrations for Unity and Blender allow artists and developers to collaborate and manage web applications inside battle-tested 3d editors. These Integrations allow you to use editor features for creating models, authoring materials, animating and sequencing animations, baking lightmaps and more with ease.\\nOur powerful compression and optimization pipeline for the web make sure your files are ready, small and load fast."}]],"description":"---\\nNeedle Engine is a web engine for complex and simple 3D applications alike. Work on your machine and deploy anywhere. Needle Engine is flexible, extensible and has built-in support for collaboration and XR. It is built around the glTF standard for 3D assets.\\nPowerful integrations for Unity and Blender allow artists and developers to collaborate and manage web applications inside battle-tested 3d editors. These Integrations allow you to use editor features for creating models, authoring materials, animating and sequencing animations, baking lightmaps and more with ease.\\nOur powerful compression and optimization pipeline for the web make sure your files are ready, small and load fast."},"headers":[],"git":{"updatedTime":1727191885000},"filePathRelative":"index.md"}');export{k as comp,x as data}; diff --git a/assets/index.html-DyXM_9kx.js b/assets/index.html-DyXM_9kx.js new file mode 100644 index 000000000..e426b9b21 --- /dev/null +++ b/assets/index.html-DyXM_9kx.js @@ -0,0 +1 @@ +import{_ as u,r as s,o as p,c as g,a as t,d as o,b as n,e as m,w as l}from"./app-CRZRGfEE.js";const f={};function y(b,e){const d=s("tool-tiles"),r=s("os-link"),i=s("RouteLink"),a=s("ClientOnly");return p(),g("div",null,[e[30]||(e[30]=t("br",null,null,-1)),e[31]||(e[31]=t("h1",{id:"downloads",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#downloads"},[t("span",null,"Downloads")])],-1)),e[32]||(e[32]=t("p",null,[o("With "),t("strong",null,"Needle Engine"),o(", you can create fully interactive 3D websites. They can be deployed anywhere on the web and get optimized automatically by the "),t("strong",null,"Needle Engine Build Pipeline"),o(" reducing asset size by up x100 without compromising quality.")],-1)),e[33]||(e[33]=t("p",null,"Needle Engine is available as a package for Unity, add-on for Blender, as a ready-to-go Web Component, and as npm package for projects without an editor integration. Each of these comes with the same components and building blocks โ the choice is yours.",-1)),e[34]||(e[34]=t("h2",{id:"choose-your-workflow",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#choose-your-workflow"},[t("span",null,"Choose your Workflow")])],-1)),n(d),e[35]||(e[35]=m('Needle Engine makes it easy to build web apps. That often, but not always, includes coding with JavaScript/TypeScript or writing HTML and CSS to describe user interfacces. We recommend Visual Studio Code for creating and editing these files. It's a free, open-source code editor that runs on Windows, macOS, and Linux.
',5)),n(a,null,{default:l(()=>[n(r,{windows_url:"https://code.visualstudio.com/sha/download?build=stable&os=win32-x64-user",osx_url:"https://code.visualstudio.com/sha/download?build=stable&os=darwin-universal"},{default:l(()=>e[0]||(e[0]=[o("Download Visual Studio Code")])),_:1}),e[7]||(e[7]=t("br",null,null,-1)),e[8]||(e[8]=t("br",null,null,-1)),e[9]||(e[9]=t("h3",{id:"other-useful-tools",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#other-useful-tools"},[t("span",null,"Other useful tools")])],-1)),e[10]||(e[10]=t("div",{class:"hint-container tip"},[t("p",{class:"hint-container-title"},"Tips"),t("p",null,"Needle Engine uses the following tools to create your web app, but you don't need to manually install them when using the Unity or Blender integration. We'll guide you through the installation process after you've installed the Needle integration.")],-1)),e[11]||(e[11]=t("br",null,null,-1)),n(r,{windows_url:"https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi",osx_url:"https://nodejs.org/dist/v20.9.0/node-v20.9.0.pkg"},{default:l(()=>e[1]||(e[1]=[o("Node.js 18 LTS or 20 LTS.")])),_:1}),e[12]||(e[12]=o(" Needle Engine uses Node.js to manage, preview and build the web app that you are creating locally on your computer. It is also used for uploading (deploying) your website to the internet. ")),t("p",null,[e[4]||(e[4]=t("br",null,null,-1)),n(r,{windows_url:"https://fwd.needle.tools/needle-engine/toktx/win",osx_url:"https://fwd.needle.tools/needle-engine/toktx/osx",osx_silicon_url:"https://fwd.needle.tools/needle-engine/toktx/osx-silicon"},{default:l(()=>e[2]||(e[2]=[o("KTX Software โ toktx texture tools.")])),_:1}),e[5]||(e[5]=o(" We use toktx by the Khronos Group to locally optimize and compress your 3D files. Learn more about production builds ")),n(i,{to:"/deployment.html#production-builds"},{default:l(()=>e[3]||(e[3]=[o("in the docs")])),_:1}),e[6]||(e[6]=o("."))]),e[13]||(e[13]=t("br",null,null,-1))]),_:1}),e[36]||(e[36]=t("h2",{id:"next-steps",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#next-steps"},[t("span",null,"Next Steps")])],-1)),e[37]||(e[37]=t("p",null,"Now that you've installed Needle Engine, you're ready to dive deeper into project creation, component workflows, scripting, deployment and more.",-1)),t("ul",null,[e[20]||(e[20]=t("li",null,[t("a",{href:"https://engine.needle.tools/samples",target:"_blank",rel:"noopener noreferrer"},"Needle Engine Samples")],-1)),t("li",null,[n(i,{to:"/export.html"},{default:l(()=>e[14]||(e[14]=[o("Exporting 3D objects and content")])),_:1})]),t("li",null,[n(i,{to:"/project-structure.html"},{default:l(()=>e[15]||(e[15]=[o("Project Structure")])),_:1})]),t("li",null,[n(i,{to:"/deployment.html"},{default:l(()=>e[16]||(e[16]=[o("Deploy your website to the web")])),_:1})]),t("li",null,[n(i,{to:"/getting-started/typescript-essentials.html"},{default:l(()=>e[17]||(e[17]=[o("Typescript Essentials")])),_:1})]),t("li",null,[n(i,{to:"/getting-started/for-unity-developers.html"},{default:l(()=>e[18]||(e[18]=[o("Needle Engine for Unity Developers")])),_:1})]),t("li",null,[n(i,{to:"/scripting.html"},{default:l(()=>e[19]||(e[19]=[o("Scripting Reference")])),_:1})])]),t("p",null,[e[22]||(e[22]=o("In case you need troubleshooting help, please see the ")),n(i,{to:"/faq.html"},{default:l(()=>e[21]||(e[21]=[o("Questions and Answers โ FAQ")])),_:1}),e[23]||(e[23]=o(" section.")),e[24]||(e[24]=t("br",null,null,-1)),e[25]||(e[25]=o(" We welcome you to join our ")),e[26]||(e[26]=t("a",{href:"https://forum.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Forum",-1)),e[27]||(e[27]=o(" and ")),e[28]||(e[28]=t("a",{href:"https://discord.needle.tools",target:"_blank",rel:"noopener noreferrer"},"Discord Community",-1)),e[29]||(e[29]=o("."))])])}const h=u(f,[["render",y],["__file","index.html.vue"]]),x=JSON.parse('{"path":"/getting-started/","title":"Getting Started & Installation","lang":"en-US","frontmatter":{"lang":"en-US","title":"Getting Started & Installation","next":"../project-structure.md","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/getting started & installation.png"}],["meta",{"name":"og:description","content":"---\\nWith Needle Engine, you can create fully interactive 3D websites.\\nThey can be deployed anywhere on the web and get optimized automatically by the Needle Engine Build Pipeline reducing asset size by up x100 without compromising quality.\\nNeedle Engine is available as a package for Unity, add-on for Blender, as a ready-to-go Web Component, and as npm package for projects without an editor integration. Each of these comes with the same components and building blocks โ the choice is yours."}]],"description":"---\\nWith Needle Engine, you can create fully interactive 3D websites.\\nThey can be deployed anywhere on the web and get optimized automatically by the Needle Engine Build Pipeline reducing asset size by up x100 without compromising quality.\\nNeedle Engine is available as a package for Unity, add-on for Blender, as a ready-to-go Web Component, and as npm package for projects without an editor integration. Each of these comes with the same components and building blocks โ the choice is yours."},"headers":[{"level":2,"title":"Choose your Workflow","slug":"choose-your-workflow","link":"#choose-your-workflow","children":[]},{"level":2,"title":"Code Editor and Tools","slug":"code-editor-and-tools","link":"#code-editor-and-tools","children":[{"level":3,"title":"Install a code editor","slug":"install-a-code-editor","link":"#install-a-code-editor","children":[]},{"level":3,"title":"Other useful tools","slug":"other-useful-tools","link":"#other-useful-tools","children":[]}]},{"level":2,"title":"Next Steps","slug":"next-steps","link":"#next-steps","children":[]}],"git":{"updatedTime":1727189596000},"filePathRelative":"getting-started/index.md"}');export{h as comp,x as data}; diff --git a/assets/index.html-Msujlet7.js b/assets/index.html-Msujlet7.js new file mode 100644 index 000000000..2e162fd40 --- /dev/null +++ b/assets/index.html-Msujlet7.js @@ -0,0 +1 @@ +import{_ as n,o,c as a,a as t}from"./app-CRZRGfEE.js";const i={};function s(r,e){return o(),a("div",null,e[0]||(e[0]=[t("h1",{id:"integrate-with-other-tools",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#integrate-with-other-tools"},[t("span",null,"Integrate with other tools")])],-1),t("div",{class:"hint-container warning"},[t("p",{class:"hint-container-title"},"This page is under construction.")],-1)]))}const l=n(i,[["render",s],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/custom-integrations/","title":"Integrate with other tools","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/custom integrations.png"}],["meta",{"name":"og:description","content":":"}]],"description":":"},"headers":[],"git":{"updatedTime":1727182460000},"filePathRelative":"custom-integrations/index.md"}');export{l as comp,d as data}; diff --git a/assets/index.html-_acHVPU1.js b/assets/index.html-_acHVPU1.js new file mode 100644 index 000000000..af7d05e72 --- /dev/null +++ b/assets/index.html-_acHVPU1.js @@ -0,0 +1,73 @@ +import{_ as k,r as l,o as r,c as d,e as h,b as e,w as n,a as i,d as s}from"./app-CRZRGfEE.js";const o="/docs/logo.png",g="/docs/imgs/logo-webcomponents.png",c="/docs/imgs/threejs-logo.webp",y={};function E(C,a){const t=l("CodeGroupItem"),p=l("CodeGroup");return r(),d("div",null,[a[2]||(a[2]=h('Needle Engine provides an easy-to-use web component that can be used to display rich, interactive 3D scenes directly in HTML with just a few lines of code. It's the same web component that powers our integrations.
Once you outgrow the configuration options of the web component, you can extend it with custom scripts and components, and full programmatic scene graph access.
Use the integrations!
For complex 3D scenes and fast iteration, we recommend using Needle Engine with one of our integrations. They provide a powerful creation workflow, including a live preview, hot reloading, and an advanced build pipeline with 3D optimizations.
Open this example on Stackblitz
You can work directly with Needle Engine without using any Integration. Needle Engine uses three.js as scene graph and rendering library, so all functionality from three.js is available in Needle as well.
You can install Needle Engine from npm by running:npm i @needle-tools/engine
While our default template uses vite, Needle Engine can also be used directly with vanilla Javascript โ without using any bundler.
You can add a complete, prebundled version of Needle Engine to your website with just a line of code. This includes our core components, physics, particles, networking, XR, and more. Use this if you're not sure!
<script type="module"
+ src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.min.js">
+</script>If you know your project doesn't require physics features, you can also use a smaller version of Needle Engine, without the physics engine. This will reduce the total downloaded size.
<script type="module"
+ src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.light.min.js">
+</script>Many examples can be found on StackBlitz.
For quick experiments, we provide a convenient link to create a new project ready to start, powered by StackBlitz:
engine.needle.tools/new
Under construction
If you want to work with Needle Engine without any integration, then you'll likely want to run a local server for your website. Here's how you can do that with Visual Studio Code:
http://localhost:5500/index.html in your web browser, if it doesn't open automatically.Since Needle Engine uses three.js as scene graph and rendering library, all functionality from three.js is available in Needle as well and can be used from component scripts. We're using a fork of three.js that includes additional features and improvements, especially in relation to WebXR, Animation, and USDZ export.
Tips
Make sure to update the <needle-engine src="myScene.glb"> path to an existing glb file or download this sample glb and put it in the same folder as the index.html, name it myScene.glb or update the src path.
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="favicon.ico">
+ <meta name="viewport" content="width=device-width, user-scalable=no">
+ <title>Made with Needle</title>
+
+ <!-- importmap -->
+ <script type="importmap">
+ {
+ "imports": {
+ "three": "https://unpkg.com/three/build/three.module.js",
+ "three/": "https://unpkg.com/three/"
+ }
+ }
+ </script>
+ <!-- parcel require must currently defined somewhere for peerjs -->
+ <script> var parcelRequire; </script>
+
+ <!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
+ <script type="module" src="https://unpkg.com/@needle-tools/engine@3.5.6-alpha/dist/needle-engine.light.min.js"></script>
+
+ <style>
+ body { margin: 0; }
+ needle-engine {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: grey;
+ }
+ </style>
+
+</head>
+
+<body>
+
+ <!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
+ <needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>
+
+</body>
+
+<script>
+ function onLoaded(ctx) {
+ console.log("Loading a glb file finished ๐");
+ console.log("This is the scene: ", ctx.scene);
+ }
+</script>
+
+</html>Drop the downloaded .unitypackage file into a Unity project and confirm that you want to import it.
Wait a moment for the installation and import to finish. A window may open stating that "A new scoped registry is now available in the Package Manager.". This is our Needle Package registry. You can safely close that window.
Explore Samples.
Select the menu option Needle Engine > Explore Samples to view, open and modify all available sample scenes.
There are 100+ samples that cover a wide range of topics, use cases, and industries.
For a quick overview, take a look at our Samples page.
All of these samples are available directly in Unity:
Needle Engine > Explore Samples to browse for samplesOpen Scene.The Samples are read-only โ that makes them easy to update.
Our samples scenes are part of a UPM package in Unity. This means that you can't edit the assets and scripts in them directly โ they are read-only. To edit an asset from the samples package, copy it into your project's Assets folder. To edit a script from the samples package, copy it into your web project's src folder.
We provide a number of Scene Templates for quickly starting new projects.
These allow you to go from idea to prototype in a few clicks.
Click on File > New Scene
Select one of the templates with (needle) in their name and click Create.
We recommend the Collaborative Sandbox template which is a great way to get started with interactivity, multiplayer, and adding assets.
Click Play to install and startup your new web project.
If you don't want to start from a scene template, you can follow these steps.
Effectively, we're going to recreate the "Minimal (Needle)" template that's shipping with the package.
Create a new empty scene
Set up your scene for exporting
Add an empty GameObject, name it "Exporter" and add an ExportInfo component to it.
In this component you create and quickly access your exported runtime project.
It also warns you if any of our packages and modules are outdated or not locally installed in your web project.
Project Name and Scene Name
By default, the project name matches the name of your scene. If you want to change that, you can pick or enter a Directory Name where you want to create your new web project. The path is relative to your Unity project.
Choose a web project template Now, select a web project template for your project. The default template is based on Vite, a fast web app bundler.
Click Play to install and start your new web project
Define your own templates
If you find yourself creating many similar projects, you can create your own local or remote templates using the Project View context menu under Create/Needle Engine/Project Template. Templates can either be local on disk (a folder being copied) or remote repositories (a git repository being cloned).
When creating a new web project in Unity, you can choose to create it from a local template (by default we ship a vite based web template).
You can also reference remote templates by entering a repository URL in the ExportInfo project path (this can be saved with your scene for example). When creating a new web project the repository will be either cloned or downloaded (depending on if you have git installed) and searched for a needle.config.json file. If none can be found in the cloned repository the root directory will be used. Examples of remote template projects can be found on github.com/needle-engine
If you're planning to only add custom files via NpmDefs and not change the project config (e.g. for a quick fullscreen test), you can prefix the project path with Library. The project will be generated in the Unity Project Library and does not need to be added to source control (the Library folder should be excluded from source control). We call these projects temporary projects. They're great for quickly testing out ideas!
NPM Definition are npm packages tightly integrated into the Unity Editor which makes it easily possible to share scripts with multiple web- or even Unity projects.
C# component stubs for typescript files will also be automatically generated for scripts inside npmdef packages.
To create a NPM Definition right click in the Unity Project browser and select Create/NPM Definition.
You can install a NPM Definition package to your runtime project by e.g. selecting your Export Info component and adding it to the dependencies list (internally this will just add the underlying npm package to your package.json).
Don't forget to install the newly added package by e.g. clicking Install on the ExportInfo component and also restart the server if it is already running
To edit the code inside a NPM Definition package just double click the asset NPM Definition asset in your project browser and it will open the vscode workspace that comes with each npmdef.
',14))])}const j=c(y,[["render",b],["__file","index.html.vue"]]),v=JSON.parse('{"path":"/unity/","title":"Needle Engine for Unity","lang":"en-US","frontmatter":{"title":"Needle Engine for Unity","editLink":true,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/preview.jpeg"}],["meta",{"name":"og:description","content":"---"}]],"description":"---"},"headers":[{"level":2,"title":"Install the Unity Package","slug":"install-the-unity-package","link":"#install-the-unity-package","children":[]},{"level":2,"title":"Quickstart Video Tutorial","slug":"quickstart-video-tutorial","link":"#quickstart-video-tutorial","children":[]},{"level":2,"title":"Start from a Sample","slug":"start-from-a-sample","link":"#start-from-a-sample","children":[]},{"level":2,"title":"Start from a template","slug":"start-from-a-template","link":"#start-from-a-template","children":[]},{"level":2,"title":"Start from scratch","slug":"start-from-scratch","link":"#start-from-scratch","children":[]},{"level":2,"title":"Project Folders and Files","slug":"project-folders-and-files","link":"#project-folders-and-files","children":[{"level":3,"title":"Temporary Projects","slug":"temporary-projects","link":"#temporary-projects","children":[]}]},{"level":2,"title":"Typescript in Unity","slug":"typescript-in-unity","link":"#typescript-in-unity","children":[]}],"git":{"updatedTime":1727182460000},"filePathRelative":"unity/index.md"}');export{j as comp,v as data}; diff --git a/assets/kipash.html-BN1wH6PC.js b/assets/kipash.html-BN1wH6PC.js new file mode 100644 index 000000000..36170fe5b --- /dev/null +++ b/assets/kipash.html-BN1wH6PC.js @@ -0,0 +1,37 @@ +import{_ as n,r as h,o as r,c as p,b as a,w as l,a as i,d as s}from"./app-CRZRGfEE.js";const d={};function o(C,t){const k=h("contribution-preview"),e=h("contributions-author");return r(),p("div",null,[a(e,{overviewLink:"/docs/community/contributions",name:"kipash",url:"https://github.com/kipash",profileImage:"https://avatars.githubusercontent.com/u/30328735?s=100&u=f28398f4575da1835d1c710d14763c69418cd0fa&v=4",githubUrl:"https://github.com/kipash"},{default:l(()=>[a(k,{title:"Calculate pointer world position",pageUrl:"/docs/community/contributions/kipash/calculate-pointer-world-position"},{default:l(()=>t[0]||(t[0]=[i("p",null,"https://github.com/needle-tools/needle-engine-support/assets/30328735/92404e43-9d45-4ee2-a018-fb00412b6bd5",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," serializable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," setWorldPosition "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Vector3 "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector1 "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector2 "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," PointerFollower"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," target"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," offset"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 10"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," update"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," cam "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mainCamera"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," input "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"input"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"target "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"||"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," !"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"cam)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // get relative mouse position, in range -1 to 1")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," mouse "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," input"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mousePositionRC"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // get world position of mouse on the near plane")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"set"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(mouse"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," mouse"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"y"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," -"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"unproject"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(cam"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // caulculate direction from camera to world mouse")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector2"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"copy"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(vector1)"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"sub"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(cam"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position)"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"normalize"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // offset it to the wanted distance")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addScaledVector"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(vector2"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"offset)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // apply the result")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," setWorldPosition"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"target"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vector1)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1})]),_:1})])}const y=n(d,[["render",o],["__file","kipash.html.vue"]]),c=JSON.parse('{"path":"/community/contributions/kipash","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/contributions: kipash.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{y as comp,c as data}; diff --git a/assets/krisrok.html-6_QA53zB.js b/assets/krisrok.html-6_QA53zB.js new file mode 100644 index 000000000..36b48dc0f --- /dev/null +++ b/assets/krisrok.html-6_QA53zB.js @@ -0,0 +1,31 @@ +import{_ as k,r as a,o as r,c as o,b as l,w as e,a as i,d as s}from"./app-CRZRGfEE.js";const p={};function d(c,t){const h=a("contribution-preview"),n=a("contributions-author");return r(),o("div",null,[l(n,{overviewLink:"/docs/community/contributions",name:"krisrok",url:"https://github.com/krisrok",profileImage:"https://avatars.githubusercontent.com/u/3404365?s=100&u=7025bf7e83b4a3cd72dc2cae9cec729080ee8970&v=4",githubUrl:"https://github.com/krisrok"},{default:e(()=>[l(h,{title:"Always open in specific browser",pageUrl:"/docs/community/contributions/krisrok/always-open-in-specific-browser"},{default:e(()=>t[0]||(t[0]=[i("p",null,[s('Add this class to your project to always open with Chrome instead of your default browser (Firefox in my case) when you click "Play" or "Start Server". Note: This is an editor class and should either be put into an editor-only assembly or wrapped in '),i("code",null,"#if UNITY_EDITOR"),s(" and "),i("code",null,"#endif"),s(".")],-1),i("div",{class:"language-csharp","data-highlighter":"shiki","data-ext":"csharp","data-title":"csharp",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"using"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," System"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Diagnostics"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"using"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEditor"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"using"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," UnityEngine"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"using"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Needle"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Engine"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"["),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"InitializeOnLoad"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"]")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"public"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," static"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," CustomBrowserOpen")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," static"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," CustomBrowserOpen"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Init"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"();")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ["),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"RuntimeInitializeOnLoadMethod"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"]")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," static"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Init"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ActionsBrowser"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"BeforeOpen "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ActionsBrowser_BeforeOpen"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," static"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," ActionsBrowser_BeforeOpen"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"ActionsBrowser"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"OpenBrowserArguments"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," args"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," args"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"PreventDefault "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," string"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," processArgs "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," args"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Url"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," var"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," psi "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," new"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," ProcessStartInfo")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," FileName "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "chrome.exe"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},",")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Arguments "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," processArgs")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," };")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Process"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"psi"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},");")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1})]),_:1})])}const g=k(p,[["render",d],["__file","krisrok.html.vue"]]),C=JSON.parse('{"path":"/community/contributions/krisrok","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/contributions: krisrok.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{g as comp,C as data}; diff --git a/assets/ktx-env-variable-DxwKzzNo.js b/assets/ktx-env-variable-DxwKzzNo.js new file mode 100644 index 000000000..c6b04a827 --- /dev/null +++ b/assets/ktx-env-variable-DxwKzzNo.js @@ -0,0 +1 @@ +const s="/docs/imgs/ktx-env-variable.webp";export{s as _}; diff --git a/assets/llllkatjallll.html-CUXH6RfS.js b/assets/llllkatjallll.html-CUXH6RfS.js new file mode 100644 index 000000000..200328373 --- /dev/null +++ b/assets/llllkatjallll.html-CUXH6RfS.js @@ -0,0 +1,59 @@ +import{_ as n,r as k,o as r,c as p,b as l,w as h,a as i,d as s}from"./app-CRZRGfEE.js";const d={};function C(y,t){const a=k("contribution-preview"),e=k("contributions-author");return r(),p("div",null,[l(e,{overviewLink:"/docs/community/contributions",name:"llllkatjallll",url:"https://github.com/llllkatjallll",profileImage:"https://avatars.githubusercontent.com/u/38395689?s=100&u=7ce0fef973c4819c4f07823568d6f6061abfe410&v=4",githubUrl:"https://github.com/llllkatjallll"},{default:h(()=>[l(a,{title:"Custom VR Button, that appears only on headsets and not on mobile phones",pageUrl:"/docs/community/contributions/llllkatjallll/custom-vr-button-that-appears-only-on-headsets-and-not-on-mobile-phones"},{default:h(()=>t[0]||(t[0]=[i("p",null,"I combined two checks - Needle's check to see if it's a mobile device (this way, you can exclude desktops), and then a second check that uses user agent info to see if it's one of the most common mobile systems. Result: the button does not appear on mobile phones, but it is visible on Quest and Pico ๐",-1),i("p",null,"P.S: I am using Svelte for 2D UI handling.",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," isMobileDevice"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," NeedleXRSession "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"...")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// check if this is a mobile phone")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"function"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," isMobilePhone"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#EA76CB","--shiki-dark":"#F4B8E4"}}," /"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Mobi"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Android"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"iPhone"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"iPad"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"iPod"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"BlackBerry"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"IEMobile"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Opera Mini"),i("span",{style:{"--shiki-light":"#EA76CB","--shiki-dark":"#F4B8E4"}},"/"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"test"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(navigator"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"userAgent)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"...")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"// show the button, if the device is not a mobile phone and VR is supported")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"#"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"if"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," isMobileDevice"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," !"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"isMobilePhone"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," $haveVR "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," <"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"VrButton buttonFunction"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() => "),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"StartVR"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()}"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," />")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"/"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"if"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1}),l(a,{title:"Set fallback material for USDZ exporter",pageUrl:"/docs/community/contributions/llllkatjallll/set-fallback-material-for-usdz-exporter"},{default:h(()=>t[1]||(t[1]=[i("p",null,"If you want to set a fallback material for an object that will be exported as USDZ (for AR-mode on iOS), you can add this script to the object, which material should be replaced.",-1),i("p",null,"This is especially useful if you use custom shaders in your scene (they are visible on Desktop+WebXR, but not in AR on iOS).",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Renderer"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," USDZExporter"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," serializable "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Material"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," FallbackMaterial"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Material"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," fallbackMaterial"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Material"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," originalMaterial"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Material"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," usdzExporter"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," USDZExporter"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onEnable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"usdzExporter "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," GameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"findObjectOfType"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(USDZExporter)"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"subscribeToBeforeExportEvent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onDisable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"unsubscribeFromBeforeExportEvent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," subscribeToBeforeExportEvent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"usdzExporter"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"before-export"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onBeforeExport)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"usdzExporter"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"after-export"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onAfterExport)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," unsubscribeFromBeforeExportEvent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"usdzExporter"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"removeEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"before-export"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onBeforeExport)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"usdzExporter"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"removeEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"after-export"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onAfterExport)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onBeforeExport"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"onBeforeExport"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," renderer "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"getComponent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(Renderer)"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"originalMaterial "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," renderer"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"sharedMaterial"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," renderer"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"sharedMaterial "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"fallbackMaterial"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onAfterExport"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"onAfterExport"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," renderer "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"getComponent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(Renderer)"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," renderer"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"sharedMaterial "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"originalMaterial"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1})]),_:1})])}const o=n(d,[["render",C],["__file","llllkatjallll.html.vue"]]),F=JSON.parse('{"path":"/community/contributions/llllkatjallll","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/contributions: llllkatjallll.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{o as comp,F as data}; diff --git a/assets/marwie.html-DsbxB-fW.js b/assets/marwie.html-DsbxB-fW.js new file mode 100644 index 000000000..244bd6d33 --- /dev/null +++ b/assets/marwie.html-DsbxB-fW.js @@ -0,0 +1,144 @@ +import{_ as n,r as a,o as r,c as d,b as h,w as l,a as i,d as s}from"./app-CRZRGfEE.js";const p={};function C(y,t){const k=a("contribution-preview"),e=a("contributions-author");return r(),d("div",null,[h(e,{overviewLink:"/docs/community/contributions",name:"marwie",url:"https://github.com/marwie",profileImage:"https://avatars.githubusercontent.com/u/5083203?s=100&v=4",githubUrl:"https://github.com/marwie"},{default:l(()=>[h(k,{title:"Camera Video Background",pageUrl:"/docs/community/contributions/marwie/camera-video-background"},{default:l(()=>t[0]||(t[0]=[i("p",null,[s("Put it anywhere in your scene to render a camera video behind your 3D scene "),i("a",{href:"https://linen-upbeat-sailboat.glitch.me/",target:"_blank",rel:"noopener noreferrer"},"Live demo")],-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ClearFlags"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," RGBAColor "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," VideoBackground"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," async"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," awake"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // create video element and put it inside themeta:Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sy but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looIt uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage
of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo
but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which loo
',8))])}const c=o(m,[["render",u],["__file","meta-test.html.vue"]]),g=JSON.parse('{"path":"/meta-test.html","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/meta test.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":3,"title":"my_test_header","slug":"my-test-header","link":"#my-test-header","children":[]},{"level":3,"title":"UI Canvas","slug":"ui-canvas","link":"#ui-canvas","children":[]},{"level":3,"title":"How physics works","slug":"how-physics-works","link":"#how-physics-works","children":[]}],"git":{"updatedTime":1671370582000},"filePathRelative":"_meta-test.md"}');export{c as comp,g as data}; diff --git a/assets/metalink-RADuWAM2.js b/assets/metalink-RADuWAM2.js new file mode 100644 index 000000000..f697d3cc0 --- /dev/null +++ b/assets/metalink-RADuWAM2.js @@ -0,0 +1 @@ +import{_}from"./app-CRZRGfEE.js";const n={__name:"metalink",setup(r,{expose:t}){t();const e={};return Object.defineProperty(e,"__isScriptSetup",{enumerable:!1,value:!0}),e}};function s(r,t,e,o,a,p){return" ``` hello ``` "}const u=_(n,[["render",s],["__file","metalink.vue"]]);export{u as default}; diff --git a/assets/microphone-access-in-a-browser-window-and-streamed-playback.html-DC969LS3.js b/assets/microphone-access-in-a-browser-window-and-streamed-playback.html-DC969LS3.js new file mode 100644 index 000000000..54e27034d --- /dev/null +++ b/assets/microphone-access-in-a-browser-window-and-streamed-playback.html-DC969LS3.js @@ -0,0 +1,65 @@ +import{_ as n,r as h,o as t,c as k,a as i,b as l,e as p}from"./app-CRZRGfEE.js";const e={};function r(d,s){const a=h("contribution-header");return t(),k("div",null,[s[0]||(s[0]=i("p",null,[i("a",{href:"/docs/community/contributions"},"Overview")],-1)),l(a,{url:"https://github.com/ROBYER1",author:"ROBYER1",page:"/docs/community/contributions/robyer1",profileImage:"https://avatars.githubusercontent.com/u/10745594?s=100&u=daf2c8b5dad729e556ae2a01c721672b24bc108a&v=4",githubUrl:"https://github.com/needle-tools/needle-engine-support/discussions/192",title:"Microphone access in a browser window (and streamed playback)",gradient:"True"}),s[1]||(s[1]=p(`A simple script to show how to request access to, then access a microphone device and also play back the audio stream to debug it. A useful starting point for making an experience revolving around microphone access.
import { Behaviour } from "@needle-tools/engine";
+
+export class Microphone extends Behaviour {
+ start() {
+ this.getLocalStream();
+ }
+
+ public el: Element;
+
+ attachStream(stream, el, options) {
+ var item;
+ var URL = window.URL;
+ var element = el;
+ var opts = {
+ autoplay: true,
+ mirror: false,
+ muted: false,
+ audio: false,
+ disableContextMenu: false,
+ };
+
+ if (options) {
+ for (item in options) {
+ opts[item] = options[item];
+ }
+ }
+
+ if (!element) {
+ element = document.createElement(opts.audio ? "audio" : "video");
+ } else if (element.tagName.toLowerCase() === "audio") {
+ opts.audio = true;
+ }
+
+ if (opts.autoplay) element.autoplay = "autoplay";
+ if (opts.muted) element.muted = true;
+ if (!opts.audio && opts.mirror) {
+ ["", "moz", "webkit", "o", "ms"].forEach(function (prefix) {
+ var styleName = prefix ? prefix + "Transform" : "transform";
+ element.style[styleName] = "scaleX(-1)";
+ });
+ }
+
+ element.srcObject = stream;
+ return element;
+ }
+
+ getLocalStream() {
+ navigator.mediaDevices
+ .getUserMedia({
+ video: false,
+ audio: true,
+ })
+ .then((stream) => {
+ var doesnotexist = !this.el;
+ this.el = this.attachStream(stream, this.el, {
+ audio: true,
+ autoplay: true,
+ });
+ if (doesnotexist) document.body.appendChild(this.el);
+ })
+ .catch((err) => {
+ console.log("u got an error:" + err);
+ });
+ }
+}Below you can find links to other repositories that contain Unity packages. These packages can be installed like any Unity package and used in your own projects. They usually contain eihter examples or modules that we use ourselves, but that are not ready to be part of the core Needle Engine.
Custom Timeline Tracks
Video Track (sync video playback to a Timeline) CssTrack (control css properties from the Timeline)
Splines (for Unity 2022.1+)
Export splines to three.js SplineWalker for controlling camera motion based on a spline Timeline track to control SplineWalker
Google Drive Integration
Sketches around drag-drop integration of Google Drive, file picking, app integration
The needle.config.json is used to provide configuration for the Needle Editor integrations and for the Needle Engine build pipeline plugins.
| Paths | |
buildDirectory | This is where the built project files are being copied to |
assetsDirectory | This is where the Editor integration assets will be copied to or created at (e.g. the .glb files exported from Unity or Blender) |
scriptsDirectory | This is the directory the Editor integration is watching for code changes to re-generate components |
codegenDirectory | This is where the Editor integration is outputting generated files to. |
baseUrl | Required for e.g. next.js or SvelteKit integration. When baseUrl is set, relative paths for codegen and inside files are using baseUrl, not assetsDirectory. This is useful in cases where the assetDirectory does not match the server url. For example, the path on disk could be "assetsDirectory": "public/assets", but the framework serves files from "baseUrl": "assets". |
| Tools | |
build : { copy: ["myFileOrDirectory"] } | Array of string paths for copying additional files or folders to the buildDirectory. These can either be absolute or relative. |
{
+ "buildDirectory": "dist",
+ "assetsDirectory": "assets",
+ "scriptsDirectory": "src/scripts",
+ "codegenDirectory": "src/generated"
+}{
+ "buildDirectory": "dist",
+ "assetsDirectory": "assets",
+ "scriptsDirectory": "src/scripts",
+ "codegenDirectory": "src/generated",
+ "build": {
+ "copy": [
+ "cards"
+ ]
+ }
+}Files are exported to static/assets but the framework serves them from /assets. In this case, the baseUrl needs to be set to assets so that relative paths in files are correct.
{
+ "baseUrl": "assets",
+ "buildDirectory": "dist",
+ "assetsDirectory": "static/assets",
+ "scriptsDirectory": "src/scripts",
+ "codegenDirectory": "src/generated"
+}The <needle-engine> web-component comes with a nice collection of built-in attributes that can be used to modify the look and feel of the loaded scene without the need to add or edit the three.js scene directly.
The table below shows a list of the most important ones:
| Attribute | Description |
|---|---|
| Loading | |
src | Path to one or multiple glTF or glb files. Supported types are string, string[] or a stringified array (, separated) |
dracoDecoderPath | URL to the draco decoder |
dracoDecoderType | draco decoder type. Options are wasm or js. See three.js documentation |
ktx2DecoderPath | URL to the KTX2 decoder |
| Rendering | |
background-color | optional, hex color to be used as a background color. Examples: rgb(255, 200, 100), #dddd00 |
background-image | optional, URL to a skybox image (background image) or a preset string: studio, blurred-skybox, quicklook, quicklook-ar |
background-blurriness | optional, bluriness value between 0 (no blur) and 1 (max blur) for the background-image. Example: background-blurriness="0.5" |
environment-image | optional, URL to a environment image (environment light) or a preset string: studio, blurred-skybox, quicklook, quicklook-ar |
contactshadows | optional, render contact shadows |
tone-mapping | optional, supported values are none, linear, neutral, agx |
tone-mapping-exposure | optional number e.g. increase exposure with tone-mapping-exposure="1.5", requires tone-mapping to be set |
| Interaction | |
autoplay | add or set to true to auto play animations e.g. <needle-engine autoplay |
camera-controls | add or set to true to automatically add OrbitControls if no camera controls are found in the scene |
auto-rotate | add to enable auto-rotate (only used with camera-controls) |
| Events | |
loadstart | Name of the function to call when loading starts. Note that the arguments are (ctx:Context, evt:Event). You can call evt.preventDefault() to hide the default loading overlay |
progress | Name of the function to call when loading updates. onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... } |
loadfinished | Name of the function to call when loading finishes |
| Loading Display | Available options to change how the Needle Engine loading display looks. Use ?debugloadingrendering for easier editing |
loading-style | Options are light or dark |
loading-background-color | PRO โ Change the loading background color (e.g. =#dd5500) |
loading-text-color | PRO โ Change the loading text color |
loading-logo-src | PRO โ Change the loading logo image |
primary-color | PRO โ Change the primary loading color |
secondary-color | PRO โ Change the secondary loading color |
hide-loading-overlay | PRO โ Do not show the loading overlay, added in Needle Engine > 3.17.1 |
| Internal | |
hash | Used internally, is appended to the files being loaded to force an update (e.g. when the browser has cached a glb file). Should not be edited manually. |
<!-- Setting the path to a custom glb to be loaded -->
+<needle-engine src="path/to/your.glb"></needle-engine><!-- Overriding where the draco decoder is located -->
+<needle-engine src="path/to/your.glb" dracoDecoderPath="path/to/draco/folder"></needle-engine>Setting environment images, playing animation and automatic camera controls. See it live on stackblitz
<needle-engine
+ camera-controls
+ auto-rotate
+ autoplay
+ skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
+ environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
+ src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
+ >
+ </needle-engine>Receiving an event when the needle-engine context has finished loading:
<needle-engine loadfinished="onLoadFinished"> </needle-engine>
+<script>
+ function onLoadFinished() {
+ console.log("Needle Engine has finished loading");
+ }
+</script>You can easily modify how Needle Engine looks by setting the appropriate attributes on the <needle-engine> web component. Please see the table above for details.
In a multiuser session, typically objects are instantiated using instantiateSynced as such:
import { Behaviour,GameObject,serializable,InstantiateOptions} from "@needle-tools/engine";
+import { Vector3, Object3D, } from "three";
+
+export class InstantiateObjectForAll extends Behaviour
+{
+ @serializable(Object3D)
+ myPrefab?: GameObject;
+
+ public makeObject():void{
+ const options = new InstantiateOptions();
+ options.context = this.context;
+ options.position = new Vector3(0,0,0);
+ GameObject.instantiateSynced(this.myPrefab, options) as GameObject;
+ }
+}My particular use-case was for generating programmatically a random scene made of cubes, and that scene had to be the same for all users of the same room. I had used the example above but for some unknown reasons sometimes the scenes were partially rendered when instantiating simultaneously >400 objects. @Marcel of Needle suggested to generate a seed (position of all objects in the scene) and send that seed instead using :
this.context.connection.send()All users using :
this.context.connection.beginListen()would receive any seed previously sent, upon joining the same room, allowing them to instantiate cubes according to that seed (array of Vector3).
Here is a script illustrating the use of the send method and the beginListen counterpart:
+//This is an example of sending the seed of a randomly generated scene made of cubes, for all other instances logging into the same room to create the same scene.
+
+//This script requires a prefab (e.g. a 1x1x1 Cube)
+//This script will generate and build randomly positioned cubes (random walk) as a child of the object it is attached to.
+//The generateSeed() method is in this script called via a button. The button is deactivated once the seed has been transmitted.
+//Any users joining the same room will receive the seed and build the exact same scene
+
+
+import { Behaviour,GameObject,serializable,InstantiateOptions} from "@needle-tools/engine";
+import { Vector3, Object3D } from "three";
+
+
+export class NetworkedSeed extends Behaviour
+{
+ @serializable(Object3D)
+ prefab?: GameObject;
+
+ @serializable(Object3D)
+ generateButton?: Object3D;
+
+ public seedSize: number = 30;
+
+ seed: Vector3[] = [];
+
+ onEnable(): void {
+ this.context.connection.beginListen("mySeed", this.onDataReceived);
+ if(this.generateButton)
+ {
+ this.generateButton.visible=true;
+ }
+ }
+ onDisable(): void {
+ this.context.connection.stopListen("mySeed", this.onDataReceived);
+ }
+
+ onDataReceived = (data: any) => {
+
+ console.log("Received data:", data.mySeed);
+ if(this.seed.length===0)
+ {
+ //prevent other generations of the seed
+ if(this.generateButton)
+ {
+ this.generateButton.visible=false;
+ }
+
+ this.seed=data.mySeed;
+ //build scene
+ this.buildScene();
+ }
+ };
+
+
+ //generate and send seed to all from the button generateButton
+ public generateSeed():void{
+
+ if(this.seed.length==0) //no seed found => generate one
+ {
+ this.seed = [];
+ const uniquePositions = new Set<string>();
+
+ //start at origin
+ const startPosition = new Vector3(0, 0, 0);
+ this.seed.push(startPosition.clone());
+ uniquePositions.add(startPosition.toArray().toString());
+
+ //go for a random walk of length : seedSize
+ while (this.seed.length < this.seedSize) {
+ const lastPosition = this.seed[this.seed.length - 1];
+ let newPosition: Vector3;
+
+ //walk and add position, making sure they are unique
+ do {
+ const direction = this.getRandomDirection();
+ newPosition = lastPosition.clone().add(direction);
+ } while (uniquePositions.has(newPosition.toArray().toString()));
+
+ this.seed.push(newPosition.clone());
+ uniquePositions.add(newPosition.toArray().toString());
+ }
+
+ //send the seed to all on the server
+ this.sendSeed();
+
+ //prevent other generations of the seed
+ if(this.generateButton)
+ {
+ this.generateButton.visible=false;
+ }
+ }
+
+ //build scene locally
+ this.buildScene();
+ }
+
+ private sendSeed():void{
+ if(this.seed.length!=0)
+ {
+ this.context.connection.send("mySeed",{guid:this.guid, mySeed: this.seed});
+ console.log("------ SEED SENT -------");
+ }
+ }
+
+ public buildScene():void{
+
+ //check if the seed is not empty
+ if(this.seed.length==0)
+ {
+ console.log("array was empty");
+ return;
+ }
+
+ //check if the scene has already been built
+ if(this.gameObject.children.length>0)
+ {
+ console.log("Scene already present");
+ return;
+ }
+
+ // Create cubes at each position of the random walk
+ for(let i=0; i<this.seed.length; i++)
+ {
+ const option = new InstantiateOptions();
+ option.context = this.context;
+ option.parent=this.gameObject;
+ option.position = this.seed[i];
+
+ if(this.prefab!=null)
+ {
+ const cube = GameObject.instantiate(this.prefab, option) as GameObject;
+ }
+ }
+
+ console.log("----------- Scene Built ---------");
+
+ }
+
+ private getRandomDirection(): Vector3 {
+ const x = Math.random() < 0.5 ? -1 : 1;
+ const y = Math.random() < 0.5 ? -1 : 1;
+ const z = Math.random() < 0.5 ? -1 : 1;
+ return new Vector3(x, y, z);
+ }
+
+}The above script is placed on an object (any Transform) and will generate an array of unique Vector3 positions for a specified length (seedSize) after generateSeed() is called (In this case it is called from a button: generateButton).
Once generated it will send the array to the server and build the scene. The building process consist of instantiating the prefab at each Vector3 position of the seed (this.seed) array.
Any user joining the same room after a seed has been generated and sent, will receive the seed from the server and trigger the callback onDataReceived() which will cache the seed array, disable the button, and build the scene with the prefab, according to the seed.
This gives a way to generate a scene and communicate the seed of that scene, for each user to build locally.
This was the solution I chose which worked better than instantiating a complex scene (>400 objects) with instantiateSynced which would occasionally cause bugs.
`,14))])}const g=t(e,[["render",r],["__file","network-instantiation-of-multiple-objects.html.vue"]]),y=JSON.parse('{"path":"/community/contributions/web3kev/network-instantiation-of-multiple-objects","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/web3kev: network instantiation of multiple objects.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{g as comp,y as data}; diff --git a/assets/networking.html-Ccq0lod9.js b/assets/networking.html-Ccq0lod9.js new file mode 100644 index 000000000..c5ba50976 --- /dev/null +++ b/assets/networking.html-Ccq0lod9.js @@ -0,0 +1,62 @@ +import{_ as s,o as a,c as e,e as n}from"./app-CRZRGfEE.js";const t="/docs/imgs/networking_absolute.webp",l={};function h(k,i){return a(),e("div",null,i[0]||(i[0]=[n(`Access to core networking functionality can be obtained by using this.context.connection from a component. The default backend server connects users to rooms. Users in the same room will share state and receive messages from each other.
Networking is currently based on websockets and sending either json strings (for infrequent updates) or flatbuffers (for frequent updates). Continue reading below for more details:
Enable Networking
Add a SyncedRoom component.
Enable Desktop Viewer Sync
Add a SyncedCamera component.
Enable XR Avatar Sync
Add a WebXRSync component.
Enable Voice Chat
Add a VoIP component.
Enable Screensharing
Add a ScreenCapture component.
SyncedRoom โ handles networking connection and connection to a room.this.context.connectionSyncedTransform โ handles synchronizing transformsSyncedCamera โ spawns a prefab for any user connected to the room which will follow their positionWebXRSync โ handles synchronization for AR and VR usersVoIP โ handles voice-over-IP audio connections, microphone access etc. between usersNetworking โ use to customize the server backend urlSend a json message to all users in the same room:this.context.connection.send(key:string, data: IModel | object | boolean | string | number | null)
Send a flatbuffer binary array to all users in the same room:this.context.connect.sendBinary(arr:Uint8Array)
When sending an object containing a guid field it will be saved in the persistant storage and automatically sent to users that connect later or come back later to the site (e.g. to restore state).
To delete state for a specific guid from the backend storage you can use delete-state as the key and provide an object with { guid: "guid_to_delete" }
Subscribe to json events / listen to events in the room using a specific keythis.context.connection.beginListen(key:string, callback:(data) => void)
Unsubscribe with stopListening
Subscribe to flatbuffer binary eventsthis.context.connection.beginListenBinrary(identifier:string, callback:(data : ByteBuffer) => void)
Unsubscribe with stopListenBinary
| Room Events | |
|---|---|
this.context.beginListen(RoomEvents.JoinedRoom, () => { }) | Listen to the event when you have joined a networked room |
this.context.beginListen(RoomEvents.LeftRoom, () => { }) | Listen to the event when you have left a networked room |
this.context.beginListen(RoomEvents.UserJoinedRoom, () => { }) | Listen to the event when another user has joined your networked room |
this.context.beginListen(RoomEvents.UserLeftRoom, () => { }) | Listen to the event when another user has left your networked room |
To automatically network fields in a component you can just decorate a field with a @syncField() decorator (note: you need to have experimentalDecorators: true in your tsconfig.json file for it to work)
Automatically network a color field. The following script also changes the color randomly on click
import { Behaviour, IPointerClickHandler, PointerEventData, Renderer, RoomEvents, delay, serializable, showBalloonMessage, syncField } from "@needle-tools/engine";
+import { Color } from "three"
+
+export class Networking_ClickToChangeColor extends Behaviour implements IPointerClickHandler {
+
+ // START MARKER network color change syncField
+ /** syncField does automatically send a property value when it changes */
+ @syncField(Networking_ClickToChangeColor.prototype.onColorChanged)
+ @serializable(Color)
+ color!: Color;
+
+ private onColorChanged() {
+ // syncField will network the color as a number, so we need to convert it back to a Color when we receive it
+ if (typeof this.color === "number")
+ this.color = new Color(this.color);
+ this.setColorToMaterials();
+ }
+ // END MARKER network color change syncField
+
+ /** called when the object is clicked and does generate a random color */
+ onPointerClick(_: PointerEventData) {
+ const randomColor = new Color(Math.random(), Math.random(), Math.random());
+ this.color = randomColor;
+ }
+
+ onEnable() {
+ this.setColorToMaterials();
+ }
+
+ private setColorToMaterials() {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (renderer) {
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ // we clone the material so that we don't change the original material
+ // just for demonstration purposes, you can also change the original material
+ const mat = renderer.sharedMaterials[i]?.clone();
+ renderer.sharedMaterials[i] = mat;
+ if (mat && "color" in mat)
+ mat.color = this.color;
+ }
+ }
+ else console.warn("No renderer found", this.gameObject)
+ }
+
+}
Simple networking of a number
import { Behaviour, syncField, IPointerClickHandler } from "@needle-tools/engine"
+
+export class AutoFieldSync extends Behaviour implements IPointerClickHandler {
+
+ // Use \`@syncField\` to automatically network a field.
+ // You can optionally assign a method or method name to be called when the value changes
+ @syncField("myValueChanged")
+ mySyncedValue?: number = 1;
+
+ private myValueChanged() {
+ console.log("My value changed", this.mySyncedValue);
+ }
+
+ onPointerClick() {
+ this.mySyncedValue = Math.random();
+ }
+}Needle Engine currently uses its own networking package hosted on npm. By default if not configured differently using the Networking component Needle Engine will connect to a server running on Glitch.
It can be added to your own fastiy or express server running on any server for example by adding the following code on your server after installing the package:
import networking from "@needle-tools/needle-tiny-networking-ws";
+networking.startServerFastify(fastifyApp, { endpoint: "/socket" });The following options are available:
endpoint string | relative path to the websocket endpoint (e.g. /socket) |
maxUsers number | Amount of users allowed per room |
defaultUserTimeout number | Timeout length in seconds until a user is kicked from a room (if no ping is received). Defaults to 30 seconds |
When deploying your app to Glitch, we include a simple networking backend that is great for prototyping and small deployments (~15-20 people at the same time). You can later update to a bigger/better/stronger networking solution if required.
For testing and development purposes it can be desired to run the needle engine networking package on a local server. We have prepared a repository that is setup to host the websocket package and to make that easy for you. Please follow the instructions in the linked repository:
You can also deploy your own networking server on e.g. google cloud. For further instructions please refer to the description found here: Local Networking Repository
If you want to use a different server for your local development and your hosted development (and the hosted server is not the same as your needle engine deployed website) then you can also enter a absolute URL in the Networking component URL field as well:
Needle Engine Screencapture / Screensharing and Voip components use peerjs for networking audio and video.
setPeerOptions(opts: PeerjsOptions) with your custom options. This can be used to modify the hosting provider in case where you host your own peerjs server.In cases in which you are using QuickLook Image Tracker and Vertical Imagery you will need to correct the orientation of the model. As noted on the Detecting Images in an AR Experience page:
SCNPlaneis vertically oriented in its local coordinate space, butARImageAnchorassumes the image is horizontal in its local space, so rotate the plane to match.
import { Behaviour, GameObject, serializable, USDZExporter } from "@needle-tools/engine";
+import { Object3D, Euler } from "three";
+
+export class QuickLookObjectsToFix extends Behaviour {
+
+ @serializable(Object3D)
+ objectToFix!: Object3D;
+
+ private usdzExporter!: USDZExporter;
+ private startRot: Euler = new Euler();
+
+ onEnable() {
+ this.usdzExporter = GameObject.findObjectOfType(USDZExporter)!;
+ this.startRot = this.objectToFix.rotation;
+ this.subscribeToBeforeExportEvent();
+ }
+
+ onDisable() {
+ this.unsubscribeFromBeforeExportEvent();
+ }
+
+ private subscribeToBeforeExportEvent() {
+ this.usdzExporter.addEventListener("before-export", this.onBeforeExport);
+ this.usdzExporter.addEventListener("after-export", this.onAfterExport);
+ }
+
+ private unsubscribeFromBeforeExportEvent() {
+ this.usdzExporter.removeEventListener("before-export", this.onBeforeExport);
+ this.usdzExporter.removeEventListener("after-export", this.onAfterExport);
+ }
+
+ private onBeforeExport = () => {
+ this.objectToFix.updateMatrixWorld();
+ this.objectToFix.rotation.x = -Math.PI / 2;
+ this.objectToFix.updateMatrixWorld();
+ }
+
+ private onAfterExport = () => {
+ this.objectToFix.updateMatrixWorld();
+ this.objectToFix.setRotationFromEuler(this.startRot);
+ this.objectToFix.updateMatrixWorld();
+ }
+}Thanks to llllkatjallll as their Set fallback material for USDZ exporter solution helped me come up with a working solution for this.
EDIT: Code cleanup and fixes.
`,5))])}const g=t(p,[["render",r],["__file","quicklook-vertical-image-tracker.html.vue"]]),y=JSON.parse('{"path":"/community/contributions/ericcraft-mh/quicklook-vertical-image-tracker","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/ericcraft mh: quicklook vertical image tracker.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{g as comp,y as data}; diff --git a/assets/quoteslides-Jbcw9khk.js b/assets/quoteslides-Jbcw9khk.js new file mode 100644 index 000000000..125f38471 --- /dev/null +++ b/assets/quoteslides-Jbcw9khk.js @@ -0,0 +1 @@ +import{_ as n,p as l,q as a,o as d,c,f as i}from"./app-CRZRGfEE.js";const r=l({setup(){a(()=>{const o=document.querySelector(".quotes");o.style.display="flex";const e=document.querySelectorAll(".quotes > div");for(let s=0;sVideo tutorial: How to write custom components
Below you will find a few basic scripts as a quick reference.
We also offer a lot of sample scenes and complete projects that you can download and use as a starting point:
import { Behaviour, serializable } from "@needle-tools/engine"
+import { Object3D } from "three"
+
+export class MyComponent extends Behaviour {
+
+ @serializable(Object3D)
+ myObjectReference?: Object3D;
+
+ start() {
+ console.log("Hello world", this);
+ }
+
+ update() {
+ this.gameObject.rotateY(this.context.time.deltaTime);
+ }
+}see scripting for all component events
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Object3D } from "three"
+
+export class MyClass extends Behaviour {
+ // this will be a "Transform" field in Unity
+ @serializable(Object3D)
+ myObjectReference: Object3D | null = null;
+
+ // this will be a "Transform" array field in Unity
+ // Note that the @serializable decorator contains the array content type! (Object3D and not Object3D[])
+ @serializable(Object3D)
+ myObjectReferenceList: Object3D[] | null = null;
+}import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since \`\`instantiate()\`\` does create a copy of the asset after loading it
+ }
+}Tips
Find a working example in our samples to download and try
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class LoadingScenes extends Behaviour {
+ // tell the component compiler that we want to reference an array of SceneAssets
+ // @type UnityEditor.SceneAsset[]
+ @serializable(AssetReference)
+ myScenes?: AssetReference[];
+
+ async awake() {
+ if (!this.myScenes) {
+ return;
+ }
+ for (const scene of this.myScenes) {
+ // check if it is assigned in unity
+ if(!scene) continue;
+ // load the scene once
+ const myScene = await scene.loadAssetAsync();
+ // add it to the threejs scene
+ this.gameObject.add(myScene);
+
+ // of course you can always just load one at a time
+ // and remove it from the scene when you want
+ // myScene.removeFromParent();
+ // this is the same as scene.asset.removeFromParent()
+ }
+ }
+
+ onDestroy(): void {
+ if (!this.myScenes) return;
+ for (const scene of this.myScenes) {
+ scene?.unload();
+ }
+ }
+}Add this script to any object in your scene that you want to be clickable. Make sure to also have an ObjectRaycaster component in the parent hierarchy of that object.
import { Behaviour, IPointerClickHandler, PointerEventData, showBalloonMessage } from "@needle-tools/engine";
+
+export class ClickExample extends Behaviour implements IPointerClickHandler {
+
+ // Make sure to have an ObjectRaycaster component in the parent hierarchy
+ onPointerClick(_args: PointerEventData) {
+ showBalloonMessage("Clicked " + this.name);
+ }
+}Add this script to any object in your scene that you want to be clickable. Make sure to also have an ObjectRaycaster component in the parent hierarchy of that object.
The component will send the received click to all connected clients and will raise an event that you can then react to in your app. If you are using Unity or Blender you can simply assign functions to call to the onClick event to e.g. play an animation or hide objects.
import { Behaviour, EventList, IPointerClickHandler, PointerEventData, serializable } from "@needle-tools/engine";
+
+export class SyncedClick extends Behaviour implements IPointerClickHandler {
+
+ @serializable(EventList)
+ onClick!: EventList;
+
+ onPointerClick(_args: PointerEventData) {
+ console.log("SEND CLICK");
+ this.context.connection.send("clicked/" + this.guid);
+ this.onClick?.invoke();
+ }
+
+ onEnable(): void {
+ this.context.connection.beginListen("clicked/" + this.guid, this.onRemoteClick);
+ }
+ onDisable(): void {
+ this.context.connection.stopListen("clicked/" + this.guid, this.onRemoteClick);
+ }
+
+
+ onRemoteClick = () => {
+ console.log("RECEIVED CLICK");
+ this.onClick?.invoke();
+ }
+
+}import { Behaviour, serializable, Animation, IPointerClickHandler, PointerEventData } from "@needle-tools/engine";
+
+export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler {
+
+ @serializable(Animation)
+ animation?: Animation;
+
+ awake() {
+ if (this.animation) {
+ this.animation.playAutomatically = false;
+ this.animation.loop = false;
+ }
+ }
+
+ onPointerClick(_args: PointerEventData) {
+ if (this.animation) {
+ this.animation.play();
+ }
+ }
+}This can be useful if you want to run your custom animation logic.
You can also export an array of clips.
import { Behaviour, serializable } from "@needle-tools/engine";
+import { AnimationClip } from "three"
+
+export class ExportAnimationClip extends Behaviour {
+
+ @serializable(AnimationClip)
+ animation?: AnimationClip;
+
+ awake() {
+ console.log("My referenced animation clip", this.animation);
+ }
+}import { Behaviour, serializable, EventList } from "@needle-tools/engine"
+
+export class MyComponent extends Behaviour {
+
+ @serializable(EventList)
+ myEvent? : EventList;
+
+ start() {
+ this.myEvent?.invoke();
+ }
+}Tips
EventList events are also invoked on the component level. This means you can also subscribe to the event declared above using myComponent.addEventListener("my-event", evt => {...}) as well.
This is an experimental feature. Please provide feedback in our forum
This is useful for when you want to expose an event to Unity or Blender with some custom arguments (like a string)
import { Behaviour, serializable, EventList } from "@needle-tools/engine";
+import { Object3D } from "three";
+
+/*
+Make sure to have a c# file in your project with the following content:
+
+using UnityEngine;
+using UnityEngine.Events;
+
+[System.Serializable]
+public class MyCustomUnityEvent : UnityEvent<string>
+{
+}
+
+Unity documentation about custom events:
+https://docs.unity3d.com/ScriptReference/Events.UnityEvent_2.html
+
+*/
+
+// Documentation โ https://docs.needle.tools/scripting
+
+export class CustomEventCaller extends Behaviour {
+
+ // The next line is not just a comment, it defines
+ // a specific type for the component generator to use.
+
+ //@type MyCustomUnityEvent
+ @serializable(EventList)
+ myEvent!: EventList;
+
+ // just for testing - could be when a button is clicked, etc.
+ start() {
+ this.myEvent.invoke("Hello");
+ }
+}
+
+export class CustomEventReceiver extends Behaviour {
+
+ logStringAndObject(str: string) {
+ console.log("From Event: ", str);
+ }
+}Example use:
You can nest objects and their data. With properly matching @serializable(SomeType) decorators, the data will be serialized and deserialized into the correct types automatically.
In your typescript component:
import { Behaviour, serializable } from "@needle-tools/engine";
+
+// Documentation โ https://docs.needle.tools/scripting
+
+class CustomSubData {
+ @serializable()
+ subString: string = "";
+
+ @serializable()
+ subNumber: number = 0;
+}
+
+class CustomData {
+ @serializable()
+ myStringField: string = "";
+
+ @serializable()
+ myNumberField: number = 0;
+
+ @serializable()
+ myBooleanField: boolean = false;
+
+ @serializable(CustomSubData)
+ subData: CustomSubData | undefined = undefined;
+
+ someMethod() {
+ console.log("My string is " + this.myStringField, "my sub data", this.subData)
+ }
+}
+
+export class SerializedDataSample extends Behaviour {
+
+ @serializable(CustomData)
+ myData: CustomData | undefined;
+
+ onEnable() {
+ console.log(this.myData);
+ this.myData?.someMethod();
+ }
+}In C# in any script:
using System;
+
+[Serializable]
+public class CustomSubData
+{
+ public string subString;
+ public float subNumber;
+}
+
+[Serializable]
+public class CustomData
+{
+ public string myStringField;
+ public float myNumberField;
+ public bool myBooleanField;
+ public CustomSubData subData;
+}Tips
Without the correct type decorators, you will still get the data, but just as a plain object. This is useful when you're porting components, as you'll have access to all data and can add types as required.
Tips
Keep in mind that you still have access to all web apis and npm packages!
That's the beauty of Needle Engine if we're allowed to say this here ๐
import { Behaviour, showBalloonMessage } from "@needle-tools/engine";
+
+export class WhereAmI extends Behaviour {
+ start() {
+ navigator.geolocation.getCurrentPosition((position) => {
+ console.log("Navigator response:", position);
+ const latlong = position.coords.latitude + ", " + position.coords.longitude;
+ showBalloonMessage("You are at\\nLatLong " + latlong);
+ });
+ }
+}import { Behaviour, Text, serializable, WaitForSeconds } from "@needle-tools/engine";
+
+export class DisplayTime extends Behaviour {
+
+ @serializable(Text)
+ text?: Text;
+
+ onEnable(): void {
+ this.startCoroutine(this.updateTime())
+ }
+
+ private *updateTime() {
+ while (true) {
+ if (this.text) {
+ this.text.text = new Date().toLocaleTimeString();
+ console.log(this.text.text)
+ }
+ yield WaitForSeconds(1)
+ }
+ };
+}Assuming you have a custom shader with a property name _Speed that is a float value this is how you would change it from a script.
You can find a live example to download in our samples
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Material } from "three";
+
+declare type MyCustomShaderMaterial = {
+ _Speed: number;
+};
+
+export class IncreaseShaderSpeedOverTime extends Behaviour {
+
+ @serializable(Material)
+ myMaterial?: Material & MyCustomShaderMaterial;
+
+ update() {
+ if (this.myMaterial) {
+ this.myMaterial._Speed *= 1 + this.context.time.deltaTime;
+ if(this.myMaterial._Speed > 1) this.myMaterial._Speed = .0005;
+ if(this.context.time.frame % 30 === 0) console.log(this.myMaterial._Speed)
+ }
+ }
+}See live example on StackBlitz
Make sure to install npm i postprocessing in your web project. Then you can add new effects by deriving from PostProcessingEffect.
To use the effect add it to the same object as your Volume component.
Here is an example that wraps the Outline postprocessing effect. You can expose variables and settings as usual as any effect is also just a component in your three.js scene.
import { EffectProviderResult, PostProcessingEffect, registerCustomEffectType, serializable } from "@needle-tools/engine";
+import { OutlineEffect } from "postprocessing";
+import { Object3D } from "three";
+
+export class OutlinePostEffect extends PostProcessingEffect {
+
+ // the outline effect takes a list of objects to outline
+ @serializable(Object3D)
+ selection!: Object3D[];
+
+ // this is just an example method that you could call to update the outline effect selection
+ updateSelection() {
+ if (this._outlineEffect) {
+ this._outlineEffect.selection.clear();
+ for (const obj of this.selection) {
+ this._outlineEffect.selection.add(obj);
+ }
+ }
+ }
+
+
+ // a unique name is required for custom effects
+ get typeName(): string {
+ return "Outline";
+ }
+
+ private _outlineEffect: void | undefined | OutlineEffect;
+
+ // method that creates the effect once
+ onCreateEffect(): EffectProviderResult | undefined {
+
+ const outlineEffect = new OutlineEffect(this.context.scene, this.context.mainCamera!);
+ this._outlineEffect = outlineEffect;
+ outlineEffect.edgeStrength = 10;
+ outlineEffect.visibleEdgeColor.set(0xff0000);
+ for (const obj of this.selection) {
+ outlineEffect.selection.add(obj);
+ }
+
+ return outlineEffect;
+ }
+}
+// You need to register your effect type with the engine
+registerCustomEffectType("Outline", OutlinePostEffect);import { Behaviour, ParticleSystem } from "@needle-tools/engine";
+import { ParticleSystemBaseBehaviour, QParticle } from "@needle-tools/engine";
+
+// Derive your custom behaviour from the ParticleSystemBaseBehaviour class (or use QParticleBehaviour)
+class MyParticlesBehaviour extends ParticleSystemBaseBehaviour {
+
+ // callback invoked per particle
+ update(particle: QParticle): void {
+ particle.position.y += 5 * this.context.time.deltaTime;
+ }
+}
+export class TestCustomParticleSystemBehaviour extends Behaviour {
+ start() {
+ // add your custom behaviour to the particle system
+ this.gameObject.getComponent(ParticleSystem)!.addBehaviour(new MyParticlesBehaviour())
+ }
+}This is an example how you could create your own audio component.
For most usecases however you can use the core AudioSource component and don't have to write code.
import { AudioSource, Behaviour, serializable } from "@needle-tools/engine";
+
+// declaring AudioClip type is for codegen to produce the correct input field (for e.g. Unity or Blender)
+declare type AudioClip = string;
+
+export class My2DAudio extends Behaviour {
+
+ // The clip contains a string pointing to the audio file - by default it's relative to the GLB that contains the component
+ // by adding the URL decorator the clip string will be resolved relative to your project root and can be loaded
+ @serializable(URL)
+ clip?: AudioClip;
+
+ awake() {
+ // creating a new audio element and playing it
+ const audioElement = new Audio(this.clip);
+ audioElement.loop = true;
+ // on the web we have to wait for the user to interact with the page before we can play audio
+ AudioSource.registerWaitForAllowAudio(() => {
+ audioElement.play();
+ })
+ }
+}Use the FileReference type to load external files (e.g. a json file)
import { Behaviour, FileReference, ImageReference, serializable } from "@needle-tools/engine";
+
+export class FileReferenceExample extends Behaviour {
+
+ // A FileReference can be used to load and assign arbitrary data in the editor. You can use it to load images, audio, text files... FileReference types will not be saved inside as part of the GLB (the GLB will only contain a relative URL to the file)
+ @serializable(FileReference)
+ myFile?: FileReference;
+ // Tip: if you want to export and load an image (that is not part of your GLB) if you intent to add it to your HTML content for example you can use the ImageReference type instead of FileReference. It will be loaded as an image and you can use it as a source for an <img> tag.
+
+ async start() {
+ console.log("This is my file: ", this.myFile);
+ // load the file
+ const data = await this.myFile?.loadRaw();
+ if (!data) {
+ console.error("Failed loading my file...");
+ return;
+ }
+ console.log("Loaded my file. These are the bytes:", await data.arrayBuffer());
+ }
+}import { Behaviour, EventList, serializable, serializeable } from "@needle-tools/engine";
+
+export class HTMLButtonClick extends Behaviour {
+
+ /** Enter a button query (e.g. button.some-button if you're interested in a button with the class 'some-button')
+ * Or you can also use an id (e.g. #some-button if you're interested in a button with the id 'some-button')
+ * Or you can also use a tag (e.g. button if you're interested in any button
+ */
+ @serializeable()
+ htmlSelector: string = "button.some-button";
+
+ /** This is the event to be invoked when the html element is clicked. In Unity or Blender you can assign methods to be called in the Editor */
+ @serializable(EventList)
+ onClick: EventList = new EventList();
+
+ private element? : HTMLButtonElement;
+
+ onEnable() {
+ // Get the element from the DOM
+ this.element = document.querySelector(this.htmlSelector) as HTMLButtonElement;
+ if (this.element) {
+ this.element.addEventListener('click', this.onClicked);
+ }
+ else console.warn(\`Could not find element with selector \\"\${this.htmlSelector}\\"\`);
+ }
+
+ onDisable() {
+ if (this.element) {
+ this.element.removeEventListener('click', this.onClicked);
+ }
+ }
+
+ private onClicked = () => {
+ this.onClick.invoke();
+ }
+}import { Behaviour } from "@needle-tools/engine";
+import { Texture } from "three";
+
+export class DisableEnvironmentLight extends Behaviour {
+
+ private _previousEnvironmentTexture: Texture | null = null;
+
+ onEnable(): void {
+ this._previousEnvironmentTexture = this.context.scene.environment;
+ this.context.scene.environment = null;
+ }
+
+ onDisable(): void {
+ this.context.scene.environment = this._previousEnvironmentTexture;
+ }
+}Make sure to install the mediapipe package. Visit the github link below to see the complete project setup.
Try it live here - requires a webcam/camera
import { FilesetResolver, HandLandmarker, HandLandmarkerResult, NormalizedLandmark } from "@mediapipe/tasks-vision";
+import { Behaviour, Mathf, serializable, showBalloonMessage } from "@needle-tools/engine";
+import { ParticleSphere } from "./ParticleSphere";
+
+export class MediapipeHands extends Behaviour {
+
+ @serializable(ParticleSphere)
+ spheres: ParticleSphere[] = [];
+
+ private _video!: HTMLVideoElement;
+ private _handLandmarker!: HandLandmarker;
+
+ async awake() {
+ showBalloonMessage("Initializing mediapipe...")
+
+ const vision = await FilesetResolver.forVisionTasks(
+ // path/to/wasm/root
+ "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
+ );
+ this._handLandmarker = await HandLandmarker.createFromOptions(
+ vision,
+ {
+ baseOptions: {
+ modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/latest/hand_landmarker.task",
+ delegate: "GPU"
+ },
+ numHands: 2
+ });
+ //@ts-ignore
+ await this._handLandmarker.setOptions({ runningMode: "VIDEO" });
+
+ this._video = document.createElement("video");
+ this._video.setAttribute("style", "max-width: 30vw; height: auto;");
+ console.log(this._video);
+ this._video.autoplay = true;
+ this._video.playsInline = true;
+ this.context.domElement.appendChild(this._video);
+ this.startWebcam(this._video);
+ }
+
+ private _lastVideoTime: number = 0;
+
+ update(): void {
+ if (!this._video || !this._handLandmarker) return;
+ const video = this._video;
+ if (video.currentTime !== this._lastVideoTime) {
+ let startTimeMs = performance.now();
+ showBalloonMessage("<strong>Control the spheres with one or two hands</strong>!<br/><br/>Sample scene by <a href='https://twitter.com/llllkatjallll/status/1659280435023605773'>Katja Rempel</a>")
+ const detections = this._handLandmarker.detectForVideo(video, startTimeMs);
+ this.processResults(detections);
+ this._lastVideoTime = video.currentTime;
+ }
+
+ }
+
+ private processResults(results: HandLandmarkerResult) {
+ const hand1 = results.landmarks[0];
+ // check if we have even one hand
+ if (!hand1) return;
+
+ if (hand1.length >= 4 && this.spheres[0]) {
+ const pos = hand1[4];
+ this.processLandmark(this.spheres[0], pos);
+ }
+
+ // if we have a second sphere:
+ if (this.spheres.length >= 2) {
+ const hand2 = results.landmarks[1];
+ if (!hand2) {
+ const pos = hand1[8];
+ this.processLandmark(this.spheres[1], pos);
+ }
+ else {
+ const pos = hand2[4];
+ this.processLandmark(this.spheres[1], pos);
+ }
+ }
+ }
+
+ private processLandmark(sphere: ParticleSphere, pos: NormalizedLandmark) {
+ const px = Mathf.remap(pos.x, 0, 1, -6, 6);
+ const py = Mathf.remap(pos.y, 0, 1, 6, -6);
+ sphere.setTarget(px, py, 0);
+ }
+
+ private async startWebcam(video: HTMLVideoElement) {
+ const constraints = { video: true, audio: false };
+ const stream = await navigator.mediaDevices.getUserMedia(constraints);
+ video.srcObject = stream;
+ }
+}import { Behaviour, Collision, Renderer } from "@needle-tools/engine";
+import{ Color } from "three";
+
+export class ChangeColorOnCollision extends Behaviour {
+
+ private renderer: Renderer | null = null;
+ private collisionCount: number = 0;
+
+ private _startColor? : Color[];
+
+ start() {
+ this.renderer = this.gameObject.getComponent(Renderer);
+ if (!this.renderer) return;
+ if(!this._startColor) this._startColor = [];
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i] = this.renderer.sharedMaterials[i].clone();
+ this._startColor[i] = this.renderer.sharedMaterials[i]["color"].clone();
+ }
+ }
+
+ onCollisionEnter(_col: Collision) {
+ if (!this.renderer) return;
+ this.collisionCount += 1;
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i]["color"].setRGB(Math.random(), Math.random(), Math.random());
+ }
+ }
+
+ onCollisionExit(_col: Collision) {
+ if (!this.renderer || !this._startColor) return;
+ this.collisionCount -= 1;
+ if (this.collisionCount === 0) {
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i]["color"].copy(this._startColor[i])
+ // .setRGB(.1, .1, .1);
+ }
+ }
+ }
+
+ // more events:
+ // onCollisionStay(_col: Collision)
+ // onCollisionExit(_col: Collision)
+}Invoke events using an objects physics trigger methods
export class PhysicsTrigger extends Behaviour {
+
+ @serializeable(GameObject)
+ triggerObjects?:GameObject[];
+
+ @serializeable(EventList)
+ onEnter?: EventList;
+
+ @serializeable(EventList)
+ onStay?: EventList;
+
+ @serializeable(EventList)
+ onExit?: EventList;
+
+ onTriggerEnter(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onEnter?.invoke();
+ }
+
+ onTriggerStay(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onStay?.invoke();
+ }
+
+ onTriggerExit(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onExit?.invoke();
+ }
+}Reset an object's position automatically when it's leaving a physics trigger
import { Behaviour, Collider, GameObject, Rigidbody, serializeable } from "@needle-tools/engine";
+import { Vector3 } from "three";
+
+export class StartPosition extends Behaviour {
+
+ //@nonSerialized
+ startPosition?: Vector3;
+
+ start() {
+ this.updateStartPosition();
+ }
+
+ updateStartPosition(){
+ this.startPosition = this.gameObject.position.clone();
+ }
+
+ resetToStart() {
+ if (!this.startPosition) return;
+ const rb = GameObject.getComponent(this.gameObject, Rigidbody);
+ rb?.teleport(this.startPosition);
+ }
+}
+
+/** Reset to start position when object is exiting the collider */
+export class AutoReset extends StartPosition {
+
+ @serializeable(Collider)
+ worldCollider?: Collider;
+
+ start(){
+ super.start();
+ if(!this.worldCollider) console.warn("Missing collider to reset", this);
+ }
+
+ onTriggerExit(col) {
+ if(col === this.worldCollider){
+ this.resetToStart();
+ }
+ }
+}import { AudioSource, Behaviour, serializeable } from "@needle-tools/engine";
+
+export class PlayAudioOnCollision extends Behaviour {
+ @serializeable(AudioSource)
+ audioSource?: AudioSource;
+
+ onCollisionEnter() {
+ this.audioSource?.play();
+ }
+}Randomize the color of an object on start. Note that the materials are cloned in the start method
import { Behaviour, serializeable, Renderer } from "@needle-tools/engine";
+import { Color } from "three";
+
+export class RandomColor extends Behaviour {
+
+ @serializeable()
+ applyOnStart: boolean = true;
+
+ start() {
+ if (this.applyOnStart)
+ this.applyRandomColor();
+
+ // if materials are not cloned and we change the color they might also change on other objects
+ const cloneMaterials = true;
+ if (cloneMaterials) {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (!renderer) {
+ return;
+ }
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ renderer.sharedMaterials[i] = renderer.sharedMaterials[i].clone();
+ }
+ }
+ }
+
+ applyRandomColor() {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (!renderer) {
+ console.warn("Can not change color: No renderer on " + this.name);
+ return;
+ }
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ renderer.sharedMaterials[i].color = new Color(Math.random(), Math.random(), Math.random());
+ }
+ }
+}import { Behaviour, GameObject, LogType, serializeable, showBalloonMessage, WaitForSeconds } from "@needle-tools/engine";
+
+export class TimedSpawn extends Behaviour {
+ @serializeable(GameObject)
+ object?: GameObject;
+
+ interval: number = 1000;
+ max: number = 100;
+
+ private spawned: number = 0;
+
+ awake() {
+ if (!this.object) {
+ console.warn("TimedSpawn: no object to spawn");
+ showBalloonMessage("TimedSpawn: no object to spawn", LogType.Warn);
+ return;
+ }
+ GameObject.setActive(this.object, false);
+ this.startCoroutine(this.spawn())
+ }
+
+ *spawn() {
+ if (!this.object) return;
+ while (this.spawned < this.max) {
+ const instance = GameObject.instantiate(this.object);
+ GameObject.setActive(instance!, true);
+ this.spawned += 1;
+ yield WaitForSeconds(this.interval / 1000);
+ }
+ }
+}If you want to code-along with the following examples without having to install anything you just click the following link:
Our web runtime engine adopts a component model similar to Unity and thus provides a lot of functionality that will feel familiar. Components attached to three's Object3D objects have lifecycle methods like awake, start, onEnable, onDisable, update and lateUpdate that you can implement. You can also use Coroutines.
Often, interactive scenes can be realized using Events in Unity and calling methods on built-in components. A typical example is playing an animation on button click - you create a button, add a Click event in the inspector, and have that call Animator.SetTrigger or similar to play a specific animation.
Needle Engine translates Unity Events into JavaScript method calls, which makes this a very fast and flexible workflow - set up your events as usual and when they're called they'll work the same as in Unity.
An example of a Button Click Event that is working out-of-the-box in Needle Engine โ no code needed.
Scripts are written in TypeScript (recommended) or JavaScript.
There are two ways to add custom scripts to your project:
src/scripts/Rotate.ts and add the following code:import { Behaviour, serializable } from "@needle-tools/engine";
+
+export class Rotate extends Behaviour
+{
+ @serializable()
+ speed : number = 1;
+
+ start(){
+ // logging this is useful for debugging in the browser.
+ // You can open the developer console (F12) to see what data your component contains
+ console.log(this);
+ }
+
+ // update will be called every frame
+ update(){
+ this.gameObject.rotateY(this.context.time.deltaTime * this.speed);
+ }
+}Now inside Unity a new script called Rotate.cs will be automatically generated. Add the new Unity component to a Cube and save the scene.
The cube is now rotating inside the browser.
Open the chrome developer console by F12 to inspect the log from the Rotate.start method. This is a helpful practice to learn and debug what fields are exported and currently assigned. In general all public and serializable fields and all public properties are exported.
Now add a new field public float speed = 5 to your Unity component and save it. The Rotate component inspector now shows a speed field that you can edit. Save the scene (or click the Build button) and note that the javascript component now has the exported speed value assigned.
import { Behaviour } from "@needle-tools/engine";
+
+export class PrintNumberComponent extends Behaviour
+{
+ start(){
+ this.printNumber(42);
+ }
+
+ private printNumber(myNumber : number){
+ console.log("My Number is: " + myNumber);
+ }
+}While generated C# components use the type name to produce stable GUIDs, we recommend checking in generated components in version control as a good practice.
Components are added to three.js Object3Ds. This is similar to how Components in Unity are added to GameObjects. Therefore when we want to access a three.js Object3D, we can access it as this.gameObject which returns the Object3D that the component is attached to.
Note: Setting visible to false on a Object3D will act like SetActive(false) in Unity - meaning it will also disable all the current components on this object and its children. Update events for inactive components are not being called until visible is set to true again. If you want to hide an object without affecting components you can just disable the Needle Engine Renderer component.
Note that lifecycle methods are only being called when they are declared. So only declare update lifecycle methods when they are actually necessary, otherwise it may hurt performance if you have many components with update loops that do nothing.
| Method name | Description |
|---|---|
awake() | First method being called when a new component is created |
onEnable() | Called when a component is enabled (e.g. when enabled changes from false to true) |
onDisable() | Called when a component is disabled (e.g. when enabled changes from true to false) |
onDestroy() | called when the Object3D or component is being destroyed |
start() | Called on the start of the first frame after the component was created |
earlyUpdate() | First update event |
update() | Default update event |
lateUpdate() | Called after update |
onBeforeRender() | Last update event before render call |
onAfterRender() | Called after render event |
| Method name | Description |
|---|---|
onCollisionEnter(col : Collision) | |
onCollisionStay(col : Collision) | |
onCollisionExit(col : Collision) | |
onTriggerEnter(col : Collision) | |
onTriggerStay(col : Collision) | |
onTriggerExit(col : Collision) |
| Method name | Description |
|---|---|
onPointerEnter(args : PointerEventData) | Called when a cursor starts to hover over an object (or any of it's children) |
onPointerMove(args : PointerEventData) | Called when a cursor moves over an object (or any of it's children) |
onPointerExit(args : PointerEventData) | Called when a cursor exists (stops hovering) an object |
onPointerDown(args : PointerEventData) | Called when a cursor is pressed over an object |
onPointerUp(args : PointerEventData) | Called when a cursor is released over an object |
onPointerClick(args : PointerEventData) | Called when a cursor is clicked over an object |
requires Needle Engine >= 3.32.0
| Method name | Description |
|---|---|
supportsXR(mode: XRSessionMode) | Optionally implement if you only want to receive XR callbacks for specific XR modes like immersive-vr or immersive-ar. Return true to notify the system that you want callbacks for the passed in mode |
onBeforeXR(mode: XRSessionMode, init: XRSessionInit) | Called right before a XRSession is requested and can be used to modify the XRSessionInit object |
onEnterXR(args: NeedleXREventArgs) | Callback when this component joins a xr session (or becomes active in a running XR session) |
onUpdateXR(args: NeedleXREventArgs) | Callback when a xr session updates (while it is still active in XR session) |
onLeaveXR(args: NeedleXREventArgs) | allback when this component exists a xr session (or when it becomes inactive in a running XR session) |
onControllerAdded(args: NeedleXRControllerEventArgs) | Callback when a controller is connected/added while in a XR session OR when the component joins a running XR session that has already connected controllers OR when the component becomes active during a running XR session that has already connected controllers |
onControllerRemoved(args: NeedleXRControllerEventArgs) | callback when a controller is removed while in a XR session OR when the component becomes inactive during a running XR session |
| Method name | Description |
|---|---|
window.addEventListener("needle-xrsession-start") | CustomEvent that is invoked when a XRSession starts. details contains the NeedleXRSession |
window.addEventListener("needle-xrsession-end") | CustomEvent that is invoked when a XRSession starts. details contains the NeedleXRSession |
onXRSessionStart(args: { session:NeedleXRSession } ) | global event hook. To unsubscribe use offXRSessionStart |
Coroutines can be declared using the JavaScript Generator Syntax.
To start a coroutine, call this.startCoroutine(this.myRoutineName());
Example
import { Behaviour, FrameEvent } from "@needle-tools/engine";
+
+export class Rotate extends Behaviour {
+
+ start() {
+ // the second argument is optional and allows you to specifiy
+ // when it should be called in the current frame loop
+ // coroutine events are called after regular component events of the same name
+ // for example: Update coroutine events are called after component.update() functions
+ this.startCoroutine(this.rotate(), FrameEvent.Update);
+ }
+
+ // this method is called every frame until the component is disabled
+ *rotate() {
+ // keep looping forever
+ while (true) {
+ yield;
+ }
+ }
+}To stop a coroutine, either exit the routine by returning from it, or cache the return value of startCoroutine and call this.stopCoroutine(<...>). All Coroutines are stopped at onDisable / when disabling a component.
Needle Engine also exposes a few lifecycle hooks that you can use to hook into the update loop without having to write a full component.
Those hooks can be inserted at any point in your web application (for example in toplevel scope or in a svelte component)
| Method name | Description |
|---|---|
onInitialized(cb, options) | Called when a new context is initialized (before the first frame) |
onClear(cb, options) | Register a callback before the engine context is cleared |
onDestroy(cb, options) | Register a callback in the engine before the context is destroyed |
onStart(cb, options) | Called directly after components start at the beginning of a frame |
onUpdate(cb, options) | Called directly after components update |
onBeforeRender(cb, options) | called before calling render |
onAfterRender(cb, options) | called before calling render |
For example (See example on stackblitz)
// this can be put into e.g. main.ts or a svelte component (similar to onMount)
+import { Context, onUpdate, onBeforeRender, onAfterRender } from "@needle-tools/engine"
+onUpdate((ctx: Context) => {
+ // do something... e.g. access the scene via ctx.scene
+ console.log("UPDATE", ctx.time.frame);
+});
+
+onBeforeRender((ctx: Context) => {
+ // this event is only called once because of the { once: true } argument
+ console.log("ON BEFORE RENDER", ctx.time.frame);
+}, { once: true } );
+
+// Every event hook returns a method to unsubscribe from the event
+const unsubscribe = onAfterRender((ctx: Context) => {
+ console.log("ON AFTER RENDER", ctx.time.frame);
+});
+// Unsubscribe from the event at any time
+setTimeout(()=> unsubscribe(), 1000);To access other components, use the static methods on GameObject or this.gameObject methods. For example, to access a Renderer component in the parent use GameObject.getComponentInParent(this.gameObject, Renderer) or this.gameObject.getComponentInParent(Renderer).
Example:
import { Behaviour, GameObject, Renderer } from "@needle-tools/engine";
+
+export class MyComponent extends Behaviour {
+
+ start() {
+ const renderer = GameObject.getComponentInParent(this.gameObject, Renderer);
+ console.log(renderer);
+ }
+}| Method | |
|---|---|
GameObject.instantiate(Object3D, InstantiateOptions) | creates a new instance of this object including new instances of all its components |
GameObject.destroy(Object3D | Component) | destroy a component or Object3D (and its components) |
GameObject.addNewComponent(Object3D, Type) | adds (and creates) a new component for a type to the provided object. Note that awake and onEnable is already called when the component is returned |
GameObject.addComponent(Object3D, Component) | moves a component instance to the provided object. It is useful if you already have an instance e.g. when you create a component with e.g. new MyComponent() and then attach it to a object |
GameObject.removeComponent(Component) | removes a component from a gameObject |
GameObject.getComponent(Object3D, Type) | returns the first component matching a type on the provided object. |
GameObject.getComponents(Object3D, Type) | returns all components matching a type on the provided object. |
GameObject.getComponentInChildren | same as getComponent but also searches in child objects. |
GameObject.getComponentsInChildren | same as getComponents but also searches in child objects. |
GameObject.getComponentInParent | same as getComponent but also searches in parent objects. |
GameObject.getComponentsInParent | same as getComponents but also searches in parent objects. |
GameObject.findObjectOfType | searches the whole scene for a type. |
GameObject.findObjectsOfType | searches the whole scene for all matching types. |
The context refers to the runtime inside a web component.
The three.js scene lives inside a custom HTML component called <needle-engine> (see the index.html in your project). You can access the <needle-engine> web component using this.context.domElement.
This architecture allows for potentially having multiple needle WebGL scenes on the same webpage, that can either run on their own or communicate between each other as parts of your webpage.
To access the current scene from a component you use this.scene which is equivalent to this.context.scene, this gives you the root three.js scene object.
To traverse the hierarchy from a component you can either iterate over the children of an object
with a for loop:
for(let i = 0; i < this.gameObject.children; i++)
+ console.log(this.gameObject.children[i]);or you can iterate using the foreach equivalent:
for(const child of this.gameObject.children) {
+ console.log(child);
+}You can also use three.js specific methods to quickly iterate all objects recursively using the traverse method:
import { Object3D } from "three";
+this.gameObject.traverse((obj: Object3D) => console.log(obj));or to just traverse visible objects use traverseVisible instead.
Another option that is quite useful when you just want to iterate objects being renderable you can query all renderer components and iterate over them like so:
import { Renderer } from "@needle-tools/engine";
+for(const renderer of this.gameObject.getComponentsInChildren(Renderer))
+ console.log(renderer);For more information about getting components see the next section.
Use this.context.time to get access to time data:
this.context.time.time is the time since the application started runningthis.context.time.deltaTime is the time that has passed since the last framethis.context.time.frameCount is the number of frames that have passed since the application startedthis.context.time.realtimeSinceStartup is the unscaled time since the application has started runningIt is also possible to use this.context.time.timeScale to deliberately slow down time for e.g. slow motion effects.
Receive input data for the object the component is on:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ onPointerDown() {
+ console.log("POINTER DOWN on " + this.gameObject.name);
+ }
+}You can also subscribe to global events in the InputEvents enum like so:
import { Behaviour, InputEvents, NEPointerEvent } from "@needle-tools/engine";
+
+export class MyScript extends Behaviour
+{
+ onEnable() {
+ this.context.input.addEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+
+ onDisable() {
+ // it is recommended to also unsubscribe from events when your component becomes inactive
+ this.context.input.removeEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+
+ // @nonSerialized
+ inputPointerDown = (evt: NEPointerEvent) => { console.log("POINTER DOWN anywhere on the <needle-engine> element"); }
+}Or use this.context.input if you want to poll input state every frame:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ update() {
+ if(this.context.input.getPointerDown(0)){
+ console.log("POINTER DOWN anywhere")
+ }
+ }
+}If you want to handle inputs yourself you can also subscribe to all events the browser provides (there are a ton). For example to subscribe to the browsers click event you can write:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ onEnable() {
+ window.addEventListener("click", this.windowClick);
+ }
+
+ onDisable() {
+ // unsubscribe again when the component is disabled
+ window.removeEventListener("click", this.windowClick);
+ }
+
+ windowClick = () => { console.log("CLICK anywhere on the page, not just on <needle-engine>"); }
+}Note that in this case you have to handle all cases yourself. For example you may need to use different events if your user is visiting your website on desktop vs mobile vs a VR device. These cases are automatically handled by the Needle Engine input events (e.g. PointerDown is raised both for mouse down, touch down and in case of VR on controller button down).
Use this.context.physics.raycast() to perform a raycast and get a list of intersections. If you dont pass in any options the raycast is performed from the mouse position (or first touch position) in screenspace using the currently active mainCamera. You can also pass in a RaycastOptions object that has various settings like maxDistance, the camera to be used or the layers to be tested against.
Use this.context.physics.raycastFromRay(your_ray) to perform a raycast using a three.js ray
Note that the calls above are by default raycasting against visible scene objects. That is different to Unity where you always need colliders to hit objects. The default three.js solution has both pros and cons where one major con is that it can perform quite slow depending on your scene geometry. It may be especially slow when raycasting against skinned meshes. It is therefor recommended to usually set objects with SkinnedMeshRenderers in Unity to the Ignore Raycast layer which will then be ignored by default by Needle Engine as well.
Another option is to use the physics raycast methods which will only return hits with colliders in the scene.
const hit = this.context.physics.engine?.raycast();Here is a editable example for physics raycast
It is possible to access all the functionality described above using regular JavaScript code that is not inside components and lives somewhere else. All the components and functionality of the needle runtime is accessible via the global Needle namespace (you can write console.log(Needle) to get an overview)
You can find components using Needle.findObjectOfType(Needle.AudioSource) for example. It is recommended to cache those references, as searching the whole scene repeatedly is expensive. See the list for finding adding and removing components above.
For getting callbacks for the initial scene load see the following example:
<needle-engine loadstart="loadingStarted" progress="loadingProgress" loadfinished="loadingFinished"></needle-engine>
+
+<script type="text/javascript">
+function loadingStarted() { console.log("START") }
+function loadingProgress() { console.log("LOADING...") }
+function loadingFinished() { console.log("FINISHED!") }
+</script>You can also subscribe to the globale NeedleEngine (sometimes also referred to as ContextRegistry) to receive a callback when a Needle Engine context has been created or to access all available contexts:
class YourComponentType extends Behaviour {}
+//---cut---
+import { NeedleEngine, GameObject, Behaviour } from "@needle-tools/engine";
+
+NeedleEngine.addContextCreatedCallback((args) => {
+ const context = args.context;
+ const scene = context.scene;
+ const myInstance = GameObject.getComponentInChildren(scene, YourComponentType);
+});Another option is using the onInitialized(ctx => {}) lifecycle hook
You can also access all available contexts via NeedleEngine.Registered which returns the internal array. (Note that this array should not be modified but can be used to iterate all active contexts to modify settings, e.g. set all contexts to context.isPaused = true)
Below you find a list of available events on the static NeedleEngine type.
You can subscribe to those events via NeedleEngine.registerCallback(ContextEvent.ContextCreated, (args) => {})
| ContextEvent options | |
|---|---|
ContextEvent.ContextRegistered | Called when the context is registered to the registry. |
ContextEvent.ContextCreationStart | Called before the first glb is loaded and can be used to initialize the physics engine. Can return a promise |
ContextEvent.ContextCreated | Called when the context has been created before the first frame |
ContextEvent.ContextDestroyed | Called when the context has been destroyed |
ContextEvent.MissingCamera | Called when the context could not find a camera, currently only called during creation |
ContextEvent.ContextClearing | Called when the context is being cleared: all objects in the scene are being destroyed and internal state is reset |
ContextEvent.ContextCleared | Called after the context has been cleared |
The static Gizmos class can be used to draw lines, shapes and text which is mostly useful for debugging.
All gizmos function have multiple options for e.g. colors or for how long they should be displayed in the scene. Internally they are cached and re-used.
| Gizmos | |
|---|---|
Gizmos.DrawLabel | Draws a label with a background optionally. It can be attached to an object. Returns a Label handle which can be used to update the text. |
Gizmos.DrawRay | Takes an origin and direction in worldspace to draw an infinite ray line |
Gizmos.DrawDirection | Takes a origin and direction to draw a direction in worldspace |
Gizmos.DrawLine | Takes two vec3 worldspace points to draw a line |
Gizmos.DrawWireSphere | Draws a wireframe sphere in worldspace |
Gizmos.DrawSphere | Draws a solid sphere in worldspace |
Gizmos.DrawWireBox | Draws a wireframe box in worldspace |
Gizmos.DrawWireBox3 | Draws a wireframe box3 |
Gizmos.DrawArrow | Draws an arrow taking two points in worldspace |
To embed components and recreate components with their correct types in glTF, we also need to save non-primitive types (everything that is not a Number, Boolean or String). You can do so is adding a @serializable(<type>) decorator above your field or property.
Example:
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Object3D } from "three"
+
+export class MyClass extends Behaviour {
+ // this will be a "Transform" field in Unity
+ @serializable(Object3D)
+ myObjectReference: Object3D | null = null;
+
+ // this will be a "Transform" array field in Unity
+ // Note that the @serializable decorator contains the array content type! (Object3D and not Object3D[])
+ @serializable(Object3D)
+ myObjectReferenceList: Object3D[] | null = null;
+}To serialize from and to custom formats, it is possible to extend from the TypeSerializer class and create an instance. Use super() in the constructor to register supported types.
Note: In addition to matching fields, matching properties will also be exported when they match to fields in the typescript file.
These exported gltf files will be serialized as plain string URIs. To simplify loading these from TypeScript components, we added the concept of AssetReference types. They can be loaded at runtime and thus allow to defer loading parts of your app or loading external content.
Example:
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since \`\`instantiate()\`\` does create a copy of the asset after loading it
+ }
+}AssetReferences are cached by URI, so if you reference the same exported glTF/Prefab in multiple components/scripts it will only be loaded once and then re-used.
`,4))])}const C=h(r,[["render",c],["__file","scripting.html.vue"]]),F=JSON.parse(`{"path":"/scripting.html","title":"Creating and using Components","lang":"en-US","frontmatter":{"title":"Creating and using Components","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/creating and using components.png"}],["meta",{"name":"og:description","content":"---\\nIf you are new to scripting we recommend reading the following guides first:"}]],"description":"---\\nIf you are new to scripting we recommend reading the following guides first:"},"headers":[{"level":2,"title":"When you don't need to write code","slug":"when-you-don-t-need-to-write-code","link":"#when-you-don-t-need-to-write-code","children":[]},{"level":2,"title":"Creating a new component","slug":"creating-a-new-component","link":"#creating-a-new-component","children":[]},{"level":2,"title":"Component architecture","slug":"component-architecture","link":"#component-architecture","children":[{"level":3,"title":"Lifecycle methods","slug":"lifecycle-methods","link":"#lifecycle-methods","children":[]},{"level":3,"title":"Physic event methods","slug":"physic-event-methods","link":"#physic-event-methods","children":[]},{"level":3,"title":"Input event methods","slug":"input-event-methods","link":"#input-event-methods","children":[]},{"level":3,"title":"XR event methods","slug":"xr-event-methods","link":"#xr-event-methods","children":[]},{"level":3,"title":"Coroutines","slug":"coroutines","link":"#coroutines","children":[]}]},{"level":2,"title":"Special Lifecycle hooks","slug":"special-lifecycle-hooks","link":"#special-lifecycle-hooks","children":[]},{"level":2,"title":"Finding, adding and removing components","slug":"finding-adding-and-removing-components","link":"#finding-adding-and-removing-components","children":[{"level":3,"title":"Some of the available methods:","slug":"some-of-the-available-methods","link":"#some-of-the-available-methods","children":[]}]},{"level":2,"title":"Three.js and the HTML DOM","slug":"three.js-and-the-html-dom","link":"#three.js-and-the-html-dom","children":[{"level":3,"title":"Access the scene","slug":"access-the-scene","link":"#access-the-scene","children":[]},{"level":3,"title":"Time","slug":"time","link":"#time","children":[]},{"level":3,"title":"Input","slug":"input","link":"#input","children":[]},{"level":3,"title":"Physics","slug":"physics","link":"#physics","children":[]},{"level":3,"title":"Networking","slug":"networking","link":"#networking","children":[]}]},{"level":2,"title":"Accessing Needle Engine and components from anywhere","slug":"accessing-needle-engine-and-components-from-anywhere","link":"#accessing-needle-engine-and-components-from-anywhere","children":[]},{"level":2,"title":"Gizmos","slug":"gizmos","link":"#gizmos","children":[]},{"level":2,"title":"Serialization / Components in glTF files","slug":"serialization-components-in-gltf-files","link":"#serialization-components-in-gltf-files","children":[]},{"level":2,"title":"Loading Scenes","slug":"loading-scenes","link":"#loading-scenes","children":[]}],"git":{"updatedTime":1726585195000},"filePathRelative":"scripting.md"}`);export{C as comp,F as data}; diff --git a/assets/set-fallback-material-for-usdz-exporter.html-BEiyoRdx.js b/assets/set-fallback-material-for-usdz-exporter.html-BEiyoRdx.js new file mode 100644 index 000000000..f58161232 --- /dev/null +++ b/assets/set-fallback-material-for-usdz-exporter.html-BEiyoRdx.js @@ -0,0 +1,45 @@ +import{_ as t,r as n,o as l,c as h,a as i,b as k,e}from"./app-CRZRGfEE.js";const p={};function r(d,s){const a=n("contribution-header");return l(),h("div",null,[s[0]||(s[0]=i("p",null,[i("a",{href:"/docs/community/contributions"},"Overview")],-1)),k(a,{url:"https://github.com/llllkatjallll",author:"llllkatjallll",page:"/docs/community/contributions/llllkatjallll",profileImage:"https://avatars.githubusercontent.com/u/38395689?s=100&u=7ce0fef973c4819c4f07823568d6f6061abfe410&v=4",githubUrl:"https://github.com/needle-tools/needle-engine-support/discussions/184",title:"Set fallback material for USDZ exporter",gradient:"True"}),s[1]||(s[1]=e(`If you want to set a fallback material for an object that will be exported as USDZ (for AR-mode on iOS), you can add this script to the object, which material should be replaced.
This is especially useful if you use custom shaders in your scene (they are visible on Desktop+WebXR, but not in AR on iOS).
import { Behaviour, GameObject, Renderer, USDZExporter, serializable } from "@needle-tools/engine";
+import { Material, Object3D } from "three";
+
+export class FallbackMaterial extends Behaviour {
+
+ @serializable(Material)
+ fallbackMaterial!: Material;
+
+ private originalMaterial?: Material;
+ private usdzExporter!: USDZExporter;
+
+ onEnable() {
+ this.usdzExporter = GameObject.findObjectOfType(USDZExporter)!;
+ this.subscribeToBeforeExportEvent();
+ }
+
+ onDisable() {
+ this.unsubscribeFromBeforeExportEvent();
+ }
+
+ private subscribeToBeforeExportEvent() {
+ this.usdzExporter.addEventListener("before-export", this.onBeforeExport);
+ this.usdzExporter.addEventListener("after-export", this.onAfterExport);
+ }
+
+ private unsubscribeFromBeforeExportEvent() {
+ this.usdzExporter.removeEventListener("before-export", this.onBeforeExport);
+ this.usdzExporter.removeEventListener("after-export", this.onAfterExport);
+ }
+
+
+ onBeforeExport = () => {
+ console.log("onBeforeExport");
+ const renderer = this.gameObject.getComponent(Renderer)!;
+ this.originalMaterial = renderer.sharedMaterial;
+ renderer.sharedMaterial = this.fallbackMaterial;
+
+ }
+
+ onAfterExport = () => {
+ console.log("onAfterExport");
+ const renderer = this.gameObject.getComponent(Renderer)!;
+ renderer.sharedMaterial = this.originalMaterial;
+ }
+}Build your own castle! Drag 3D models from the various palettes onto the stage, and create your very own world. Works on Desktop, Mobile, VR, AR, all right in your browser. Interactions are currently optimized for VR; placement on screens is a bit harder but possible. Have fun, no matter which device you're on!
Invite your friends! Click Create Room to be put into a live, multi-user space โ just copy the URL, send it to a friend and they join you automatically. There's currently a max limit for "users online at the same time" - if you don't get into a room, please try later.
This page was authored in Unity and exported to three.js using tools and technologies by ๐ต needle.
There are a lot of open technologies involved: 3D models are in glTF format, the render engine is three.js, VR and AR are using WebXR. The networking server runs on Glitch, and audio is sent over WebRTC using PeerJS.
',7))])}const p=a(c,[["render",d],["__file","showcase-castle.html.vue"]]),m=JSON.parse(`{"path":"/showcase-castle.html","title":"Castle Builder ๐ฐ","lang":"en-US","frontmatter":{"lang":"en-US","title":"Castle Builder ๐ฐ","sidebar":false,"editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/castle builder.png"}],["meta",{"name":"og:description","content":"---\\nVisit website\\nBuild your own castle! Drag 3D models from the various palettes onto the stage, and create your very own world.\\nWorks on Desktop, Mobile, VR, AR, all right in your browser. Interactions are currently optimized for VR; placement on screens is a bit harder but possible. Have fun, no matter which device you're on!\\nInvite your friends! Click Create Room to be put into a live, multi-user space โ just copy the URL, send it to a friend and they join you automatically.\\nThere's currently a max limit for 'users online at the same time'"}]],"description":"---\\nVisit website\\nBuild your own castle! Drag 3D models from the various palettes onto the stage, and create your very own world.\\nWorks on Desktop, Mobile, VR, AR, all right in your browser. Interactions are currently optimized for VR; placement on screens is a bit harder but possible. Have fun, no matter which device you're on!\\nInvite your friends! Click Create Room to be put into a live, multi-user space โ just copy the URL, send it to a friend and they join you automatically.\\nThere's currently a max limit for 'users online at the same time'"},"headers":[{"level":3,"title":"Live","slug":"live","link":"#live","children":[]},{"level":3,"title":"How To Play","slug":"how-to-play","link":"#how-to-play","children":[]},{"level":3,"title":"Info","slug":"info","link":"#info","children":[]}],"git":{"updatedTime":1669763662000},"filePathRelative":"showcase-castle.md"}`);export{p as comp,m as data}; diff --git a/assets/showcase-mercedes-benz.html-CYMbPrd8.js b/assets/showcase-mercedes-benz.html-CYMbPrd8.js new file mode 100644 index 000000000..d6dbcc4ed --- /dev/null +++ b/assets/showcase-mercedes-benz.html-CYMbPrd8.js @@ -0,0 +1,29 @@ +import{_ as t,r as n,o as h,c as l,a as s,d as e,b as p,e as r}from"./app-CRZRGfEE.js";const o="/docs/showcase-mercedes/1_skybox.png",d="/docs/showcase-mercedes/2_paintjob_simple.jpg",k="/docs/showcase-mercedes/3_SpecularHighlights_off.jpg",c="/docs/showcase-mercedes/4_SpecularHighlights_on.jpg",g="/docs/showcase-mercedes/5_NoBackground.jpg",y="/docs/showcase-mercedes/6_MapBackground.png",m="/docs/showcase-mercedes/7_EnvShaderGraph.jpg",u="/docs/showcase-mercedes/8_Gradiant.png",w="/docs/showcase-mercedes/9_Rotator.png",C="/docs/showcase-mercedes/10_WheelsAndGrid.png",b="/docs/showcase-mercedes/11_GridShader.jpg",f="/docs/showcase-mercedes/12_WheelWithText.png",F="/docs/showcase-mercedes/13_WheelShader.jpg",E="/docs/showcase-mercedes/14_RearUI.jpg",B={};function v(x,i){const a=n("sample");return h(),l("div",null,[i[0]||(i[0]=s("h2",{id:"about",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#about"},[s("span",null,"About")])],-1)),i[1]||(i[1]=s("p",null,[e("Hello, my name is Kryลกtof and i did a research project about Needle. At "),s("a",{href:"https://www.ishowroom.cz/home/",target:"_blank",rel:"noopener noreferrer"},"our company"),e(", we wanted to determine how Needle can help us in our workflow. We have one local client which focuses on reselling luxury cars. We already delivered a mobile app and VR experience using Unity. We have around 30 unique cars ready in the engine. We plan to expand the client's website with visually pleasing digital clones with more configuration options. Needle could achieve a perfect 1:1 conversion between unity and web visuals. It would be a massive benefit to our workflow. So that's what sparked our research.")],-1)),p(a,{src:"https://engine.needle.tools/demos/mercedes-benz-demo/"}),i[2]||(i[2]=r('I'm not very well experienced with javascript, typescript or three.js, so my point of view is as a semi-experienced Unity developer trying out the simplest way how to create a web experience. For those who would suggest Unity WebGL, that sadly doesn't work and isn't flexible on mobile browsers. Needle is ๐
Our lighting model is based on reflection probes in unity. We do not need any directional or point lights, only ambient lighting.
We're using this skybox:
Which looks like this on the paint job:
Then to add a slight detail, i've added 2 directional lights with an insignificant intensity (0.04) to create specular highlights. So before it looked like this:
But with the added directional lights it added a better dynamic. The effect could be deepened with higher intensity:
The scene now looks like this:
The black background isn't very pretty. So to differentiate between visual and lighting skyboxes i've added an inverse sphere which wraps the whole map.
Regarding the gradient goes from a slight gray to a white color..
This effect could be easily made with just a proper UV mapping and a single pixel high texture which would define the gradient.
I've made an unlit shader in the shader graph:
I've noticed a color banding issue, so i've tried to implement dithering. Frankly, it didn't help the artefacts but i bet there's a simple solution to that issue. So the upper part of the shader does sample the gradient based on the Y axis in object space. And the lower part tries to negate the color banding.
By using shaders it's simpler to use and iterate the gradiant. By using Needle's Shadergraph markdown asset, it's even simpler! ๐ต
The scene right now is static since nothing moves. We can negate that by adding a fake feeling of motion. Let's start by adding motion to the wheels.
With a simple component called Rotator, we define an axis and speed along it.
import { Behaviour, serializable } from "@needle-tools/engine";
+
+export enum RotationAxis {
+ X, Y, Z
+}
+
+export class Rotator extends Behaviour {
+ //@type RotationAxis
+ @serializable()
+ axis : RotationAxis = RotationAxis.X;
+
+ @serializable()
+ speed : number = 1;
+
+ update() {
+ const angle = this.speed * this.context.time.deltaTime;
+ switch(this.axis) {
+ case RotationAxis.X:
+ this.gameObject.rotateX(angle);
+ break;
+ case RotationAxis.Y:
+ this.gameObject.rotateY(angle);
+ break;
+ case RotationAxis.Z:
+ this.gameObject.rotateZ(angle);
+ break;
+ }
+ }
+}The user now sees a car driving in deep nothingness, the color doesn't resemble anything and the experience is dull. We want to ground the model and that's done by adding a grid and then shifting it so it seems the car is moving. This is what we want to achieve:
The shader for the grid was comprised of two parts. A simple tiled texture of the grid that's being multipled by a circular gradient to make the edges fade off.
This tech demo takes it's goal to showcase the car's capabilities.
Let's start by highlighting the wheels.
Adding this shader to a plane will result in a dashed circle which is rotating by a defined speed. Combined with world space UI with a normal Text component this can highlight some interesting capabilities or parameters of the given product.
After showcasing the wheels we want to finish with a broad information about the product. In this case, that would be the car's full name and perhaps some available configurations.
By using the Unity's timeline we can control when the wheel dashes and text will be shown. This is complemented by the camera animation.
Needle Engine seems to be a very good candidate for us!
There are a few features which we miss.
That would be for example proper support for the Lit Shader Graphs. But nothing stops us to create shaders the three.js way and create simmilar shaders in Unity for our content team to tweak the materials.
Using Needle was a blast! ๐ต
',48))])}const A=t(B,[["render",v],["__file","showcase-mercedes-benz.html.vue"]]),D=JSON.parse(`{"path":"/showcase-mercedes-benz.html","title":"Mercedes-Benz Showcase","lang":"en-US","frontmatter":{"lang":"en-US","title":"Mercedes-Benz Showcase","editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/mercedes benz showcase.png"}],["meta",{"name":"og:description","content":"---\\nHello, my name is Kryลกtof and i did a research project about Needle. At our company, we wanted to determine how Needle can help us in our workflow. We have one local client which focuses on reselling luxury cars. We already delivered a mobile app and VR experience using Unity. We have around 30 unique cars ready in the engine. We plan to expand the client's website with visually pleasing digital clones with more configuration options. Needle could achieve a perfect 1:1 conversion between unity and web visuals. It would be a massive benefit to our workflow. So that's what sparked our research.\\nI'm not very well experienced with javascript, typescript or three.js, so my point of view is as a semi-experienced Unity developer trying out the simplest way how to create a web experience. For those who would suggest Unity WebGL, that sadly doesn't work and isn't flexible on mobile browsers. Needle is ๐\\nOur lighting model is based on reflection probes in unity. We do not need any directional or point lights, only ambient lighting.\\nWe're using this skybox:\\nWhich looks like this on the paint job:\\nThen to add a slight detail, i've added 2 directional lights with an insignificant intensity (0.04) to create specular highlights. So before it looked like this:\\nBut with the added directional lights it added a better dynamic. The effect could be deepened with higher intensity:\\nThe scene now looks like this:\\nThe black background isn't very pretty. So to differentiate b"}]],"description":"---\\nHello, my name is Kryลกtof and i did a research project about Needle. At our company, we wanted to determine how Needle can help us in our workflow. We have one local client which focuses on reselling luxury cars. We already delivered a mobile app and VR experience using Unity. We have around 30 unique cars ready in the engine. We plan to expand the client's website with visually pleasing digital clones with more configuration options. Needle could achieve a perfect 1:1 conversion between unity and web visuals. It would be a massive benefit to our workflow. So that's what sparked our research.\\nI'm not very well experienced with javascript, typescript or three.js, so my point of view is as a semi-experienced Unity developer trying out the simplest way how to create a web experience. For those who would suggest Unity WebGL, that sadly doesn't work and isn't flexible on mobile browsers. Needle is ๐\\nOur lighting model is based on reflection probes in unity. We do not need any directional or point lights, only ambient lighting.\\nWe're using this skybox:\\nWhich looks like this on the paint job:\\nThen to add a slight detail, i've added 2 directional lights with an insignificant intensity (0.04) to create specular highlights. So before it looked like this:\\nBut with the added directional lights it added a better dynamic. The effect could be deepened with higher intensity:\\nThe scene now looks like this:\\nThe black background isn't very pretty. So to differentiate b"},"headers":[{"level":2,"title":"About","slug":"about","link":"#about","children":[]},{"level":2,"title":"Context","slug":"context","link":"#context","children":[]},{"level":2,"title":"Lighting","slug":"lighting","link":"#lighting","children":[]},{"level":2,"title":"Background","slug":"background","link":"#background","children":[]},{"level":2,"title":"Car fake movement","slug":"car-fake-movement","link":"#car-fake-movement","children":[]},{"level":2,"title":"Extra elements","slug":"extra-elements","link":"#extra-elements","children":[]},{"level":2,"title":"Wrap up","slug":"wrap-up","link":"#wrap-up","children":[]},{"level":2,"title":"Conclusion","slug":"conclusion","link":"#conclusion","children":[]}],"git":{"updatedTime":1726585195000},"filePathRelative":"showcase-mercedes-benz.md"}`);export{A as comp,D as data}; diff --git a/assets/showcase-monsterhands.html-Cjm5xxr6.js b/assets/showcase-monsterhands.html-Cjm5xxr6.js new file mode 100644 index 000000000..50575c601 --- /dev/null +++ b/assets/showcase-monsterhands.html-Cjm5xxr6.js @@ -0,0 +1 @@ +import{_ as n,r as a,o,c as r,a as e,b as l}from"./app-CRZRGfEE.js";const i={};function d(m,t){const s=a("sample");return o(),r("div",null,[t[0]||(t[0]=e("h3",{id:"live",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#live"},[e("span",null,"Live")])],-1)),l(s,{src:"https://monster-hands.needle.tools/"}),t[1]||(t[1]=e("p",null,[e("a",{href:"https://monster-hands.needle.tools/",target:"_blank",rel:"noopener noreferrer"},"Visit website")],-1))])}const h=n(i,[["render",d],["__file","showcase-monsterhands.html.vue"]]),p=JSON.parse('{"path":"/showcase-monsterhands.html","title":"Monster Hands ๐","lang":"en-US","frontmatter":{"lang":"en-US","title":"Monster Hands ๐","sidebar":false,"editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/monster hands.png"}],["meta",{"name":"og:description","content":"---\\nVisit website"}]],"description":"---\\nVisit website"},"headers":[{"level":3,"title":"Live","slug":"live","link":"#live","children":[]}],"git":{"updatedTime":1682497626000},"filePathRelative":"showcase-monsterhands.md"}');export{h as comp,p as data}; diff --git a/assets/showcase-towerdefence.html-B-3p76-5.js b/assets/showcase-towerdefence.html-B-3p76-5.js new file mode 100644 index 000000000..33bdfecae --- /dev/null +++ b/assets/showcase-towerdefence.html-B-3p76-5.js @@ -0,0 +1 @@ +import{_ as s,r as o,o as a,c as i,a as e,b as l}from"./app-CRZRGfEE.js";const r={};function d(c,t){const n=o("sample");return a(),i("div",null,[t[0]||(t[0]=e("h3",{id:"live",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#live"},[e("span",null,"Live")])],-1)),l(n,{src:"https://v6p9d9t4.ssl.hwcdn.net/html/7746989/index.html"}),t[1]||(t[1]=e("p",null,[e("a",{href:"https://willitaugment.itch.io/tumbleweed-defender",target:"_blank",rel:"noopener noreferrer"},"Visit website")],-1))])}const p=s(r,[["render",d],["__file","showcase-towerdefence.html.vue"]]),f=JSON.parse('{"path":"/showcase-towerdefence.html","title":"Tower Defense","lang":"en-US","frontmatter":{"lang":"en-US","title":"Tower Defense","sidebar":false,"editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/tower defense.png"}],["meta",{"name":"og:description","content":"---\\nVisit website"}]],"description":"---\\nVisit website"},"headers":[{"level":3,"title":"Live","slug":"live","link":"#live","children":[]}],"git":{"updatedTime":1684592760000},"filePathRelative":"showcase-towerdefence.md"}');export{p as comp,f as data}; diff --git a/assets/showcase-website.html-DsWtTfPo.js b/assets/showcase-website.html-DsWtTfPo.js new file mode 100644 index 000000000..1e69d4afd --- /dev/null +++ b/assets/showcase-website.html-DsWtTfPo.js @@ -0,0 +1 @@ +import{_ as n,r as l,o as a,c as i,a as e,b as o}from"./app-CRZRGfEE.js";const r={};function d(c,t){const s=l("sample");return a(),i("div",null,[t[0]||(t[0]=e("h3",{id:"live",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#live"},[e("span",null,"Live")])],-1)),o(s,{src:"https://needle.tools"}),t[1]||(t[1]=e("p",null,[e("a",{href:"https://needle.tools",target:"_blank",rel:"noopener noreferrer"},"Visit website")],-1))])}const m=n(r,[["render",d],["__file","showcase-website.html.vue"]]),h=JSON.parse('{"path":"/showcase-website.html","title":"Castle Builder ๐ฐ","lang":"en-US","frontmatter":{"lang":"en-US","title":"Castle Builder ๐ฐ","sidebar":false,"editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/castle builder.png"}],["meta",{"name":"og:description","content":"---\\nVisit website"}]],"description":"---\\nVisit website"},"headers":[{"level":3,"title":"Live","slug":"live","link":"#live","children":[]}],"git":{"updatedTime":1669763662000},"filePathRelative":"showcase-website.md"}');export{m as comp,h as data}; diff --git a/assets/showcase-zenrepublic.html-C8fRcD0r.js b/assets/showcase-zenrepublic.html-C8fRcD0r.js new file mode 100644 index 000000000..61d1d5832 --- /dev/null +++ b/assets/showcase-zenrepublic.html-C8fRcD0r.js @@ -0,0 +1 @@ +import{_ as s,r as a,o as i,c as l,a as e,b as r}from"./app-CRZRGfEE.js";const o={};function c(p,t){const n=a("sample");return i(),l("div",null,[t[0]||(t[0]=e("h3",{id:"live",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#live"},[e("span",null,"Live")])],-1)),r(n,{src:"https://zenrepublic.space/?realm=3"}),t[1]||(t[1]=e("p",null,[e("a",{href:"https://zenrepublic.space/?realm=3",target:"_blank",rel:"noopener noreferrer"},"Visit website")],-1))])}const m=s(o,[["render",c],["__file","showcase-zenrepublic.html.vue"]]),h=JSON.parse('{"path":"/showcase-zenrepublic.html","title":"Monster Hands ๐","lang":"en-US","frontmatter":{"lang":"en-US","title":"Monster Hands ๐","sidebar":false,"editLink":false,"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/monster hands.png"}],["meta",{"name":"og:description","content":"---\\nVisit website"}]],"description":"---\\nVisit website"},"headers":[{"level":3,"title":"Live","slug":"live","link":"#live","children":[]}],"git":{"updatedTime":1682497626000},"filePathRelative":"showcase-zenrepublic.md"}');export{m as comp,h as data}; diff --git a/assets/squeeze-to-scale-object-or-world-in-vr.html-C2ATGHYY.js b/assets/squeeze-to-scale-object-or-world-in-vr.html-C2ATGHYY.js new file mode 100644 index 000000000..1232c19fa --- /dev/null +++ b/assets/squeeze-to-scale-object-or-world-in-vr.html-C2ATGHYY.js @@ -0,0 +1,249 @@ +import{_ as n,r as h,o as k,c as l,a as i,b as t,e as p}from"./app-CRZRGfEE.js";const e={};function r(C,s){const a=h("contribution-header");return k(),l("div",null,[s[0]||(s[0]=i("p",null,[i("a",{href:"/docs/community/contributions"},"Overview")],-1)),t(a,{url:"https://github.com/Web3Kev",author:"Web3Kev",page:"/docs/community/contributions/web3kev",profileImage:"https://avatars.githubusercontent.com/u/106066970?s=100&v=4",githubUrl:"https://github.com/needle-tools/needle-engine-support/discussions/159",title:"Squeeze to Scale (Object or World) in VR",gradient:"True"}),s[1]||(s[1]=p(`The following code enables you to use both controllers in VR (tested on Quest) and scale the player's perspective (XRRig) by squeezing the grab triggers and moving the controllers closer (pinch out) or further apart (pinch in). The boolean allowWorldScaling has to be ticked in unity for that to work.
Upon selecting a draggable object (Drag controls script), the player can scale up or down that object, while keeping the finger on the trigger and squeezing both grab buttons and moving the hands closer or apart.
The current script enables you to visually see the scale. Create a world canvas with a text component as a child. Assign the world canvas to scaleTextObject and the text to scaleText. scaleTextObject will then spawn in front of the player and follow the head movement whenever scaling.
At the moment the position of the hands (controllers) is done by finding the avatar's hands. I couldn't make it work otherwise. If you find a better way please share.
import { Behaviour, WebXR,serializeable, WebXREvent,WebXRAvatar,GameObject, AvatarMarker,Text} from "@needle-tools/engine";
+import { Object3D, Vector3,Quaternion,PerspectiveCamera} from "three";
+
+export class SqueezeScale extends Behaviour {
+
+
+ private webXR?: WebXR;
+
+ private selectedObj: Object3D| null = null;
+
+ @serializeable(Object3D)
+ scaleTextObject: Object3D| null = null;
+
+ @serializeable(Text)
+ scaleText?: Text;
+
+ public allowWorldScaling: boolean =false;
+
+ private leftSqueeze:boolean=false;
+ private rightSqueeze:boolean=false;
+
+ private bothSqueezeStarted=false;
+
+ private rigScaleUpdated=false;
+
+ private initialDistance:number=1;
+ private initialScale:number=1;
+ private newScale:number | null=null;
+
+ private leftHand?:Object3D;
+ private rightHand?:Object3D;
+ private head?:Object3D;
+
+ start(): void {
+
+ let _webxr=GameObject.findObjectOfType(WebXR);
+ if(_webxr)
+ {
+ this.webXR=_webxr;
+ console.log("webxr found");
+ }
+
+ //Wait for XR Session
+ WebXR.addEventListener(WebXREvent.XRStarted, () => {
+ //listen to squeeze events
+ this.context.xrSession?.addEventListener("squeezestart", (event) => { this.onSqueezeEvent(event,true); });
+ this.context.xrSession?.addEventListener("squeezeend", (event) => { this.onSqueezeEvent(event,false); });
+ });
+ }
+
+
+ onSqueezeEvent(event: XRInputSourceEvent, status:boolean) {
+
+ if(event.inputSource.handedness==="right")
+ {
+ this.rightSqueeze=status;
+ }
+
+ if(event.inputSource.handedness==="left")
+ {
+ this.leftSqueeze=status;
+ }
+ }
+
+ update(){
+
+ if(this.context.isInVR)
+ {
+ //cache object selected if any
+ this.objectGrab();
+
+ //if both grips are squeezed
+ if(this.leftSqueeze && this.rightSqueeze)
+ {
+ //if object is selected either in the left or right controller (only one)
+ if(this.selectedObj!=null)
+ {
+ //after initial distance value has been set
+ if(this.bothSqueezeStarted)
+ {
+ //get current distance between controllers
+ const scaleValue=this.calculateDistance();
+
+ //get distance change since beginning of squeeze to get a "pinch in/out" effect
+ this.newScale=this.initialScale+scaleValue-this.initialDistance;
+
+ //avoid 0 and negative scales
+ if(this.newScale<0.001){this.newScale=0.001;}
+
+ // scale object according to new distance since initial distance
+ this.selectedObj.scale.x=this.newScale;
+ this.selectedObj.scale.y=this.newScale;
+ this.selectedObj.scale.z=this.newScale;
+
+ this.showVisual(this.newScale,"Object :");
+ }
+ else
+ {
+ //get initial distance value (only once at a new squeeze both hands event)
+ this.bothSqueezeStarted=true;
+
+ this.initialDistance=this.calculateDistance();
+
+ //cache object's initial scale
+ this.initialScale=this.selectedObj.scale.x;
+ }
+ }
+ else
+ {
+ //scale world ?
+ if(this.webXR?.Rig && this.allowWorldScaling)
+ {
+ //after initial distance value has been set
+ if(this.bothSqueezeStarted)
+ {
+ //get current distance between controllers
+ const scaleValue=this.calculateDistance();
+
+ //get distance change since beginning of squeeze to get a "pinch in/out" effect
+ this.newScale=this.initialScale+scaleValue-this.initialDistance;
+
+ //avoid 0 and negative scales
+ if(this.newScale<0.001){this.newScale=0.001;}
+
+ this.showVisual(this.newScale, "World :");
+
+ this.rigScaleUpdated=true;
+ }
+ else
+ {
+ //get initial distance value (only once at a new squeeze both hands event)
+ this.bothSqueezeStarted=true;
+
+ this.initialDistance=this.calculateDistance();
+
+ //cache object's initial scale
+ this.initialScale=this.webXR.Rig.scale.x;
+ }
+ }
+ }
+
+ }
+ else
+ {
+ //reset values
+ this.bothSqueezeStarted=false;
+
+ //if world has been scaled, scale rig accordingly at the end of squeezing and once only
+ if(this.webXR?.Rig && this.rigScaleUpdated && this.newScale)
+ {
+ //change rig scale
+ this.webXR.Rig.scale.set(this.newScale, this.newScale, this.newScale);
+ this.webXR.Rig.updateMatrixWorld();
+
+ const cam = this.context.mainCamera as PerspectiveCamera;
+ cam.near=this.newScale>2?0.0001:0.2;
+ cam.updateProjectionMatrix();
+
+ //reset
+ this.rigScaleUpdated=false;
+ }
+
+ if(this.scaleTextObject)
+ {
+ this.scaleTextObject.visible=false;
+ }
+
+ this.newScale=null;
+ }
+ }
+ }
+
+ private calculateDistance():number
+ {
+ let distance=1;
+
+ if(this.leftHand && this.rightHand)
+ {
+
+ const left=this.leftHand.position;
+ const right=this.rightHand.position;
+
+ // Calculate the difference between the positions
+ const dx = left.x - right.x;
+ const dy = left.y - right.y;
+ const dz = left.z - right.z;
+
+ // Calculate the distance using the Euclidean distance formula
+ distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+ }
+ else
+ {
+ //set positions of controllers from your avatar (only once)
+ let allAvatars = AvatarMarker.instances;
+ if(allAvatars.length>0)
+ {
+ for (let i=0;i<allAvatars.length;i++)
+ {
+ if(allAvatars[i].isLocalAvatar())
+ {
+ const av=allAvatars[i].avatar as WebXRAvatar;
+ if(av!=null)
+ {
+ this.leftHand=av.handLeft as Object3D;
+ this.rightHand=av.handRight as Object3D;
+ this.head = av.head as Object3D;
+ }
+ }
+ }
+ }
+ }
+
+ return distance;
+ }
+
+ showVisual(scale:number, mesg:string):void
+ {
+ if(this.scaleTextObject && this.head && this.scaleText)
+ {
+ this.scaleTextObject.visible=true;
+
+ const offset = new Vector3(0,0,7);
+ offset.applyQuaternion(this.head.quaternion);
+
+ this.scaleTextObject.position.copy(this.head.position.add(offset));
+
+ const roundedNum= +scale.toFixed(3);
+ this.scaleText.text=mesg+" "+roundedNum;
+ }
+
+ }
+
+
+ objectGrab():void
+ {
+ if(this.webXR?.RightController?.grabbed?.selected)
+ {
+ this.selectedObj = this.webXR.RightController.grabbed.selected;
+ }
+ else if(this.webXR?.LeftController?.grabbed?.selected)
+ {
+ this.selectedObj = this.webXR.LeftController.grabbed.selected;
+ }
+ else
+ {
+ this.selectedObj=null;
+ }
+ }
+}Ask questions and provide feedback in Needle Forum
Get instant help with Needle AI
Ask any question about Needle Engine, web development or our editor integrations and get instant help from the Needle AI that has access to the latest code, documentation and our integrations.
Chat with the community and share your projects in Needle Discord
Watch some of our user interviews on youtube to get inspired.
',8)),o(n,{src:"https://www.youtube.com/watch?v=gZuC40Alr88"}),o(n,{src:"https://www.youtube.com/watch?v=F6_buCHZhWk"}),e[1]||(e[1]=t("div",{class:"hint-container info"},[t("p",{class:"hint-container-title"},"You made a cool project?"),t("p",null,[a("Don't hestitate to "),t("a",{href:"mailto:hi@needle.tools",target:"_blank",rel:"noopener noreferrer"},"reach out"),a(" โ we always love seeing what you built ๐")])],-1))])}const m=r(p,[["render",h],["__file","support.html.vue"]]),b=JSON.parse('{"path":"/support.html","title":"Support and Community","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/support.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":2,"title":"Forum","slug":"forum","link":"#forum","children":[]},{"level":2,"title":"Discord","slug":"discord","link":"#discord","children":[]},{"level":2,"title":"Get Inspired","slug":"get-inspired","link":"#get-inspired","children":[]}],"git":{"updatedTime":1727681911000},"filePathRelative":"support.md"}');export{m as comp,b as data}; diff --git a/assets/technical-overview.html-BeSwd6Mh.js b/assets/technical-overview.html-BeSwd6Mh.js new file mode 100644 index 000000000..b58ecdca9 --- /dev/null +++ b/assets/technical-overview.html-BeSwd6Mh.js @@ -0,0 +1,254 @@ +import{_ as t,r as h,o as e,c as l,e as a,a as k,d as i,b as p,w as r}from"./app-CRZRGfEE.js";const d={};function C(B,s){const n=h("RouteLink");return e(),l("div",null,[s[3]||(s[3]=a(`Needle Engine roughly consists of three parts:
The web runtime uses three.js for rendering, adds a component system on top of the three scene graph and hooks up extension loaders for our custom glTF extensions.
Effectively, this turns tools like Unity or Blender into spatial web development powerhouses โ adding glTF assets to the typical HTML, CSS, JavaScript and bundling workflow.
Models, textures, animations, lights, cameras and more are stored as glTF 2.0 files in Needle Engine.
Custom data is stored in vendor extensions. These cover everything from interactive components to physics, sequencing and lightmaps.
A typical production glTF created by Needle Engine uses the following extensions:
KHR_lights_punctual
+KHR_materials_unlit
+KHR_texture_transform
+KHR_animation_pointer
+NEEDLE_techniques_webgl
+NEEDLE_gameobject_data
+NEEDLE_components
+NEEDLE_persistent_assets
+NEEDLE_lightmaps
+NEEDLE_lighting_settings
+KHR_texture_basisu
+KHR_draco_mesh_compressionOther supported extensions:
EXT_meshopt_compression
+EXT_mesh_gpu_instancing (import and export)Supported material extensions:
KHR_materials_clearcoat
+KHR_materials_ior
+KHR_materials_specular
+KHR_materials_transmission
+KHR_materials_iridescence
+KHR_materials_unlit
+KHR_materials_volumeMore extensions and custom extensions can be added using the export callbacks of UnityGLTF (not documented yet) and the glTF import extensions of three.js.
Note: Materials using these extensions can be exported from Unity via UnityGLTF's
PBRGraphmaterial.
Note: Audio and variants are already supported in Needle Engine through
NEEDLE_componentsandNEEDLE_persistent_assets, but there are some options for more alignment to existing proposals such asKHR_audioandKHR_materials_variants.
Learn more about GLTF loading in three.js
For production, we compress glTF assets with glTF-transform. Textures use either etc1s, uastc, webp or no compression, depending on texture type. Meshes use draco by default but can be configured to use meshtopt (per glTF file). Custom extensions are passed through in an opaque way.
Needle Engine stores custom data in glTF files through our vendor extensions. These extensions are designed to be flexible and allow relatively arbitrary data to put into them. Notably, no code is stored in these files. Interactive components is restored from the data at runtime. This has some similarities to how AssetBundles function in Unity โ the receiving side of an asset needs to have matching code for components stored in the file.
We're currently not prodiving schemas for these extensions as they are still in development. The JSON snippets below demonstrates extension usage by example and includes notes on architectural choices and what we may change in future releases.
References between pieces of data are currently constructed through a mix of indices into other parts of the glTF file and JSON pointers. We may consolidate these approaches in a future release. We're also storing string-based GUIDs for cases where ordering is otherwise hard to resolve (e.g. two components referencing each other) that we may remove in the future.
This extension contains per-node component data. The component names map to type names on both the JavaScript and C# side.
Multiple components with the same name can be added to the same node.
Data in NEEDLE_components can be animated via the currently not ratified KHR_animation_pointer extension.
"NEEDLE_components": {
+ "builtin_components": [
+ {
+ "name": "WebARSessionRoot",
+ "guid": "1516450550",
+ "arScale": 50,
+ "invertForward": true,
+ "enabled": true,
+ "gameObject": {
+ "node": 0
+ }
+ },
+ {
+ "name": "SyncedRoom",
+ "guid": "1516450552",
+ "roomName": "network-room",
+ "urlParameterName": "room",
+ "joinRandomRoom": true,
+ "requireRoomParameter": false,
+ "autoRejoin": true,
+ "enabled": true,
+ "gameObject": {
+ "node": 0
+ }
+ },
+ {
+ "name": "PlayableDirector",
+ "guid": "2243275882009986562_1668529989451832962",
+ "state": 0,
+ "extrapolationMode": 1,
+ "playableAsset": "extensions/NEEDLE_persistent_assets/4",
+ "playableGraph": {},
+ "playOnAwake": true,
+ "timeUpdateMode": 0,
+ "time": 0,
+ "initialTime": 0,
+ "duration": 135.383333333332,
+ "enabled": true,
+ "gameObject": {
+ "node": 0
+ }
+ }
+ ]
+}Note: Storing only the component type name means that type names currently need to be unique per project. We're planning to include package names in a future release to loosen this constraint to unique component type names per package instead of globally.
Note: Currently there's no versioning information in the extension (which npm packaage does a component belong to, which version of that package was it exported against). We're planning to include versioning information in a future release.
Note: Currently all components are in the
builtin_componentsarray. We might rename this to justcomponentsin a future release.
This extension contains additional per-node data related to state, layers, and tags. Layers are used for both rendering and physics, similar to how three.js and Unity treat them.
"NEEDLE_gameobject_data": {
+ "layers": 0,
+ "tag": "Untagged",
+ "hideFlags": 0,
+ "static": false,
+ "activeSelf": true,
+ "guid": "1516450549"
+}Note: We may need to better explain why this is not another entry in
NEEDLE_components.
This is a root extension defining ambient lighting properties per glTF file.
"NEEDLE_lighting_settings": {
+ "ambientMode": 0,
+ "ambientLight": [
+ 0.212,
+ 0.227,
+ 0.259,
+ 1
+ ],
+ "ambientIntensity": 1,
+ "defaultReflectionMode": 0
+}Note: This extension might have to be defined per-scene instead of per-file.
This is a root extension defining a set of lightmaps for the glTF file.
"NEEDLE_lightmaps": {
+ "textures": [
+ {
+ "pointer": "textures/20",
+ "type": 1,
+ "index": 0
+ }
+ ]
+}Note: At the moment this extension also contains environment texture references. We're planning to change that in a future release.
| Texture Type | Value |
|---|---|
| Lightmap | 0 |
| Environment Map | 1 |
| Reflection Map | 2 |
How lightmaps are applied is defined in the MeshRenderer component inside the NEEDLE_components extension per node:
"NEEDLE_components": {
+ "builtin_components": [
+ {
+ "name": "MeshRenderer",
+ ...
+ "lightmapIndex": 0,
+ "lightmapScaleOffset": {
+ "x": 1.00579774,
+ "y": 1.00579774,
+ "z": -0.00392889744,
+ "w": -0.00392889744
+ },
+ ...
+ }
+ ]
+}Note: We may change that in a future release and move lightmap-related data to a
NEEDLE_lightmapextension entry per node.
Components in NEEDLE_components can reference data via JSON Pointers. The data in NEEDLE_persistent_assets is often referenced multiple times by different components and is thus stored separately in a root extension. By design, they are always referenced by something else (or have references within each other), and thus do not store type information at all: they're simply pieces of JSON data and components referencing them currently need to know what they expect.
Examples for assets/data stored in here are:
Data in persistent_assets can reference other persistent_assets via JSON Pointer, but by design can't reference NEEDLE_components. This is similar to the separation beween "Scene data" and "AssetDatabase content" in Unity.
{
+ "name": "LampionController",
+ "guid": "9100000_ecab75bc7ab51a747a4c5c14236a43cd",
+ "parameters": [],
+ "layers": [
+ {
+ "name": "Base Layer",
+ "stateMachine": {
+ "name": "Base Layer",
+ "defaultState": 0,
+ "states": [
+ {
+ "name": "LampionFlying",
+ "hash": 677739540,
+ "motion": {
+ "name": "LampionFlying",
+ "isLooping": false,
+ "guid": "7400000_c296c4d76e956b34f8b5833ba90653c1",
+ "clips": [
+ {
+ "node": "nodes/4",
+ "clip": "animations/0"
+ },
+ {
+ "node": "nodes/9",
+ "clip": "animations/6"
+ },
+ {
+ "node": "nodes/14",
+ "clip": "animations/12"
+ }
+ ]
+ },
+ "transitions": [
+ {
+ "isExit": false,
+ "exitTime": 1,
+ "hasFixedDuration": true,
+ "offset": 0,
+ "duration": 0,
+ "hasExitTime": true,
+ "destinationState": 0,
+ "conditions": []
+ }
+ ]
+ }
+ ],
+ "entryTransitions": []
+ }
+ }
+ ]
+},
+{
+ "name": "TrongCom Website",
+ "guid": "11400000_93a8f856fe26af8498d94efe4835af36",
+ "tracks": [
+ {
+ "name": "Markers",
+ "type": "MarkerTrack",
+ "muted": false,
+ "outputs": [
+ null
+ ],
+ "clips": [],
+ "markers": [],
+ "trackOffset": null
+ },
+ {
+ "name": "Animation Track",
+ "type": "AnimationTrack",
+ "muted": false,
+ "outputs": [
+ "5017454109690854928_1668529989451832962"
+ ],
+ "clips": [
+ {
+ "start": 0,
+ "end": 0.9833333333333333,
+ "duration": 0.9833333333333333,
+ "timeScale": 1,
+ "asset": {
+ "clip": "animations/78",
+ "loop": false,
+ "duration": 8,
+ "position": {
+ "x": 0,
+ "y": 0,
+ "z": 0
+ },
+ "rotation": {
+ "x": 0,
+ "y": 0,
+ "z": 0,
+ "w": 1
+ },
+ "removeStartOffset": true
+ },
+ "clipIn": 0,
+ "easeInDuration": 0,
+ "easeOutDuration": 0.41666666666666663,
+ "preExtrapolationMode": 1,
+ "postExtrapolationMode": 1
+ },
+ ...
+ ]
+ }
+ ]
+}Note: We might include more type and versioning information in the future.
This extension builds upon the archived KHR_techniques_webgl extension and extends it in a few crucial places. While the original extension was specified against WebGL 1.0, we're using it with WebGL 2.0 here and have added a number of uniform types.
"KHR_techniques_webgl": {
+ "programs": [
+ {
+ "vertexShader": 1,
+ "fragmentShader": 0,
+ "id": 0
+ }
+ ],
+ "shaders": [
+ {
+ "name": "Pass-FRAGMENT",
+ "type": 35632,
+ "uri": "<embedded WebGL fragment shader code ...>",
+ "id": 1
+ },
+ {
+ "name": "Pass-VERTEX",
+ "type": 35633,
+ "uri": "<embedded WebGL vertex shader code ...>",
+ "id": 0
+ }
+ ],
+ "techniques": [
+ {
+ "program": 0,
+ "attributes": {},
+ "uniforms": {
+ "_TimeParameters": {
+ "name": "_TimeParameters",
+ "type": 35666,
+ "semantic": null,
+ "count": 1,
+ "node": 0
+ },
+ "hlslcc_mtx4x4unity_MatrixVP": {
+ "name": "hlslcc_mtx4x4unity_MatrixVP",
+ "type": 35666,
+ "semantic": "_VIEWPROJECTION",
+ "count": 4,
+ "node": 0
+ }
+ },
+ "defines": []
+ }
+ ]
+}Note: Currently, vertex and fragment shaders are always embedded as URI; we plan on moving that data into more reasonable bufferViews in the future.
Note: There's some redundant properties in here that we plan on cleaning up.
๐๏ธ Under Construction
๐๏ธ Under Construction
While Unity's compilation process from C# to IL to C++ (via IL2CPP) to WASM (via emscripten) is ingenious, it's also relatively slow. Building even a simple project to WASM takes many minutes, and that process is pretty much repeated on every code change. Some of it can be avoided through clever caching and ensuring that dev builds don't try to strip as much code, but it still stays slow.
We do have a prototype for some WASM translation, but it's far from complete and the iteration speed stays slow, so we are not actively investigating this path right now.
When looking into modern web workflows, we found that code reload times during development are neglectible, usually in sub-second ranges. This of course trades some performance (interpretation of JavaScript on the fly instead of compiler optimization at build time) for flexibility, but browsers got really good at getting the most out of JavaScript.
We believe that for iteration and tight testing workflows, it's beneficial to be able to test on device and on the target platform (the browser, in this case) as quickly and as often as possible - which is why we're skipping Unity's entire play mode, effectively always running in the browser.
`,49))])}const g=t(d,[["render",C],["__file","technical-overview.html.vue"]]),y=JSON.parse(`{"path":"/technical-overview.html","title":"Technical Overview","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/technical overview.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[{"level":2,"title":"How it works","slug":"how-it-works","link":"#how-it-works","children":[]},{"level":2,"title":"glTF Assets","slug":"gltf-assets","link":"#gltf-assets","children":[{"level":3,"title":"Supported glTF extensions","slug":"supported-gltf-extensions","link":"#supported-gltf-extensions","children":[]},{"level":3,"title":"Compression","slug":"compression","link":"#compression","children":[]}]},{"level":2,"title":"Vendor-specific glTF Extensions (NEEDLE_*)","slug":"vendor-specific-gltf-extensions-needle","link":"#vendor-specific-gltf-extensions-needle","children":[{"level":3,"title":"NEEDLE_components","slug":"needle-components","link":"#needle-components","children":[]},{"level":3,"title":"NEEDLE_gameobject_data","slug":"needle-gameobject-data","link":"#needle-gameobject-data","children":[]},{"level":3,"title":"NEEDLE_lighting_settings","slug":"needle-lighting-settings","link":"#needle-lighting-settings","children":[]},{"level":3,"title":"NEEDLE_lightmaps","slug":"needle-lightmaps","link":"#needle-lightmaps","children":[]},{"level":3,"title":"NEEDLE_persistent_assets","slug":"needle-persistent-assets","link":"#needle-persistent-assets","children":[]},{"level":3,"title":"NEEDLE_techniques_webgl","slug":"needle-techniques-webgl","link":"#needle-techniques-webgl","children":[]}]},{"level":2,"title":"TypeScript and Data Mapping","slug":"typescript-and-data-mapping","link":"#typescript-and-data-mapping","children":[]},{"level":2,"title":"Rendering with three.js","slug":"rendering-with-three.js","link":"#rendering-with-three.js","children":[]},{"level":2,"title":"Why aren't you compiling to WebAssembly?","slug":"why-aren-t-you-compiling-to-webassembly","link":"#why-aren-t-you-compiling-to-webassembly","children":[]}],"git":{"updatedTime":1725399379000},"filePathRelative":"technical-overview.md"}`);export{g as comp,y as data}; diff --git a/assets/testimonial-yd4jmUbJ.js b/assets/testimonial-yd4jmUbJ.js new file mode 100644 index 000000000..de5c8924c --- /dev/null +++ b/assets/testimonial-yd4jmUbJ.js @@ -0,0 +1 @@ +import{_ as o,o as n,c as r,a as e,f as i,d as c,t as _}from"./app-CRZRGfEE.js";const d={props:{name:String,src:String}},l={class:"root"},f={class:"testimonial"},m={class:"quote"},p={class:"name"},u=["href"];function h(a,t,s,g,v,S){return n(),r("div",l,[e("div",f,[e("span",m,[i(a.$slots,"default",{},void 0,!0)]),e("span",p,[t[0]||(t[0]=c(" โ ")),e("a",{href:s.src,target:"_blank"},_(s.name),9,u)])])])}const x=o(d,[["render",h],["__scopeId","data-v-47fef520"],["__file","testimonial.vue"]]);export{x as default}; diff --git a/assets/testimonials.html-B3wqsnkd.js b/assets/testimonials.html-B3wqsnkd.js new file mode 100644 index 000000000..488f6c4cb --- /dev/null +++ b/assets/testimonials.html-B3wqsnkd.js @@ -0,0 +1 @@ +import{_ as o,r,o as l,c as m,a,b as s,w as i,d as n}from"./app-CRZRGfEE.js";const d={};function u(h,t){const e=r("testimonial");return l(),m("div",null,[t[12]||(t[12]=a("h1",{id:"testimonials",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#testimonials"},[a("span",null,"Testimonials")])],-1)),t[13]||(t[13]=a("p",null,null,-1)),s(e,{name:"Rinesh Thomas",src:"https://twitter.com/rineshthomas/status/1566342798063947777?t=z6sG3Z7mol-NfIRfTTKqCQ&s=19"},{default:i(()=>t[0]||(t[0]=[n(" This is the best thing I have seen after cinemachine in unity. Unity should acquire this ")])),_:1}),s(e,{name:"Chris Mahoney",src:"https://twitter.com/mahoneymatic/status/1562981022932684800?t=qNqojoZkk2CZrJa7dGzqng&s=19"},{default:i(()=>t[1]||(t[1]=[n(" Unbelievable Unity editor integration by an order of magnitude, and as straightforward as the docs claim. Wow. ")])),_:1}),s(e,{name:"Kevin Curry",src:"https://twitter.com/kmcurry/status/1574333302022062080"},{default:i(()=>t[2]||(t[2]=[n(" needle.tools is a wonderful showcase of what @NeedleTools contributes to 3D via the web. I just love it. ")])),_:1}),s(e,{name:"Stella Cannefax",src:"https://twitter.com/0xstella/status/1574853012585172993"},{default:i(()=>t[3]||(t[3]=[n(" Thanks to @NeedleTools, seeing quite a bit of this solution for web-based real time 3d tools - export scenes from Unity, where you can leverage the extensive 3d editor ecosystem & content, and then render them in your own web-based engine ")])),_:1}),s(e,{name:"Brit Gardner",src:"https://twitter.com/britg/status/1562443905580163072"},{default:i(()=>t[4]||(t[4]=[n(" Played with this a bit this morning ๐คฏ๐คฏ pretty magical ")])),_:1}),s(e,{name:"Marc Wakefield",src:"https://twitter.com/mrm_design/status/1567391880169545729"},{default:i(()=>t[5]||(t[5]=[n(" This is huge for WebXR and shared, immersive 3D experiences! Thank you so much for putting in the work on this @NeedleTools crew! Hoping @Apple sort out their WebXR situation sooner rather than later. The AR part worked flawlessly on my @SamsungMobile S21. ")])),_:1}),s(e,{name:"Pete Patterson",src:"https://twitter.com/VRSpatialist/status/1572300394285383680"},{default:i(()=>t[6]||(t[6]=[n(" Finally checking out @NeedleTools with Unity. Super easy to get something up and running in the cloud using their glitch integration ")])),_:1}),s(e,{name:"Dilmer Valecillos",src:"https://twitter.com/Dilmerv/status/1562209049856188420"},{default:i(()=>t[7]||(t[7]=[n(" This is amazing and if you are curious about #WebXR with Unity this will help us get there ")])),_:1}),s(e,{name:"VRSpatialist",src:"https://discord.com/channels/717429793926283276/722046635525537842/1030201907513405530"},{default:i(()=>t[8]||(t[8]=[n(" I am a long time Unity dev and recently started playing with Needle Tools and I love it! It's a great on ramp for Unity devs who want to learn WebXR and three.js. The runtime engine is awesome and it was pretty easy to create my own custom component ")])),_:1}),s(e,{name:"Unity for Digital Twins",src:"https://twitter.com/DigitalTwin/status/1576934958681055233"},{default:i(()=>t[9]||(t[9]=[n(" We just gotta say WOW ๐คฉ ")])),_:1}),s(e,{name:"Matthew Pieri",src:"https://discord.com/channels/717429793926283276/1097572505738301571/1097572505738301571"},{default:i(()=>t[10]||(t[10]=[n(" Spent the last 2.5 months building this game, never built a game/never used unity before, but absolutely loving the whole process with needle tools. So rapid! Would love to make a career building AR experiences! ")])),_:1}),s(e,{name:"Yuzu",src:"https://discord.com/channels/717429793926283276/1264966222467043433/1265268833485066240"},{default:i(()=>t[11]||(t[11]=[n(" My workflow has been optimized 10X ever since i started using needle ")])),_:1})])}const g=o(d,[["render",u],["__file","testimonials.html.vue"]]),f=JSON.parse('{"path":"/testimonials.html","title":"Testimonials","lang":"en-US","frontmatter":{"next":"getting-started/","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/testimonials.png"}],["meta",{"name":"og:description","content":"---\\nThis is the best thing I have seen after cinemachine in unity. Unity should acquire this"}]],"description":"---\\nThis is the best thing I have seen after cinemachine in unity. Unity should acquire this"},"headers":[],"git":{"updatedTime":1727125836000},"filePathRelative":"testimonials.md"}');export{g as comp,f as data}; diff --git a/assets/testing.html-DcypmV_S.js b/assets/testing.html-DcypmV_S.js new file mode 100644 index 000000000..b939ec727 --- /dev/null +++ b/assets/testing.html-DcypmV_S.js @@ -0,0 +1 @@ +import{_ as t,o as i,c as n,e as o}from"./app-CRZRGfEE.js";const a="/docs/testing/switch-to-mkcert.webp",r={};function s(l,e){return i(),n("div",null,e[0]||(e[0]=[o('Note: A really nice side effect is avoiding the entire slow "domain reload" step that usually costs 15-60 seconds each time you enter Play Mode. You're just "live" in the browser the moment you press Play.
When using our templates, Needle Engine runs a local development server for you. Simply press play, and a website will open in your default browser, ready for testing on your local device. For testing on other devices in the same network, you may have to install a self-signed certificate (see below).
When using a custom setup / framework, please refer to your framework's documentation on how to run a secure local development server.
Tips
Our local server uses the IP address in your local network (e.g. https://192.168.0.123:3000) instead of localhost:3000. This allows you to quickly view and test your project from mobile devices, VR glasses, and other machines in the same network.
We're using HTTPS instead of the older HTTP, because modern powerful web APIs like WebXR require a secure connection โ the S stands for "secure".
Different operating systems have different security requirements for local development. Typically, displaying a website will work even with a auto-generated untrusted certificate, but browsers may warn about the missing trust and some features are not available. Here's a summary:
Tips
Installing trusted self-signed certificates on your development devices is recommended for a smooth development experience. Find the steps at the bottom of this page.
Default โ with auto-generated untrusted certificate
Displays a certificate warning upon opening the project in a browser.Uses the vite-plugin-basic-ssl npm package.
We're using websocket connections to communicate between the browser and the local development server. Websockets require a secure connection (HTTPS) in order to work. Depending on the platform, you might need to set up a custom certificate for local development. Android and Windows don't need a custom certificate, but iOS and MacOS do.
| OS | Viewing in the browser (with a security warning) | Automatic reloads |
|---|---|---|
| Windows | (โ) | โ |
| Linux | (โ) | โ |
| Android | (โ) | โ |
| macOS | (โ) | โ |
| iOS | (โ Safari and Chrome, after page reload) โ Mozilla XR Viewer | โ |
| Xcode Simulators | (โ after page reload) | โ |
With a self-signed, trusted root certificate
No security warning is displayed. You need to install the generated certificate on your device(s).
Uses the vite-plugin-mkcert npm package.
| OS | Viewing in the browser | Automatic reloads |
|---|---|---|
| Windows | โ | โ |
| Linux | โ | โ |
| Android | โ | โ |
| macOS | โ | โ |
| iOS | โ | โ |
in Unity/Blender, click on "Open Workspace" to open VS Code
check that you're using vite-plugin-mkcert instead of vite-plugin-basic-ssl (the latter doesn't generate a trusted root certificate, which we need) in your vite.config.ts file:
package.json"@vitejs/plugin-basic-ssl" from devDependenciesnpm install vite-plugin-mkcert --save-dev which will add the latest versionvite.config.ts and replace import basicSsl from '@vitejs/plugin-basic-ssl' with import mkcert from'vite-plugin-mkcert'plugins: [, replace basicSsl(), with mkcert(),run npm run start once from VS Code's terminal
Error: Port 3000 is already in use, please close the server that may still be running from Unity.the generated certificate will automatically be installed on the machine you generated it on.
you can stop the terminal process again.
from now on, pressing Play in Unity/Blender will use the generated certificate for the local server, and no "security warning" will be shown anymore, since your browser now trusts the local connection.
On your development devices, you need to install the generated certificate and allow the OS to trust it. This is different for each OS. For each of them, you'll need the rootCA.pem file that was generated, and send it to the device you want to authenticate.
On Windows: find the certificate in Users/<your-user>/.vite-plugin-mkcert/rootCA.pem
On MacOS: find the certificate in Users/<your-user>/.vite-plugin-mkcert/rootCA.pem
Send the device to yourself (e.g. via E-Mail, AirDrop, iCloud, USB, Slack, ...) so that you can access it on your development devices.
Trust or go to Settings > General > About > Info > Certificate Trust Settings and enable full trust for the root certificate.Tips
The certificate is automatically installed on the machine you generated it on. For other machines in the local network, follow the steps below to also establish a trusted connection.
certmgr ("Manage user certificates") by typing Windows key + certmgr.rootCA.pem file (you may have to change the file type to "all") and follow the instructions.The following table contains available Typescript decorators that Needle Engine provides.
You can think of them as Attributes on steroids (if you are familiar with C#) - they can be added to classes, fields or methods in Typescript to provide additional functionality.
| Field & Property Decorators | |
@serializable() | Add to exposed / serialized fields. Is used when loading glTF files that have been exported with components from Unity or Blender. |
@syncField() | Add to a field to network the value when it changes. You can pass in a method to be called when the field changes |
@validate() | Add to receive callbacks in the component event method onValidate whenever the value changes. This behaves similar to Unity's onValidate. |
| Method Decorators | |
@prefix(<type>) (experimental) | Can be used to easily inject custom code into other components. Optionally return false to prevent the original method from being executed. See the example below |
| Class Decorators | |
@registerType | No argument. Can be added to a custom component class to be registered to the Needle Engine types and to enable hot reloading support. |
import { Behaviour, serializable, EventList } from "@needle-tools/engine";
+import { Object3D } from "three";
+
+export class SomeComponentType extends Behaviour {}
+
+export class ButtonObject extends Behaviour {
+ // you can omit the type if it's a primitive
+ // e.g. Number, String or Bool
+ @serializable()
+ myNumber: number = 42;
+
+ // otherwise add the concrete type that you want to serialize to
+ @serializable(EventList)
+ onClick?: EventList;
+
+ @serializable(SomeComponentType)
+ myComponent?: SomeComponentType;
+
+ // Note that for arrays you still add the concrete type (not the array)
+ @serializable(Object3D)
+ myObjects?: Object3D[];
+}The @syncField decorator can be used to automatically network properties of your components for all users (visitors of your website) connected to the same networking room. It can optionally take a callback function that will be invoked whenever the value changes.
myField = myFieldMyScript.prototype.onNumberChanged works for onNumberChanged() { ... } but it does not for myNumberChanged = () => { ... })import { Behaviour, serializable, syncField } from "@needle-tools/engine";
+
+export class MyScript extends Behaviour {
+
+ @syncField(MyScript.prototype.onNumberChanged)
+ @serializable()
+ myNumber: number = 42;
+
+ private onNumberChanged(newValue: number, oldValue: number){
+ console.log("Number changed from ", oldValue, "to", newValue)
+ }
+}import { Behaviour, serializable, validate } from "@needle-tools/engine";
+
+export class MyScript extends Behaviour {
+
+ @validate()
+ @serializable()
+ myNumber?: number;
+
+ start() { setInterval(() => this.myNumber = Math.random(), 1000) }
+
+ onValidate(fieldName: string) {
+ console.log("Validate", fieldName, this.myNumber);
+ }
+}import { Camera, prefix } from "@needle-tools/engine";
+class YourClass {
+ @prefix(Camera) // < this is type that has the method you want to change
+ awake() { // < this is the method name you want to change
+
+ // this is now called before the Camera.awake method runs
+ // NOTE: \`this\` does now refer to the Camera instance and NOT \`YourClass\` anymore. This allows you to access internal state of the component as well
+ console.log("Hello camera:", this)
+ // optionally return false if you want to prevent the default behaviour
+ }
+}The following guide tries to highlight some of the key differences between C#, Javascript and Typescript. This is most useful for developers new to the web ecosystem.
Here are also some useful resources for learning how to write Typescript:
CSharp or C# is a statically typed & compiled language. It means that before your code can run (or be executed) it has to be compiled - translated - into IL or CIL, an intermediate language that is a little closer to machine code. The important bit to understand here is that your code is analyzed and has to pass certain checks and rules that are enforced by the compiler. You will get compiler errors in Unity and your application not even start running if you write code that violates any of the rules of the C# language. You will not be able to enter Play-Mode with compiler errors.
Javascript on the other hand is interpreted at runtime. That means you can write code that is not valid and cause errors - but you will not see those errors until your program runs or tries to execute exactly that line that has the error. For example you can write var points = 100; points += "hello world"; and nobody will complain until you run the code in a browser.
Typescript is a language designed by Microsoft that compiles to javascript
It adds a lot of features like for example type-safety. That means when you write code in Typescript you can declare types and hence get errors at compile-time when you try to e.g. make invalid assignments or call methods with unexpected types. Read more about types in Javascript and Typescript below.
Vanilla Javascript does (as of today) not have any concept of types: there is no guarantuee that a variable that you declared as let points = 100 will still be a number later in your application. That means that in Javascript it is perfectly valid code to assign points = new Vector3(100, 0, 0); later in your code. Or even points = null or points = myRandomObject - you get the idea. This is all OK while you write the code but it may crash horrible when your code is executed because later you write points -= 1 and now you get errors in the browser when your application is already running.
As mentioned above Typescript was created to help fix that problem by adding syntax for defining types.
It is important to understand that you basically still write Javascript when you write Typescript and while it is possible to circumvent all type checking and safety checks by e.g. adding //@ts-ignore above a erroneous line or defining all types as any this is definitely not recommneded. Types are here to help you find errors before they actually happen. You really dont want to deploy your website to your server only to later get reports from users or visitors telling you your app crashed while it was running.
While vanilla Javascript does not offer types you can still add type-annotations to your javascript variables, classes and methods by using JSDoc.
In C# you write variables either by using the type or the var keyword.
For example you can either write int points = 100;
or alternatively use var and let the compiler figure out the correct type for you: var points = 100
In Javascript or Typescript you have two modern options to declaring a variable.
For a variable that you plan to re-assign use let, for example let points = 100;
For a variable that you do not want to be able to re-assign use const, for example const points = 100;
Be aware of var
You might come across thevarkeyword in javascript as well but it is not recommended to use it and the modern replacement for it islet. Learn more about var vs let.
Please note that you can still assign values to variables declared with const if they are (for example) a custom type. Consider the following example:
import { Vector3 } from "three";
+// ---cut-before---
+const myPosition : Vector3 = new Vector3(0, 0, 0);
+myPosition.x = 100; // Assigning x is perfectly fineThe above is perfectly fine Typescript code because you don't re-assign myPosition but only the x member of myPosition. On the other hand the following example would not be allowed and cause a runtime or typescript error:
// @errors: 2588
+import { Vector3 } from "three";
+// ---cut-before---
+const myPosition : Vector3 = new Vector3(0, 0, 0);
+myPosition = new Vector3(100, 0, 0); // โ ASSIGNING TO CONST IS NOT ALLOWEDIn Unity you usually add using statements at the top of you code to import specific namespaces from Assemblies that are references in your project or - in certain cases - you migth find yourself importing a specific type with a name from a namespace.
See the following example:
using UnityEngine;
+// importing just a specific type and giving it a name
+using MonoBehaviour = UnityEngine.MonoBehaviour;This is how you do the same in Typescript to import specific types from a package:
import { Vector3 } from 'three';
+import { Behaviour } from '@needle-tools/engine';You can also import all the types from a specific package by giving it a name which you might see here and there:
import * as THREE from 'three';
+const myVector : THREE.Vector3 = new THREE.Vector3(1, 2, 3);Vector2, Vector3, Vector4...
If you have a C# background you might be familiar with the difference between a class and a struct. While a class is a reference type a struct is a custom value type. Meaning it is, depending on the context, allocated on the stack and when being passed to a method by default a copy is created.
Consider the following example in C#:
void MyCallerMethod(){
+ var position = new Vector3(0,0,0);
+ MyExampleVectorMethod(position);
+ UnityEngine.Debug.Log("Position.x is " + position.x); // Here x will be 0
+}
+void MyExampleVectorMethod(Vector3 position){
+ position.x = 42;
+}A method is called with a Vector3 named position. Inside the method the passed in vector position is modified: x is set to 42. But in C# the original vector that is being passed into this method (see line 2) is not changed and x will still be 0 (line 4).
The same is not true for Javascript/Typescript. Here we don't have custom value types, meaning if you come across a Vector in Needle Engine or three.js you will always have a reference type.
Consider the following example in typescript:
import { Vector3 } from 'three'
+
+function myCallerMethod() : void {
+ const position = new Vector3(0,0,0);
+ myExampleVectorMethod(position);
+ console.log("Position.x is " + position.x); // Here x will be 42
+}
+function myExampleVectorMethod(position: Vector3) : void {
+ position.x = 42;
+}Do you see the difference? Because vectors and all custom objects are in fact reference types we will have modified the original position variable (line 3) and x is now 42.
This is not only important to understand for methods but also when working with variables.
In C# the following code will produce two instances of Vector3 and changing one will not affect the other:
var myVector = new Vector3(1,1,1);
+var myOtherVector = myVector;
+myOtherVector.x = 42;
+// will log: 1, 42
+UnityEngine.Debug.Log(myVector.x + ", " + myOtherVector.x);If you do the same in Typescript you will not create a copy but get a reference to the same myVector instance instead:
import { Vector3 } from 'three'
+
+const myVector = new Vector3(1,1,1);
+const myOtherVector = myVector;
+myOtherVector.x = 42;
+// will log: 42, 42
+console.log(myVector.x, myOtherVector.x);While in C# you can use operator overloading this is not available in Javascript unfortunately. This means that while you can multiply a Vector3 in C# like this:
var myFirstVector = new Vector3(1,1,1);
+var myFactor = 100f;
+myFirstVector *= myFactor;
+// โ myFirstVector is now 100, 100, 100you have to use a method on the Vector3 type to archieve the same result (just with a little more boilerplate code)
import { Vector3 } from "three"
+
+const myFirstVector : Vector3 = new Vector3(1, 1, 1)
+const myFactor = 100;
+myFirstVector.multiplyScalar(myFactor);
+// โ myFirstVector is now 100, 100, 100In C# when you want to check if two variables are the same you can write it as follows:
var playerIsNull = myPlayer == null;in Javascript/Typescript there is a difference between == and === where === is more strictly checking for the type:
const myPlayer: any = null;
+// ---cut-before---
+const playerIsNull = myPlayer === null;
+const playerIsNullOrUndefined = myPlayer == null;You notice that the second variable playerIsNullOrUndefined is using == which does a loose equality check in which case null and undefined will both result in truehere. You can read more about that here
thisWhen you subscribe to an Event in C# you do it like this:
// this is how an event is declared
+event Action MyEvent;
+// you subscribe by adding to (or removing from)
+void OnEnable() {
+ MyEvent += OnMyEvent;
+}
+void OnDisable() {
+ MyEvent -= OnMyEvent;
+}
+void OnMyEvent() {}In Typescript and Javascript when you add a method to a list you have to "bind this". That essentially means you create a method where you explictly set this to (usually) your current class instance. There are two way to archieve this.
Please note that we are using the type EventList here which is a Needle Engine type to declare events (the EventList will also automatically be converted to a UnityEvent and or a event list in Blender when you use them with our Editor integrations)
The short and recommended syntax for doing this is to use Arrow Functions.
import { EventList, Behaviour, serializable } from "@needle-tools/engine";
+
+export class MyComponent extends Behaviour {
+
+ @serializable(EventList)
+ myEvent!: EventList;
+
+ onEnable() {
+ this.myEvent.addEventListener(this.onMyEvent);
+ }
+
+ onDisable() {
+ this.myEvent.removeEventListener(this.onMyEvent);
+ }
+
+ // Declaring the function as an arrow function to automatically bind \`this\`
+ private onMyEvent = () => {
+ console.log(this !== undefined, this)
+ }
+}There is also the more verbose "classical" way to archieve the same thing by manually binding this (and saving the method in a variable to later remove it again from the event list):
import { EventList, Behaviour, serializable } from "@needle-tools/engine";
+
+export class MyComponent extends Behaviour {
+
+ @serializable(EventList)
+ myEvent?: EventList;
+
+ private _onMyEventFn?: Function;
+
+ onEnable() {
+ // bind this
+ this._onMyEventFn = this.onMyEvent.bind(this);
+ // add the bound method to the event
+ this.myEvent?.addEventListener(this._onMyEventFn);
+ }
+
+ onDisable() {
+ this.myEvent?.removeEventListener(this._onMyEventFn);
+ }
+
+ // Declaring the function as an arrow function to automatically bind \`this\`
+ private onMyEvent = () => { }
+}This is an example from our Everywhere Actions. The following script hides an object on start on Android and on iOS AR
export class HideOnStart extends Behaviour implements UsdzBehaviour {
+
+ start() {
+ this.gameObject.visible = false;
+ }
+
+ createBehaviours(ext, model, _context) {
+ if (model.uuid === this.gameObject.uuid)
+ ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+ TriggerBuilder.sceneStartTrigger(),
+ ActionBuilder.fadeAction(model, 0, false)
+ ));
+ }
+
+ beforeCreateDocument() {
+ this.gameObject.visible = true;
+ }
+
+ afterCreateDocument() {
+ this.gameObject.visible = false;
+ }
+}The following code will enable Quest users (haven't tested with other devices) to move up and down with the right-joystick\`s y axis. (the x axis being used for snap-turns).
This code will interfere with the teleport script when accidentally pointing towards an object and trying to move up. It is recommended to remove the teleport script for that matter.
You can place this script anywhere.
+import { Behaviour, WebXR, GameObject} from "@needle-tools/engine";
+import { Vector3,Quaternion} from "three";
+import { Mathf } from "@needle-tools/engine";
+
+export class VerticalMove extends Behaviour {
+
+ private webXR?: WebXR;
+ private joystickY?:number;
+ private worldRot: Quaternion = new Quaternion();
+
+ start(): void {
+
+ let _webxr=GameObject.findObjectOfType(WebXR);
+ if(_webxr)
+ {
+ this.webXR=_webxr;
+ console.log("webxr found");
+ }
+ }
+
+
+ update()
+ {
+ if(this.context.isInVR)
+ {
+ //get y value from right joystick
+ this.verticalMove();
+ }
+ }
+
+ verticalMove():void
+ {
+ if(this.webXR?.RightController?.input?.gamepad?.axes[3])
+ {
+ this.joystickY=this.webXR.RightController.input.gamepad.axes[3];
+
+ const speedFactor = 3;
+ const powFactor = 2;
+ const speed = Mathf.clamp01(2 * 2);
+
+ const verticalDir = this.joystickY < 0 ? 1 : -1;
+ let vertical = Math.pow(this.joystickY, powFactor);
+ vertical *= verticalDir;
+ vertical *= speed;
+
+ this.webXR.Rig.getWorldQuaternion(this.worldRot);
+
+ let movementVector=new Vector3();
+ movementVector.set(0, vertical, 0);
+ movementVector.applyQuaternion(this.webXR.TransformOrientation);
+ movementVector.x = 0;
+ movementVector.applyQuaternion(this.worldRot);
+ movementVector.multiplyScalar(speedFactor * this.context.time.deltaTime);
+
+ this.webXR.Rig.position.add(movementVector);
+ }
+ }
+}We believe the use of 3D on the web will expand considerably in the next years. While today native apps are the norm, more and more content is made available as a web app or PWA. New VR and AR devices will extend into the web, creating an interesting problem: responsive suddenly not only means "small screen" or "large screen", you're also dealing with spaces, 3D, spatial placement and potentially glasses and controllers!
Add to that a push towards more interactivity and collaboration, and you have an interesting mix of challenges.
At Needle, we believe ideating and creating in this space should be easy. We've set out to speed things up โ creating our own runtime to reach these goals. That's why we're baking the ability to deploy to AR and VR right into our core components, and continually test that new ideas work across platforms.
There's numerous options, that's true! We found that current systems1 can be roughly sorted into two categories: some have great asset handling, tools, and artist-friendly workflows but output some sort of binary blob, and others are more code-focussed, developer-friendly and allow for great integration into modern web workflows2.
We want to bridge these worlds and combine the best of both worlds: artist-friendly workflows and modern web technologies. Combined with modern formats and a snappy workflow, we believe this will allow many more creators to bring their content to the web. We also saw an opportunity to get AR, VR and collaboration right from the start.
1: Examples include Unity, PlayCanvas, three.js, react-three-fiber, Babylon, A-Frame, Godot, and many more.2: There's more nuance to this than fits into an introductory paragraph! All engines and frameworks have their strengths and weaknesses, and are constantly evolving.
We think the next wave of 3D apps on the web will come with better workflows: everyone should be able to put together a 3D scene, an art gallery, present a product or 3D scan on the web or make simple games. Reaching this goal will require more than just supporting one particular system and exporting to the web from there.
Our goal is to allow people to bring data to the web from their creative tools: be it Unity, Blender, Photoshop, or something else. We're aware that this is a big goal โ but instead of doing everything at once, we want to iterate and get closer to it together.
At the core of Needle Engine stands the glTF format and its ability to be extended with custom extensions. The goal is: a single .glb file can contain your entire application's data.
It's worth noting that it's not a goal to ship actual code inside glTF; shipping and running code is the job of modern web runtimes and bundling. We certainly can imagine that abstract representations of logic (e.g. graphs, state machines, and so on) can be standardized to a certain degree and allow for interoperable worlds, but we're not there yet.
',15)),i("p",null,[l(n,{to:"/technical-overview.html"},{default:d(()=>e[0]||(e[0]=[h("Read more about our use of glTF and extensions")])),_:1})]),e[2]||(e[2]=t('From working with Unity for many years we've found that while the engine and editor progress at a great pace, WebGL output has somewhat lacked behind. Integration of Unity players into web-based systems is rather hard, "talking" to the surrounding website requires a number of workarounds, and most of all, iteration times are very slow due to the way that Unity packs all code into WebAssembly via IL2CPP. These technologies are awesome, and result in great runtime performance and a lot of flexibility. But they're so much slower and walled off compared to modern web development workflows that we decided to take matters into our own hands.
Needle Engine builds on three.js. All rendering goes through it, glTF files are loaded via three's extension interfaces, and our component system revolves around three's Object3D and scene graph. We're committed to upstreaming some of our changes and improvements, creating pull requests and reporting issues along the way.
',10))])}const w=o(p,[["render",c],["__file","vision.html.vue"]]),m=JSON.parse(`{"path":"/vision.html","title":"Our Vision ๐ฎ","lang":"en-US","frontmatter":{"next":"features-overview","head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/vision.png"}],["meta",{"name":"og:description","content":"---\\nWe believe the use of 3D on the web will expand considerably in the next years. While today native apps are the norm, more and more content is made available as a web app or PWA. New VR and AR devices will extend into the web, creating an interesting problem: responsive suddenly not only means 'small screen' or 'large screen', you're also dealing with spaces, 3D, spatial placement and potentially glasses and controllers!\\nAdd to that a push towards more interactivity and collaboration, and you have an interesting mix of challenges.\\nAt Needle, we believe ideating and creating in this space should be easy. We've set out to speed things up โ creating our own runtime to reach these goals. That's why we're baking the ability to deploy to AR and VR right into our core components, and continually test that new ideas work across platforms.\\nThere's numerous options, that's true! We found that current systems1 can be roughly sorted into two categories: some have great asset handling, tools, and artist-friendly workflows but output some sort of binary blob, and others are more code-focussed, developer-friendly and allow for great integration into modern web workflows2.\\nWe want to bridge these worlds and combine the best of both worlds: artist-friendly workflows and modern web technologies. Combined with modern formats and a snappy workflow, we believe this will allow many more creators to bring their content to the web. We also saw an opportunity to get AR, VR and collaboration right from the start.\\n1: _Examples include Unity, PlayCanvas, three.js, react-three-fiber, Babylon, A-Frame, Godot, and many more._\\n2: _There's more nuance to this than fits into an introductory p"}]],"description":"---\\nWe believe the use of 3D on the web will expand considerably in the next years. While today native apps are the norm, more and more content is made available as a web app or PWA. New VR and AR devices will extend into the web, creating an interesting problem: responsive suddenly not only means 'small screen' or 'large screen', you're also dealing with spaces, 3D, spatial placement and potentially glasses and controllers!\\nAdd to that a push towards more interactivity and collaboration, and you have an interesting mix of challenges.\\nAt Needle, we believe ideating and creating in this space should be easy. We've set out to speed things up โ creating our own runtime to reach these goals. That's why we're baking the ability to deploy to AR and VR right into our core components, and continually test that new ideas work across platforms.\\nThere's numerous options, that's true! We found that current systems1 can be roughly sorted into two categories: some have great asset handling, tools, and artist-friendly workflows but output some sort of binary blob, and others are more code-focussed, developer-friendly and allow for great integration into modern web workflows2.\\nWe want to bridge these worlds and combine the best of both worlds: artist-friendly workflows and modern web technologies. Combined with modern formats and a snappy workflow, we believe this will allow many more creators to bring their content to the web. We also saw an opportunity to get AR, VR and collaboration right from the start.\\n1: _Examples include Unity, PlayCanvas, three.js, react-three-fiber, Babylon, A-Frame, Godot, and many more._\\n2: _There's more nuance to this than fits into an introductory p"},"headers":[{"level":2,"title":"The Future of the 3D Web","slug":"the-future-of-the-3d-web","link":"#the-future-of-the-3d-web","children":[]},{"level":2,"title":"Why another platform for 3D on the web? Aren't there enough options already?","slug":"why-another-platform-for-3d-on-the-web-aren-t-there-enough-options-already","link":"#why-another-platform-for-3d-on-the-web-aren-t-there-enough-options-already","children":[]},{"level":2,"title":"Creating a Workflow, not an Editor","slug":"creating-a-workflow-not-an-editor","link":"#creating-a-workflow-not-an-editor","children":[]},{"level":2,"title":"Open Standards instead of Proprietary Containers","slug":"open-standards-instead-of-proprietary-containers","link":"#open-standards-instead-of-proprietary-containers","children":[]},{"level":2,"title":"Goals","slug":"goals","link":"#goals","children":[]},{"level":2,"title":"Non-Goals","slug":"non-goals","link":"#non-goals","children":[]},{"level":2,"title":"Needle Engine and Unity WebGL","slug":"needle-engine-and-unity-webgl","link":"#needle-engine-and-unity-webgl","children":[]},{"level":2,"title":"Needle Engine and three.js","slug":"needle-engine-and-three.js","link":"#needle-engine-and-three.js","children":[]}],"git":{"updatedTime":1667075212000},"filePathRelative":"vision.md"}`);export{w as comp,m as data}; diff --git a/assets/web3kev.html-BYOJlV9Z.js b/assets/web3kev.html-BYOJlV9Z.js new file mode 100644 index 000000000..5229fa0e6 --- /dev/null +++ b/assets/web3kev.html-BYOJlV9Z.js @@ -0,0 +1,466 @@ +import{_ as e,r as a,o as r,c as p,b as k,w as t,a as i,d as s}from"./app-CRZRGfEE.js";const C={};function d(y,h){const l=a("contribution-preview"),n=a("contributions-author");return r(),p("div",null,[k(n,{overviewLink:"/docs/community/contributions",name:"Web3Kev",url:"https://github.com/Web3Kev",profileImage:"https://avatars.githubusercontent.com/u/106066970?s=100&v=4",githubUrl:"https://github.com/Web3Kev"},{default:t(()=>[k(l,{title:"Vertical Move in VR using the right joystick (Quest)",pageUrl:"/docs/community/contributions/web3kev/vertical-move-in-vr-using-the-right-joystick-quest"},{default:t(()=>h[0]||(h[0]=[i("p",null,"The following code will enable Quest users (haven't tested with other devices) to move up and down with the right-joystick`s y axis. (the x axis being used for snap-turns).",-1),i("p",null,"This code will interfere with the teleport script when accidentally pointing towards an object and trying to move up. It is recommended to remove the teleport script for that matter.",-1),i("p",null,"You can place this script anywhere.",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," WebXR"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Quaternion"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Mathf "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," VerticalMove"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," WebXR"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," joystickY"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," worldRot"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Quaternion "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Quaternion"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," _webxr"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"GameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"findObjectOfType"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(WebXR)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(_webxr)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"_webxr"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"webxr found"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," update"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"isInVR)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //get y value from right joystick")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"verticalMove"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," verticalMove"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"RightController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"input"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gamepad"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"axes["),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"]) ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"joystickY"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"RightController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"input"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gamepad"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"axes["),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"]"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," speedFactor "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," powFactor "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 2"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," speed "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Mathf"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"clamp01"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"2"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," *"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 2"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," verticalDir "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"joystickY "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ?"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," :"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," -"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vertical "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Math"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"pow"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"joystickY"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," powFactor)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vertical "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," verticalDir"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vertical "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," speed"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"getWorldQuaternion"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"worldRot)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}},"new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"set"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," vertical"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"applyQuaternion"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"TransformOrientation)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"applyQuaternion"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"worldRot)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," movementVector"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"multiplyScalar"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(speedFactor "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"time"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"deltaTime)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"add"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(movementVector)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1}),k(l,{title:"Squeeze to Scale (Object or World) in VR",pageUrl:"/docs/community/contributions/web3kev/squeeze-to-scale-object-or-world-in-vr"},{default:t(()=>h[1]||(h[1]=[i("p",null,"The following code enables you to use both controllers in VR (tested on Quest) and scale the player's perspective (XRRig) by squeezing the grab triggers and moving the controllers closer (pinch out) or further apart (pinch in). The boolean allowWorldScaling has to be ticked in unity for that to work.",-1),i("p",null,"Upon selecting a draggable object (Drag controls script), the player can scale up or down that object, while keeping the finger on the trigger and squeezing both grab buttons and moving the hands closer or apart.",-1),i("p",null,"The current script enables you to visually see the scale. Create a world canvas with a text component as a child. Assign the world canvas to scaleTextObject and the text to scaleText. scaleTextObject will then spawn in front of the player and follow the head movement whenever scaling.",-1),i("p",null,"At the moment the position of the hands (controllers) is done by finding the avatar's hands. I couldn't make it work otherwise. If you find a better way please share.",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," WebXR"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"serializeable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," WebXREvent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"WebXRAvatar"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," AvatarMarker"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Text"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Quaternion"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"PerspectiveCamera"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," SqueezeScale"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," WebXR"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," null"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," null"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializeable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," scaleTextObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"|"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," null"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," null"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializeable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Text"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," scaleText"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Text"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," allowWorldScaling"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," boolean"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," leftSqueeze"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"boolean"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," rightSqueeze"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"boolean"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," bothSqueezeStarted"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," rigScaleUpdated"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," initialDistance"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," initialScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," |"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," null"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," leftHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," rightHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," head"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," start"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," _webxr"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"GameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"findObjectOfType"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(WebXR)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(_webxr)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"_webxr"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"webxr found"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //Wait for XR Session")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," WebXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(WebXREvent"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"XRStarted"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //listen to squeeze events")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"xrSession"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"squeezestart"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ("),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"event"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"onSqueezeEvent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(event"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"xrSession"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"addEventListener"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"squeezeend"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ("),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"event"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"onSqueezeEvent"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(event"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onSqueezeEvent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"event"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," XRInputSourceEvent"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," status"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"boolean"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(event"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"inputSource"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"handedness"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"==="),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"right"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rightSqueeze"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"status"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(event"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"inputSource"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"handedness"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"==="),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"left"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"leftSqueeze"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"status"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," update"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"(){")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"isInVR)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //cache object selected if any")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"objectGrab"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //if both grips are squeezed ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"leftSqueeze "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rightSqueeze)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //if object is selected either in the left or right controller (only one)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //after initial distance value has been set")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"bothSqueezeStarted)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //get current distance between controllers")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," scaleValue"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"calculateDistance"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},' //get distance change since beginning of squeeze to get a "pinch in/out" effect')]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleValue"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialDistance"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //avoid 0 and negative scales")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.001"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.001"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";}")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // scale object according to new distance since initial distance")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"y"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"z"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"showVisual"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"Object :"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //get initial distance value (only once at a new squeeze both hands event)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"bothSqueezeStarted"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialDistance"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"calculateDistance"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //cache object's initial scale")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //scale world ?")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"allowWorldScaling)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //after initial distance value has been set")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"bothSqueezeStarted)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //get current distance between controllers")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," scaleValue"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"calculateDistance"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},' //get distance change since beginning of squeeze to get a "pinch in/out" effect')]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleValue"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialDistance"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //avoid 0 and negative scales")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.001"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.001"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";}")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"showVisual"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "World :"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rigScaleUpdated"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //get initial distance value (only once at a new squeeze both hands event)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"bothSqueezeStarted"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialDistance"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"calculateDistance"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //cache object's initial scale")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"initialScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //reset values")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"bothSqueezeStarted"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //if world has been scaled, scale rig accordingly at the end of squeezing and once only")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rigScaleUpdated "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //change rig scale")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"set"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Rig"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"updateMatrixWorld"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," cam "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mainCamera "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," PerspectiveCamera"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," cam"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"near"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},">"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"2"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.0001"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0.2"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," cam"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"updateProjectionMatrix"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //reset")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rigScaleUpdated"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleTextObject)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleTextObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"visible"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"newScale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," calculateDistance"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," distance"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"leftHand "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rightHand)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," left"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"leftHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," right"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rightHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // Calculate the difference between the positions")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dx "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," left"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," right"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"x"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dy "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," left"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"y "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," right"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"y"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dz "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," left"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"z "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," right"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"z"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // Calculate the distance using the Euclidean distance formula")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," distance "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Math"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"sqrt"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(dx "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dx "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dy "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dy "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dz "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"*"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," dz)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //set positions of controllers from your avatar (only once)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," allAvatars "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," AvatarMarker"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"instances"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(allAvatars"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},">"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," for"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ("),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"allAvatars"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"++"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(allAvatars[i]"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"isLocalAvatar"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"())")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," av"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"allAvatars[i]"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"avatar "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," WebXRAvatar"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(av"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"leftHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"av"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"handLeft "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"rightHand"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"av"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"handRight "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"head "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," av"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"head "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," distance"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," showVisual"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"("),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"number"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," mesg"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"string"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleTextObject "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"head "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"&&"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleText)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleTextObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"visible"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," offset "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"7"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," offset"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"applyQuaternion"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"head"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"quaternion)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleTextObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"copy"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"head"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"add"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(offset))"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," roundedNum"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," +"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scale"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toFixed"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"scaleText"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"text"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mesg"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'" "'),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"+"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"roundedNum"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," objectGrab"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"RightController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"grabbed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selected) ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"RightController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"grabbed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selected"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"LeftController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"grabbed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selected)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"webXR"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"LeftController"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"grabbed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selected"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," else")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"selectedObj"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1)])),_:1}),k(l,{title:"Network instantiation of multiple objects",pageUrl:"/docs/community/contributions/web3kev/network-instantiation-of-multiple-objects"},{default:t(()=>h[2]||(h[2]=[i("p",null,"In a multiuser session, typically objects are instantiated using instantiateSynced as such:",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"serializable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"InstantiateOptions"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," InstantiateObjectForAll"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," myPrefab"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," makeObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," options "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," InstantiateOptions"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," options"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," options"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," GameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"instantiateSynced"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"myPrefab"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," options) "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1),i("p",null,"My particular use-case was for generating programmatically a random scene made of cubes, and that scene had to be the same for all users of the same room. I had used the example above but for some unknown reasons sometimes the scenes were partially rendered when instantiating simultaneously >400 objects. @Marcel of Needle suggested to generate a seed (position of all objects in the scene) and send that seed instead using :",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"connection"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"send"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()")])])])],-1),i("p",null,"All users using :",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"connection"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"beginListen"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()")])])])],-1),i("p",null,"would receive any seed previously sent, upon joining the same room, allowing them to instantiate cubes according to that seed (array of Vector3).",-1),i("p",null,"Here is a script illustrating the use of the send method and the beginListen counterpart:",-1),i("div",{class:"language-ts","data-highlighter":"shiki","data-ext":"ts","data-title":"ts",style:{"--shiki-light":"#4c4f69","--shiki-dark":"#c6d0f5","--shiki-light-bg":"#eff1f5","--shiki-dark-bg":"#303446"}},[i("pre",{class:"shiki shiki-themes catppuccin-latte catppuccin-frappe vp-code"},[i("code",null,[i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//This is an example of sending the seed of a randomly generated scene made of cubes, for all other instances logging into the same room to create the same scene.")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//This script requires a prefab (e.g. a 1x1x1 Cube)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//This script will generate and build randomly positioned cubes (random walk) as a child of the object it is attached to. ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//The generateSeed() method is in this script called via a button. The button is deactivated once the seed has been transmitted.")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//Any users joining the same room will receive the seed and build the exact same scene")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Behaviour"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"serializable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"InstantiateOptions"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "@needle-tools/engine"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"import"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Object3D "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," from"),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},' "three"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"export"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," class"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," NetworkedSeed"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," extends"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Behaviour")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," prefab"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," @serializable"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"("),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"Object3D"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," generateButton"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"?:"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Object3D"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," seedSize"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," number"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 30"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3[] "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," []"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onEnable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"connection"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"beginListen"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"mySeed"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onDataReceived)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"visible"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"true"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onDisable"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"connection"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"stopListen"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"mySeed"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"onDataReceived)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," onDataReceived"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ="),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," ("),i("span",{style:{"--shiki-light":"#E64553","--shiki-dark":"#EA999C","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"data"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," any"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},")"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," =>"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"Received data:"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," data"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mySeed)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"==="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //prevent other generations of the seed")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"visible"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"data"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"mySeed"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //build scene")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"buildScene"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," };")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //generate and send seed to all from the button generateButton")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," generateSeed"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"=="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},") "),i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"//no seed found => generate one")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," []"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," uniquePositions "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Set"),i("span",{style:{"--shiki-light":"#04A5E5","--shiki-dark":"#99D1DB"}},"<"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"string"),i("span",{style:{"--shiki-light":"#04A5E5","--shiki-dark":"#99D1DB"}},">"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //start at origin")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," startPosition "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"push"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(startPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"clone"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"())"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," uniquePositions"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"add"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(startPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toArray"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toString"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"())"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //go for a random walk of length : seedSize")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," while"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seedSize) "),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," lastPosition "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed["),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"-"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 1"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"]"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," newPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //walk and add position, making sure they are unique")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," do"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," direction "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"getRandomDirection"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," newPosition "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," lastPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"clone"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"add"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(direction)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," while"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," (uniquePositions"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"has"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(newPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toArray"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toString"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()))"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"push"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(newPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"clone"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"())"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," uniquePositions"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"add"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(newPosition"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toArray"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"toString"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"())"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //send the seed to all on the server")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"sendSeed"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //prevent other generations of the seed")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton)")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"generateButton"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"visible"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"false"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //build scene locally")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"buildScene"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," sendSeed"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"connection"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"send"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"mySeed"'),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},",{"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"guid"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"guid"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," mySeed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"------ SEED SENT -------"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," public"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," buildScene"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"void"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"{")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //check if the seed is not empty")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"=="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"array was empty"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," //check if the scene has already been built")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"children"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},">"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},") ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"Scene already present"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#9CA0B0","--shiki-dark":"#737994","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," // Create cubes at each position of the random walk ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," for"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"let"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"0"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"length"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," i"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"++"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," option "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," InstantiateOptions"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"()"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," option"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"context"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," option"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"parent"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"gameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," option"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"position "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}}," this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"seed[i]"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," if"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"prefab"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"!="),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"null"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," cube "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," GameObject"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"instantiate"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#D20F39","--shiki-dark":"#E78284"}},"this"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"prefab"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," option) "),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}},"as"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," GameObject"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," console"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"log"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"("),i("span",{style:{"--shiki-light":"#40A02B","--shiki-dark":"#A6D189"}},'"----------- Scene Built ---------"'),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},")"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," ")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," private"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," getRandomDirection"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"()"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},":"),i("span",{style:{"--shiki-light":"#DF8E1D","--shiki-dark":"#E5C890","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," {")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," x "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Math"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"random"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0.5"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ?"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," -"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," :"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," y "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Math"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"random"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0.5"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ?"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," -"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," :"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," const"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," z "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"="),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," Math"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"."),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}},"random"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"() "),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}},"<"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 0.5"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," ?"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," -"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}},"1"),i("span",{style:{"--shiki-light":"#179299","--shiki-dark":"#81C8BE"}}," :"),i("span",{style:{"--shiki-light":"#FE640B","--shiki-dark":"#EF9F76"}}," 1"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6"}}," return"),i("span",{style:{"--shiki-light":"#8839EF","--shiki-dark":"#CA9EE6","--shiki-light-font-weight":"bold","--shiki-dark-font-weight":"bold"}}," new"),i("span",{style:{"--shiki-light":"#1E66F5","--shiki-dark":"#8CAAEE","--shiki-light-font-style":"italic","--shiki-dark-font-style":"italic"}}," Vector3"),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}},"(x"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," y"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},","),i("span",{style:{"--shiki-light":"#4C4F69","--shiki-dark":"#C6D0F5"}}," z)"),i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},";")]),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}}," }")]),s(` +`),i("span",{class:"line"}),s(` +`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#7C7F93","--shiki-dark":"#949CBB"}},"}")])])])],-1),i("p",null,"The above script is placed on an object (any Transform) and will generate an array of unique Vector3 positions for a specified length (seedSize) after generateSeed() is called (In this case it is called from a button: generateButton).",-1),i("p",null,"Once generated it will send the array to the server and build the scene. The building process consist of instantiating the prefab at each Vector3 position of the seed (this.seed) array.",-1),i("p",null,"Any user joining the same room after a seed has been generated and sent, will receive the seed from the server and trigger the callback onDataReceived() which will cache the seed array, disable the button, and build the scene with the prefab, according to the seed.",-1),i("p",null,"This gives a way to generate a scene and communicate the seed of that scene, for each user to build locally.",-1),i("p",null,"This was the solution I chose which worked better than instantiating a complex scene (>400 objects) with instantiateSynced which would occasionally cause bugs.",-1)])),_:1})]),_:1})])}const F=e(C,[["render",d],["__file","web3kev.html.vue"]]),E=JSON.parse('{"path":"/community/contributions/web3kev","title":"","lang":"en-US","frontmatter":{"head":[["meta",{"name":"og:image","content":"https://engine.needle.tools/docs/.preview/contributions: web3kev.png"}],["meta",{"name":"og:description","content":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."}]],"description":"Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally. Needle Exporter for Unity bridges the Unity Editor and the web runtime. It helps you to export your assets, animations, lightmaps and so on to the web. It is built around the glTF standard for 3D assets."},"headers":[],"git":{},"filePathRelative":null}');export{F as comp,E as data}; diff --git a/assets/xr.html-BFJdLi8t.js b/assets/xr.html-BFJdLi8t.js new file mode 100644 index 000000000..214fe85b5 --- /dev/null +++ b/assets/xr.html-BFJdLi8t.js @@ -0,0 +1,14 @@ +import{_ as d,r as o,o as p,c as h,e as a,a as t,d as s,b as i,w as r}from"./app-CRZRGfEE.js";const c={};function u(g,e){const n=o("RouteLink"),l=o("sample");return p(),h("div",null,[e[34]||(e[34]=a('Theoretically all WebXR-capable devices and browsers should be supported. That being said, we've tested the following configurations:
| Tested VR Device | Browser | Notes |
|---|---|---|
| Apple Vision Pro | โ๏ธ Safari Browser | hand tracking, support for transient pointer |
| Meta Quest 1 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1 |
| Meta Quest 2 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough (black and white) |
| Meta Quest 3 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough, depth sensing, mesh tracking |
| Meta Quest Pro | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough |
| Pico Neo 3 | โ๏ธ Pico Browser | no hand tracking, inverted controller thumbsticks |
| Pico Neo 4 | โ๏ธ Pico Browser | passthrough, hand tracking2 |
| Oculus Rift 1/2 | โ๏ธ Chrome | |
| Hololens 2 | โ๏ธ Edge | hand tracking, support for AR and VR (in VR mode, background is rendered as well) |
| Looking Glass Portrait | โ๏ธ Chrome | requires shim, see samples |
Visit our Needle Engine XR Samples to try many interactive examples right now!
AR, VR and networking capabilites in Needle Engine are designed to be modular. You can choose to not support any of them, or add only specific features.
Enable AR and VR
Add a WebXR component.
Optional: you can set a custom avatar by referencing an Avatar Prefab.
By default a very basic DefaultAvatar is assigned.
Enable Teleportation
Add a TeleportTarget component to object hierarchies that can be teleported on.
To exclude specific objects, set their layer to IgnoreRaycasting.
Enable Networking
Add a SyncedRoom component.
Enable Desktop Viewer Sync
Add a SyncedCamera component.
Enable Voice Chat
Add a VoIP component.
Note: these components can be anywhere inside your
GltfObjecthierarchy. They can also all be on the same GameObject.
Castle Builder uses all of the above for a cross-platform multiplayer sandbox experience.
โ #madebyneedle ๐
WebARSessionRoot component to your root object.Define whether an object is visible in Browser, AR, VR, First Person, Third Person
Add a XR Flag component to the object you want to control. Change options on the dropdown as needed.
Common usecases are
Needle Engine supports the sessiongranted state. This allows users to seamlessly traverse between WebXR applications without leaving an immersive session โ they stay in VR or AR.
Currently, this is only supported on Oculus Quest 1, 2 and 3 in the Oculus Browser. On other platforms, users will be kicked out of their current immersive session and have to enter VR again on the new page.
Requires enabling a browser flag: chrome://flags/#webxr-navigation-permission
OpenURL component that makes it very easy to build connected worlds.While we don't currently provide an out-of-the-box integration external avatar systems, you can create application-specific avatars or custom systems.
Head and add a XRFlag that's set to Third PersonHandLeft and HandRightThere's a number of experimental components to build more expressive Avatars. At this point we recommended duplicating them to make your own variants, since they might be changed or removed at a later point.
Example Avatar Rig with basic neck model and limb constraints
Random Player Colors
As an example for avatar customization, you can add a PlayerColor component to your renderers.
This randomized color is synchronized between players.
Eye RotationAvatarEyeLook_Rotation rotates GameObjects (eyes) to follow other avatars and a random target. This component is synchronized between players.
Eye BlinkingAvatarBlink_Simple randomly hides GameObjects (eyes) every few seconds, emulating a blink.
Example Avatar Prefab hierarchy
Offset ConstraintOffsetConstraint allows to shift an object in relation to another one in Avatar space. This allows, for example, to have a Body follow the Head but keep rotation levelled. It also allows to construct simple neck models.
Limb ConstraintBasicIKConstraint is a very minimalistic constraint that takes two transforms and a hint. This is useful to construct simple arm or leg chains. As rotation is currently not properly implemented, arms and legs may need to be rotationally symmetric to "look right". It's called "Basic" for a reason!
If you want to display different html content whether the client is using a regular browser or using AR or VR, you can just use a set of html classes.
This is controlled via HTML element classes. For example, to make content appear on desktop and in AR add a <div class="desktop ar"> ... </div> inside the <needle-engine> tag:
<needle-engine>
+ <div class="desktop ar" style="pointer-events:none;">
+ <div class="positioning-container">
+ <p>your content for AR and desktop goes here</p>
+ <p class="only-in-ar">This will only be visible in AR</p>
+ <div>
+ </div>
+</needle-engine>Content Overlays are implemented using the optional dom-overlay feature which is usually supported on screen-based AR devices (phones, tablets).
Use the .ar-session-active class to show/hide specific content while in AR. The :xr-overlay pseudo class shouldn't be used at this point because using it breaks Mozilla's WebXR Viewer.
.only-in-ar {
+ display: none;
+}
+
+.ar-session-active .only-in-ar {
+ display:initial;
+}It's worth noting that the overlay element will be always displayed fullscreen while in XR, independent of styling that has been applied. If you want to align items differently, you should make a container inside the class="ar" element.
Needle Engine supports WebXR ImageTracking (Live Demo)
Note: While WebXR ImageTracking is still in "draft" phase (Marker Tracking Explainer)
you need to follow these steps to enable WebXR ImageTracking on Android devices:
WebXR Incubations in chromeWebXRImageTracking componentWithout that spec, one can still request camera image access and run custom algorithms to determine device pose.
Libraries to add image tracking:
Augmented Reality experiences on iOS are somewhat limited, due to Apple currently not supporting WebXR on iOS devices.
',4)),t("p",null,[e[31]||(e[31]=s("Needle Engine's ")),i(n,{to:"/everywhere-actions.html"},{default:r(()=>e[29]||(e[29]=[s("Everywhere Actions")])),_:1}),e[32]||(e[32]=s(" are designed to fill that gap, bringing automatic interactive capabilities to iOS devices for scenes composed of specific components. They support a subset of the functionality that's available in WebXR, for example spatial audio, image tracking, animations, and more. See ")),i(n,{to:"/everywhere-actions.html"},{default:r(()=>e[30]||(e[30]=[s("the docs")])),_:1}),e[33]||(e[33]=s(" for more information."))]),e[40]||(e[40]=t("h3",{id:"musical-instrument-webxr-and-quicklook-support",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#musical-instrument-webxr-and-quicklook-support"},[t("span",null,"Musical Instrument โ WebXR and QuickLook support")])],-1)),e[41]||(e[41]=t("p",null,"Here's an example for a musical instrument that uses Everywhere Actions and thus works in browsers and in AR on iOS devices. It uses spatial audio, animation, and tap interactions.",-1)),i(l,{src:"https://engine.needle.tools/samples-uploads/musical-instrument"}),e[42]||(e[42]=a('There's also other options for guiding iOS users to even more capable interactive AR experiences:
Encryption in Space uses this approach. Players can collaboratively place text into the scene on their screens and then view the results in AR on iOS. On Android, they can also interact right in WebXR.
โ #madewithneedle by Katja Rempel ๐
Guiding users towards WebXR-compatible browsers on iOS. Depending on your target audience, you can guide users on iOS towards for example Mozilla's WebXR Viewer to experience AR on iOS.
Using camera access and custom algorithms on iOS devices.
One can request camera image access and run custom algorithms to determine device pose.
While we currently don't provide built-in components for this, here's a few references to libraries and frameworks that we want to try in the future:
WebXR Device API
caniuse: WebXR
Apple's Preliminary USD Behaviours
In Blender, go to File > Settings > Add-ons and click the Install button.
Select the downloaded zip file (named needle-blender-plugin-*.zip) to install it.
Search for "Needle" in the Add-ons search bar and make sure `Needle Engine.
Thank you for using Needle Engine for Blender.
With this add-on you can create highly interactive and optimized WebGL and WebXR experiences inside Blender, that run using Needle Engine and three.js.
You'll be able to sequence animations, easily lightmap your scenes, add interactivity or create your own scripts written in Typescript or Javascript that run on the web.
Matching lighting and environment settings between Blender and Needle Engine. HDRI environment lights are automatically exported, directly from Blender. Once you save, the page is automatically reloaded.
Providing Feedback
Your feedback is invaluable when it comes to deciding which features and workflows we should prioritize. If you have feedback for us (good or bad), please let us know in the forum!
First create or open a new blend file that you want to be exported to the web.
Open the Properties window open the scene category. Select a Project Path in the Needle Engine panel. Then click Generate Project. It will automatically install and start the server - once it has finished your browser should open and the threejs scene will load.
By default your scene will automatically re-exported when you save the blend file.
If the local server is running (e.g. by clicking Run Project) the website will automatically refresh with your changed model.
When your web project already exists and you just want to continue working on the website
click the blue Run Project button to start the local server:
Run Project button shows up when the Project path shows to a valid web project. A web project is valid when it contains a package.jsonDirectory open the directory of your web project (the Project Path)Code Editor tries to open the vscode workspace in your web projectBuild: Development or Build: Production buttons when you want to upload your web project to a server. This will bundle your web project and produce the files that you can upload. When clicking Build: Production it will also apply optimization to your textures (they will be compressed for the web)By default the blender viewport is set to Filmic - with this setting your colors in Blender and in three.js will not match. To fix this go to the Blender Render category and in the ColorManagement panel select View Transform: Standard
You can change the environment lighting and skybox using the Viewport shading options.
Assign a cubemap to use for lighting or the background skybox. You can adjust the strength or blur to modify the appearance to your liking.
Note: To also see the skybox cubemap in the browser increase the World Opacity to 1.
Note: Alternatively you can enable the Scene World setting in the Viewport Shading tab to use the environment texture assigned in the blender world settings.
Alternatively if you don't want to see the cubemap as a background add a Camera component to your Blender Camera and change clearFlags: SolidColor - note that the Camera backgroundBlurriness and backgroundIntensity settings override the Viewport shading settings.
To exclude an object from being exported you can disable the Viewport and the Render display (see image below)
For simple usecases you can use the Animation component for playback of one or multiple animationclips.
Just select your object, add an Animation component and assign the clip (you can add additional clips to be exported to the clips array.
By default it will only playback the first clip assigned when playAutomatically is enabled. You can trigger the other clips using a simple custom typescript component)
The animator controller can be created for more complex scenarios. It works as a statemachine which allows you to create multiple animation states in a graph and configure conditions and interpolation settings for transitioning between those.
Create and export animator statemachines for controlling complex character animations
The AnimatorController editor can be opened using the EditorType dropdown in the topleft corner of each panel:
Creating a new animator-controller asset โ or select one from your previously created assets
Shift+A to create a new AnimatorStateParameters node will be created once you add a first node. Select it to setup parameters to be used in transitions (via the Node panel on the right border)Set default state button in the Node/Properties panel)Conditions array to select parameters that must match the condition for doing the transition.To use an AnimatorController add an Animator component to the root object of your animations and select the AnimatorController asset that you want to use for this object.
You can set the Animator parameters from typescript or by e.g. using the event of a Button component
You can export Blender NLA tracks directly to the web.
Add a PlayableDirector component (via Add Component) to a any blender object. Assign the objects in the animation tracks list in the component for which you want the NLA tracks to be exported.
Add this script to src/scripts (see custom components section) and add it to any object in Blender to make a timeline's time be controlled by scrolling in the browsers
import { Behaviour, PlayableDirector, serializable, Mathf } from "@needle-tools/engine";
+
+export class ScrollTimeline extends Behaviour {
+
+ @serializable(PlayableDirector)
+ timeline?: PlayableDirector;
+
+ @serializable()
+ sensitivity: number = .5;
+
+ @serializable()
+ clamp: boolean = false;
+
+ private _targetTime: number = 0;
+
+ awake() {
+ this.context.domElement.addEventListener("wheel", this.onWheel);
+ if (this.timeline) this.timeline.pause();
+ }
+
+ private onWheel = (e: WheelEvent) => {
+ if (this.timeline) {
+ this._targetTime = this.timeline.time + e.deltaY * 0.01 * this.sensitivity;
+ if (this.clamp) this._targetTime = Mathf.clamp(this._targetTime, 0, this.timeline.duration);
+ }
+ }
+
+ update(): void {
+ if (!this.timeline) return;
+ const time = Mathf.lerp(this.timeline.time, this._targetTime, this.context.time.deltaTime / .3);
+ this.timeline.time = time;
+ this.timeline.pause();
+ this.timeline.evaluate();
+ }
+}You can add or remove components to objects in your hierarchy using the Needle Components panel:
For example by adding an OrbitControls component to the camera object
you get basic camera controls for mobile and desktop devicesAdjust settings for each component in their respective panels
Components can be removed using the X button in the lower right:
Custom components can also be easily added by simply writing Typescript classes. They will automatically compile and show up in Blender when saved.
To create custom components open the workspace via the Needle Project panel and add a .ts script file in src/scripts inside your web project. Please refer to the scripting documentation to learn how to write custom components for Needle Engine.
Note
Make sure @needle-tools/needle-component-compiler 2.x is installed in your web project (package.json devDependencies)
Needle includes a lightmapping plugin that makes it very easy to bake beautiful lights to textures and bring them to the web. The plugin will automatically generate lightmap UVs for all models marked to be lightmapped, there is no need to make a manual texture atlas. It also supports lightmapping of multiple instances with their own lightmap data. For lightmapping to work, you need at least one light and one object with Lightmapped turned on in the Needle Object panel.
Tips
You can download the .blend file from the video here.
Use the Needle Object panel to enable lightmapping for a mesh object or light:
For quick access to lightmap settings and baking options you can use the scene view panel in the Needle tab:
Alternatively you can also use the Lightmapping panel in the Render Properties tab:
Experimental Feature
The lightmapping plugin is experimental. We recommend creating a backup of your .blend file when using it. Please report problems or errors you encounter in our forum ๐
The Needle Engine Build Pipeline automatically compresses textures using ECT1S and UASTC (depending on their usage in materials) when making a production build (requires toktx being installed). But you can override or change the compression type per texture in the Material panel.
You can modify the compression that is being applied per texture. To override the default compression settings go to the Material tab and open the Needle Material Settings. There you will find a toggle to override the texture settings per texture used in your material. See the texture compression table for a brief overview over the differences between each compression algorithm.
The lightbulb in the Needle Project panel informs you when a new version of the addon is available.
Simply click the icon to download the new version.
If you run into any problems we're more than happy to help! Please join our discord for fast support.
Please also check the logs in Blender. You can find logs specific to the Needle Engine Addon via Help/Needle in Blender.
You can also automatically create and upload a bugreport directly from Blender. Uploaded bugreports will solely be used for debugging. They are encrypted on our backend and will be deleted after 30 days.
If needed, in certain cases we're also able to set up custom NDAs for your projects. Please contact us for more information.
Using the Bug Reporter requires a web project
Make sure you've set up a web project before sending a bug report โ it will allow us to understand more about your system and setup and make it easier to reproduce the issue.
To inspect glTF or glb files online:
To inspect them locally:
Debug Flags can be appended as URL query parameters.
Use ?help to get a list of ALL parameters available.
Here are some of the most commonly used:
help print all available url parameter in the consoleconsole opens an on-screen dev console, useful for mobile debuggingprintGltf logs loaded gltf files to the consolestats shows FPS module and logs threejs renderer stats every few secondsshowcolliders visualizes physics collidersgizmos enables gizmo rendering (e.g. when using BoxCollider or AxesHelper components)help to see them allNeedle Engine also has some very powerful and useful debugging methods that are part of the static Gizmos class. See the scripting documentation for more information.
npm install -g http-serverhttp-server -g | -g enables gzip supporthttp-server -g -S to enable https (required for WebXR).You can attach VSCode to the running local server to set breakpoints and debug your code. You can read more about debugging with VSCode here.
Create a launch.json file at .vscode/launch.json in your web project with the following content:
{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Attach Chrome",
+ "url": "https://localhost:3000",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}If you have changed the port on which your server starts make sure to update the url field accordingly.
You can then start your local server from within VSCode:
For Android debugging, you can attach Chrome Dev Tools to your device and see logs right from your PC. You have to switch your device into development mode and connect it via USB.
See the official chrome documentation here
chrome://inspect/#deviceschrome://inspect/#devices)Inspect on the tab you want to debugFor easy iOS debugging add the ?console URL parameter to get a useful on-screen JavaScript console.
If you have a Mac, you can also attach to Safari (similar to the Android workflow above).
WebXR usage and debugging on iOS requires using a third-party browser: Mozilla WebXR Viewer.
Quest is just an Android device - see the Android Debugging section for steps.
Deployment is the process of making your application available to the public on a website. Needle Engine ensures that your project is as small and fast as possible by using the latest compression techniques such as KTX2, Draco, and Meshopt.
Feel something is missing?
Please let us know in our discord!
See guides above on how to access the options from within your Editor (e.g. Unity or Blender).
The main difference to a production build is that it does not perform ktx2 and draco compression (for reduction of file size and loading speed) as well as the option to progressively load high-quality textures.
We generally recommend making production builds for optimized file size and loading speed (see more information below).
To make a production build, you need to have toktx installed, which provides texture compression using the KTX2 supercompression format. Please go to the toktx Releases Page and download and install the latest version (v4.1.0 at the time of writing). You may need to restart Unity after installing it.
If you're sure that you have installed toktx and it's part of your PATH but still can't be found, please restart your machine and try build again.
If you plan on adding your own custom glTF extensions, building for production requires handling those in gltf-transform. See @needle-tools/gltf-build-pipeline for reference.
Production builds will by default compress textures using KTX2 (either ETC1S or UASTC depending on their usage in the project)
but you can also select WebP compression and select a quality level.
| Format | ETC1S | UASTC | WebP |
|---|---|---|---|
| GPU Memory Usage | Low | Low | High (uncompressed) |
| File Size | Low | High | Very low |
| Quality | Medium | Very high | Depends on quality setting |
| Typical usage | Works for everything, but best for color textures | High-detail data textures: normal maps, roughness, metallic, etc. | Files where ETC1S quality is not sufficient but UASTC is too large |
You have the option to select texture compression and progressive loading options per Texture by using the Needle Texture Importer in Unity or in the Material tab in Blender.
Select the material tab. You will see compression options for all textures that are being used by that material.
Windows: Make sure you have added toktx to your system environment variables. You may need to restart your computer after adding it to refresh the environment variables. The default install location is C:\Program Files\KTX-Software\bin
By default, a production build will compress meshes using Draco compression. Use the MeshCompression component to select between draco and mesh-opt per exported glTF.
Additionally you can setup mesh simplification to reduce the polycount for production builds in the mesh import settings (Unity). When viewing your application in the browser, you can append ?wireframe to your URL to preview the meshes.
| Format | Draco | Meshopt |
|---|---|---|
| GPU Memory Usage | Medium | Low |
| File Size | Lowest | Low |
| Animation compression | No | Yes |
Add the MeshCompression component to select which compression should be applied per exported glTF.
GltfObject or the prefab that is referenced / exported by any of your components.Select a Mesh and open the Needle importer options to see available options for the selected mesh:
You can also add the Progressive Texture Settings component anywhere in your scene, to make all textures in your project be progressively loaded. Progressive loading is not applied to lightmaps or skybox textures at this point.
With progressive loading textures will first be loaded using a lower resolution version. A full quality version will be loaded dynamically when the texture becomes visible. This usually reduces initial loading of your scene significantly.
Since Needle Engine 3.36 we automatically generate LOD meshes and switch between them at runtime. LODs are loaded on demand and only when needed so so this feature both reduces your loading time as well as performance.
Key Beneftis
You can either disable LOD generation for your whole project in the Progressive Loading Settings component or in the Mesh Importer settings.
Glitch provides a fast and free way for everyone to host small and large websites. We're providing an easy way to remix and deploy to a new Glitch page (based on our starter), and also to run a minimalistic networking server on the same Glitch page if needed.
You can deploy to glitch by adding the DeployToGlitch component to your scene and following the instructions.
Note that free projects hosted on glitch may not exceed ~100 MB. If you need to upload a larger project consider using a different deployment target.
Add the DeployToGlitch component to the GameObject that also has the ExportInfo component.
Click the Create new Glitch Remix button on the component 
Glitch will now create a remix of the template. Copy the URL from your browser
Open Unity again and paste the URL in the Project Name field of your Deploy To Glitch component
Wait a few seconds until Unity has received your deployment key from glitch (this key is safely stored in the .env file on glitch. Do not share it with others, everyone with this key will be able to upload to your glitch website)
Once the Deploy Key has been received you can click the Build & Deploy button to upload to glitch.
Remix on glitch button on the component.env file and enter a password in the field Variable Value next to the DEPLOY_KEYKey fieldDeployToGlitch button to build and upload your project to glitch. A browser will open when the upload has finished. Try to refresh the page if it shows black after having opened it.If you click Create new Glitch Remix and the browser shows an error like there was an error starting the editor you can click OK. Then go to glitch.com and make sure you are signed in. After that you then try clicking the button again in Unity or Blender.
Just add the DeployToNetlify component to your scene and follow the instructions. You can create new projects with the click of a button or by deploying to existing projects.
See our sample project for the project configuration
Create a new project on itch.io
Set Kind of project to HTML
Add the DeployToItch component to your scene and click the Build button
Wait for the build to finish, it will open a folder with the final zip when it has finished
Upload to final zip to itch.io
Select This file will be played in the browser
Save your itch page and view the itch project page.
It should now load your Needle Engine project ๐
If you see this error after uploading your project make sure you do not upload a gzipped index.html. You can disable gzip compression in vite.config.js in your Needle web project folder. Just remove the line with viteCompression({ deleteOriginFile: true }). The build your project again and upload to itch.
DeployToFTP componentยน on a GameObject in your scene (it is good practice to add it to the same GameObject as ExportInfo - but it is not mandatory)DeployToFTP component to build your project and uploading it to your FTP account
ยน Deploy to FTP component
ยฒ FTP Server asset containing the access information of your FTP user account
Deploy To FTP component after server asset is assigned. You can directly deploy to a subfolder on your server using the path field
File > Build Settings, select Needle Engine, and click on Builddist folder will open automatically after all build and compression steps have run.dist folder to your FTP storage.That's it! ๐
Note: If the result doesn't work when uploaded it might be that your web server does not support serving gzipped files. You have two options to fix the problem:
Option 1: You can try enabling gzip compression on your server using a htaccess file!
Option 2: You can turn gzip compression off in the build settings at File/Build Window and selecting the Needle Engine platform.
Note: If you're getting errors during compression, please let us know and report a bug! If your project works locally and only fails when doing production builds, you can get unstuck right away by doing a Development Build. For that, simply toggle
Development Buildon in the Build Settings.
To enable gzip compression on your FTP server you can create a file named .htaccess in the directory you want to upload to (or a parent directory).
Insert the following code into your .htaccess file and save/upload it to your server:
<IfModule mod_mime.c>
+RemoveType .gz
+AddEncoding gzip .gz
+AddType application/javascript .js.gzAdd the DeployToGithubPages component to your scene and copy-paste the github repository (or github pages url) that you want to deploy to.
With Needle Engine you can build to Facebook Instant Games automatically
No manual adjustments to your web app or game are required.
Deploy To Facebook Instant Games component to your scene: 
Build For Instant Games buttonInstant Games module and go to Instant Games/Web hosting
Upload version button (1). After the upload has finished and the zip has been processed click the Stage for testing button to test your app (2, here the blue button) or Push to production (the button with the star icon) 
Play button next to each version to test your game on facebook.Create a new app and select Other. Then click Next
Select type Instant Games
After creating the app add the Instant Games product 
Here you can find the official instant games documentation on facebook.
Note that all you have to do is to create an app with instant games capabilities.
We will take care of everything else and no manual adjustments to your Needle Engine website are required.
In Unity open File/Build Settings and select Needle Engine for options:
To build your web project for uploading to any web server you can click Build in the Unity Editor Build Settings Window. You can enable the Development Build checkbox to omit compression (see below) which requires toktx to be installed on your machine.
To locally preview your final build you can use the Preview Build button at the bottom of the window. This button will first perform a regular build and then start a local server in the directory with the final files so you can see what you get once you upload these files to your webserver.
Nodejs is only required during development. The distributed website (using our default vite template) is a static page that doesn't rely on Nodejs and can be put on any regular web server. Nodejs is required if you want to run our minimalistic networking server on the same web server (automatically contained in the Glitch deployment process).
It's possible to create regular Unity projects where you can build both to Needle Engine and to regular Unity platforms such as Desktop or even WebGL. Our "component mapping" approach means that no runtime logic is modified inside Unity - if you want you can regularily use Play Mode and build to other target platforms. In some cases this will mean that you have duplicate code (C# code and matching TypeScript logic). The amount of extra work through this depends on your project.
Enter Play Mode in Unity
In Project Settings > Needle Engine, you can turn off Override Play Mode and Override Build settings to switch between Needle's build process and Unity's build process:
Needle Engine for Unity supports various commandline arguments to export single assets (Prefabs or Scenes) or to build a whole web project in batch mode (windowsless).
The following list gives a table over the available options:
-scene | path to a scene or a asset to be exported e.g. Assets/path/to/myObject.prefab or Assets/path/to/myScene.unity |
-outputPath <path/to/output.glb> | set the output path for the build (only valid when building a scene) |
-buildProduction | run a production build |
-buildDevelopment | run a development build |
-debug | open a console window for debugging |
Needle's Everywhere Actions are a set of carefully chosen components that allow you to create interactive experiences in Unity without writing a single line of code.
They are designed to serve as building blocks for experiences across the web, mobile and XR, including Augmented Reality on iOS.
From low-level triggers and actions, higher-level complex interactive behaviours can be built.
For iOS support add the USDZExporter component to your scene. It is good practice to add it to the same object as the WebXR component (but not mandatory)
To add an action to any object in your scene
select it and then click Add Component > Needle > Everywhere Actions > [Action].
| Action | Description | Example Use Cases |
|---|---|---|
| Play Animation on Click | Plays a selected animation state from an Animator. After playing, it can optionally transition to another animation. | Product presentations, interactive tutorials, character movement |
| Change Material on Click | Switch out one material for others. All objects with that material will be switched together. | Product configurators, characters |
| Look At | Make an object look at the camera. | UI elements, sprites, info graphics, billboard effects, clickable hotspots |
| Play Audio on Click | Plays a selected audio clip. | Sound effects, Narration, Museum exhibits |
| Hide on Start | Hides an object at scene start for later reveal. | |
| Set Active on Click | Show or hide objects. | |
| Change Transform on Click | Move, rotate or scale an object. Allows for absolute or relative movement. | Characters, products, UI animation (use animation for more complex movements) |
| Audio Source | Plays audio on start and keeps looping. Spatial or non-spatial | Background music, ambient sounds |
| WebXR Image Tracking | Tracks an image target and shows or hides objects. | AR experiences, product presentations |
Demonstrates spatial audio, animation, and interactions.
Demonstrates combining animations, look at, and movement.
Demonstrates how to attach 3D content onto a custom image marker. Start the scene below in AR and point your phone's camera at the image marker on a screen, or print it out.
On Android: please turn on "WebXR Incubations" in the Chrome Flags. You can find those by pasting chrome://flags/#webxr-incubations into the Chrome browser address bar of your Android phone.
Creating new Everywhere Actions involves writing code for your action in TypeScript, which will be used in the browser and for WebXR, and using our TriggerBuilder and ActionBuilder API to create a matching setup for Augmented Reality on iOS via QuickLook. When creating custom actions, keep in mind that QuickLook has a limited set of features available. You can still use any code you want for the browser and WebXR, but the behaviour for QuickLook may need to be an approximation built from the available triggers and actions.
Tips
Often constructing specific behaviours requires thinking outside the box and creatively applying the available low-level actions. An example would be a "Tap to Place" action โ there is no raycasting or hit testing available in QuickLook, but you could cover the expected placement area with a number of invisible objects and use a "Tap" trigger to move the object to be placed to the position of the tapped invisible object.
Triggers and Actions for QuickLook are based on Apple's Preliminary Interactive USD Schemas
Here's the implementation for HideOnStart as an example for how to create an Everywhere Action with implementations for both the browser and QuickLook:
import { Behaviour, UsdzBehaviour, BehaviorModel, TriggerBuilder, ActionBuilder, BehaviorExtension, USDObject, USDZExporterContext } from "@needle-tools/engine";
+
+export class HideOnStart extends Behaviour implements UsdzBehaviour {
+
+ start() {
+ this.gameObject.visible = false;
+ }
+
+ createBehaviours(ext: BehaviorExtension, model: USDObject, _context: USDZExporterContext) {
+ if (model.uuid === this.gameObject.uuid)
+ ext.addBehavior(new BehaviorModel("HideOnStart_" + this.gameObject.name,
+ TriggerBuilder.sceneStartTrigger(),
+ ActionBuilder.fadeAction(model, 0, false)
+ ));
+ }
+
+ beforeCreateDocument() {
+ this.gameObject.visible = true;
+ }
+
+ afterCreateDocument() {
+ this.gameObject.visible = false;
+ }
+}Tips
Often, getting the right behaviour will involve composing higher-level actions from the available lower-level actions. For example, our "Change Material on Click" action is composed of a number of fadeActions and internally duplicates objects with different sets of materials each. By carefully constructing these actions, complex behaviours can be achieved.
| Triggers | |
|---|---|
TriggerBuilder.sceneStartTrigger | |
TriggerBuilder.tapTrigger |
| Actions | |
|---|---|
ActionBuilder.fadeAction | |
ActionBuilder.startAnimationAction | |
ActionBuilder.waitAction | |
ActionBuilder.lookAtCameraAction | |
ActionBuilder.emphasize | |
ActionBuilder.transformAction | |
ActionBuilder.playAudioAction |
| Group Actions | |
|---|---|
ActionBuilder.sequence | |
ActionBuilder.parallel | |
GroupAction.addAction | |
GroupAction.makeParallel | |
GroupAction.makeSequence | |
GroupAction.makeLooping | |
GroupAction.makeRepeat |
To see the implementation of our built-in Everywhere Actions, please take look at src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts.
The following pages provide more examples and samples that you can test and explore right now:
Add an ExportInfo component to your Unity scene to generate a new web project from a template, link to an existing web project that you want to export to, set up dependencies to other libraries and packages and to deploy your project.
By default, your scene is exported on save. This setting can be changed by disabling Auto Export in the ExportInfo component.
To export meshes, materials, animations, textures (...) create a new GameObject in your hierarchy and add a GltfObject component to it. This is the root of a new glTF file. It will be exported whenever you make a change to the scene and save.
Only scripts and data on and inside those root objects is exported. Scripts and data outside of them are not exported.
Add a cube as a child of your root object and save your scene. Note that the output assets/ folder (see project structure) now contains a new .glb file with the same name as your root GameObject.
You can enable the Smart Export setting (via Edit/Project Settings/Needle ) to only export when a change in this object's hierarchy is detected.
Objects with the EditorOnly tag will be ignored on export including their child hierarchy.
Be aware that this is preferred over disabling objects as disabled will still get exported in case they're turned on later.
If you want to split up your application into multiple levels or scenes then you can simply use the SceneSwitcher component. You can then structure your application into multiple scenes or prefabs and add them to the SceneSwitcher array to be loaded and unloaded at runtime. This is a great way to avoid having to load all your content upfront and to keep loading times small (for example it is what we did on needle.tools by separating each section of your website into its own scene and only loading them when necessary)
You can split up scenes and prefabs into multiple glTF files, and then load those on demand (only when needed). This keeps loading performance fast and file size small. See the AssetReference section in the Scripting docs.
The scene complexity here is recommended to ensure good performance across a range of web-capable devices and bandwidths. There's no technical limitation to this beyond the capabilities of your device.
Prefabs can be exported as invidual glTF files and instantiated at runtime. To export a prefab as glTF just reference a prefab asset (from the project browser and not in the scene) from one of your scripts.
Exporting Prefabs works with nesting too: a component in a Prefab can reference another Prefab which will then also be exported.
This mechanism allows for composing scenes to be as lightweight as possible and loading the most important content first and defer loading of additional content.
Similar to Prefab assets, you can reference other Scene assets.
To get started, create a component in Unity with a UnityEditor.SceneAsset field and add it to one of your GameObjects inside a GltfObject. The referenced scene will now be exported as a separate glTF file and can be loaded/deserialized as a AssetReference from TypeScript.
You can keep working inside a referenced scene and still update your main exporter scene/website. On scene save or play mode change we will detect if the current scene is being used by your currently running server and then trigger a re-export for only that glb. (This check is done by name - if a glb inside your <web_project>/assets/ folder exists, it is exported again and the main scene reloads it.)
As an example on our website each section is setup as a separate scene and on export packed into multiple glb files that we load on demand:
If you want to reference and load a prefab from one of your scripts you can declare a AssetReference type.
Here is a minimal example:
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since ``instantiate()`` does create a copy of the asset after loading it
+ }
+}Needle Engine supports a considerable and powerful subset of Unity's animation features:
Needle Engine is one of the first to support the new glTF extension KHR_ANIMATION_POINTER.
This means that almost all properties, including script variables, are animatable.
One current limitation is that materials won't be duplicated on export โ if you want to animate the same material with different colors, for example, you currently need to split the material in two.
The Unity skybox and custom reflection (if any) are baked into a texture on export and automatically exported inside the NEEDLE_lightmaps extension.
To change the skybox resolution you can add a SkyboxExportSettings component to your scene.
If you don't want to skybox to be exported at all in a glb file you can untick the Embed Skybox option on your GltfObject component
By default, materials are converted into glTF materials on export. glTF supports a physically based material model and has a number of extensions that help to represent complex materials.
For full control over what gets exported, it's highly recommended to use the glTF materials provided by UnityGltf:
These materials are exported as-is, with no conversion necessary. They allow for using advanced material properties such as refractive transmission and iridescence, which can be exported as well.
Materials that can be converted out-of-the-box:
Other materials are converted using a propery name heuristic. That means that depending on what property names your materials and shaders use, you might want to either refactor your custom shader's properties to use the property names of either URP/Lit or PBRGraph, or export the material as Custom Shader.
To export custom shaders (e.g. ShaderGraph shaders), add an ExportShader Asset Label (see bottom of the inspector) to the shader you want to export.
Warning
Please see limitations listed below
Note that Custom Shaders aren't part of the ratified glTF material model. The resulting GLB files will not display correctly in other viewers (the materials will most likely display white).
To export lightmaps simply generate lightmaps in Unity. Lightmaps will be automatically exported.
When working on multiple scenes, disable "Auto Generate" and bake lightmaps explicitly. Otherwise, Unity will discard temporary lightmaps on scene change.
There's no 100% mapping between how Unity handles lights and environment and how three.js handle that. For example, Unity has entirely separate code paths for lightmapped and non-lightmapped objects (lightmapped objects don't receive ambient light since that is already baked into their maps), and three.js doesn't distinguish in that way.
This means that to get best results, we currently recommend specific settings if you're mixing baked and non-baked objects in a scene:
Environment Lighting: Skybox
+Ambient Intensity: 1
+Ambient Color: black2021.3+
2020.3+
If you have no baked objects in your scene, then the following settings should also yield correct results:
Environment Lighting: Color
+Ambient Color: anyOpen Edit/Project Settings/Needle to get the Needle Engine plugin settings. At the top of the window you'll find fields for entering your license information.
Email - Enter the email you purchased the license withInvoice ID - Enter one of the invoice ids that you received by email
Open Addon Preferences/Needle Engine to get to the Needle Engine addon settings
Email - Enter the email you purchased the license withInvoice ID - Enter one of the invoice ids that you received by emailThis usually happens when you're using custom shaders or materials and their properties don't cleanly translate to known property names for glTF export.
You can either make sure you're using glTF-compatible materials and shaders, or mark shaders as "custom" to export them directly.
You might see a warning in your browser about SSL Security depending on your local configuration.
This is because while the connection is encrypted, by default there's no SSL certificate that the browser can validate. If that happens: click Advanced and Proceed to Site. In Safari, you might need to refresh the page afterwards, because it does not automatically proceed. Now you should see your scene in the browser!
The dialogue should only show up once for the same local server.
Tips
Connections are secured, because we're enforcing HTTPS to make sure that WebXR and other modern web APIs work out-of-the-box. Some browsers will still complain that the SSL connection (between your local development server and the local website) can't be automatically trusted, and that you need to manually verify you trust that page. Automatic Page Reload and Websocket connections may also be affected depending on the browser and system settings.
See the Testing docs for information on how to set up a self-signed certificate for a smoother development experience.
If that happens there's usually an exception either in engine code or your code. Open the dev tools (Ctrl + Shift + I or F12 in Chrome) and check the Console for errors.
In some cases, especially when you just updated the Needle Engine package version, this can be fixed by stopping and restarting the local dev server.
For that, click on the running progress bar in the bottom right corner of the Editor, and click the little X to cancel the running task. Then, simply press Play again.
If you are using vite or next.js make sure to add the Needle Engine plugins to your config. Example for vite:
const { needlePlugins } = await import('@needle-tools/engine/plugins/vite/index.js');
+plugins: [needlePlugins(command, needleConfig)]Example for next.js
const { needleNext } = await import("@needle-tools/engine/plugins/next/index.js");
+return needleNext({}, { modules: { webpack } });You can also just declare the missing variables in e.g. your root index.html in a script tag like so:
<script>
+ var NEEDLE_ENGINE_META = {}
+ var NEEDLE_USE_RAPIER = true;
+</script>Please make sure that sure that you have set Lightmap Encoding to Normal Quality.
Go to Edit/Project Settings/Player for changing the setting.
This can have many reasons, but a few common ones are:
EditorOnly to completely ignore them for export.GltfObject components in your scene and they all have EmbedSkybox enabled (you need to have the skybox only once per scene you export)If loading time itself is an issue you can try to split up your content into multiple glb files and load them on-demand (this is what we do on our website). For it to work you can put your content into Prefabs or Scenes and reference them from any of your scripts. Please have a look at Scripting/Addressables in the documentation.
UI/Legacy/Text component and not the TextMeshPro - Text componentEnsure you're following best practices for lightmaps and read about mixing baked and non-baked objects
Make sure that your lights are set to "Baked" or "Realtime". "Mixed" is currently not supported.
Intensity Multiplier factor for Skybox in Lighting/Environment is currently not supported and has no effect in Needle EngineAlso see the docs on mixing baked and non-baked objects.
If you use a custom cubemap: You can override the texture import settings of the skybox texture (assigned to your cubemap)
If you use the default skybox: Add a SkyboxExportSettings component anywhere in your scene to override the default resolution
Please the following points:
Ensure your project is set to Linear colorspace.
WebXR component somewhere inside your root GltfObject.AR Session Root component on your root GltfObject or within the child hierarchy to specify placement, scale and orientation for WebXR.XR Rig component to control where users start in VRWhen creating new scripts in npmdefs in sub-scenes (that is a scene that is exported as a reference from a script in your root export scene) you currently have to re-export the root scene again. This is because the code-gen that is responsible for registering new scripts currently only runs for scenes with a ExportInfo component. This will be fixed in the future.
The most likely reason is an incorrect installation. Check the console and the ExportInfo component for errors or warnings.
If these warnings/errors didn't help, try the following steps in order. Give them some time to complete. Stop once your problem has been resolved. Check the console for warnings and errors.
ExportInfo component and clicking InstallExportInfo component, holding Alt and clicking Clean Installnpm install and then npm run dev-hostnode_modules/@needle-tools/engine) as well as three.js (node_modules/three) did install.npm install in both of these directories as well.While generating C# components does technically run with vanilla javascript too we don't recommend it and fully support it since it is more guesswork or simply impossible for the generator to know which C# type to create for your javascript class. Below you find a minimal example on how to generate a Unity Component from javascript if you really want to tho.
class MyScript extends Behaviour
+{
+ //@type float
+ myField = 5;
+}Please check that you're not accidentally in the Inspector's Debug mode โ switch back to Normal:
Make sure to download and install toktx
On Windows: Make sure you have added toktx to your system environment variables. You may need to restart your computer after adding it to refresh the environment variables. The default install location is C:\Program Files\KTX-Software\bin
Make sure your project is on a disk that is known to work with node.js. Main reason for failures is that the disk doesn't support symlinks (symbolic links / softlinks), which is a requirement for proper functioning of node.js.
NTFS formatting should always work. Known problematic file system formattings are exFAT and FAT32.
To check the format of your drives, you can:
msinfo32 in cmd Windows + R)@. Expected identifier, string literal, numeric literal or ..."Needle Engine uses typescript decorators for serialization.
To fix this error make sure to enable experimentalDecorators in your tsconfig.json
You're likely using an x86_64 version of Unity on an (ARM) Apple Silicon processor. Unity 2020.3 is only available for x86_64, later versions also have Apple Silicon versions.
Our Unity integration calling npm will thus do so from an x86_64 process, resulting in the x86_64 version of node and vite/esbuild being used. When you afterwards try to run npm commands in the same project from an Apple Silicon app (e.g. VS Code), npm will complain about mismatching architectures with a long error message.
To fix this, use an Apple Silicon version of Unity (2021.1 or later).
You can also temporarily fix it on 2020.3 by deleting the node_modules folder and running npm install again from VS Code. You'll have to delete node_modules again when you switch back to Unity.
This can happen when you have e.g. a SceneSwitcher (or any other component that loads a scene or asset) and the referenced Asset in Unity contains a GltfObject that has the same name as your original scene with the SceneSwitcher. You can double check this in Unity if you get an error that says something like:
Failed to export โ YourSceneName.glb
+you seem to have objects with the same name referencing each other.To fix this you can:
GltfObject in the referenced Prefab or SceneIf this doesn't fix the problem please ask in our discord.
Please see the circular reference error section.
Use a detector like this one to determine if your device supports WebGL 2, it also hints at what could be the cause of your problem, but generally make sure you have updated your browser and drivers. WebGL 1 is not supported.
Ask in our friendly discord community
Needle Engine is a fully fledged 3D engine that runs in the browser. It comes with all the features you'd expect from a modern 3D engine, and more. If you haven't yet, take a look at our Homepage and our Samples and Showcase.
Both PBR Materials and Custom shaders created with Shader Graph or other systems can be exported.
Use the node based ShaderGraph to create shaders for the web. ShaderGraph makes it easy for artists to keep creating without having to worry about syntax.
Read more about PBR Materials โข Custom Shaders
Needle Engine runs everywhere web technology does: run the same application on desktop, mobile, AR or VR. We build Needle Engine with XR in mind and consider this as and integral part of responsive webdesign!
Use Everywhere Actions for Interactive AR on both Android and iOS.
Lightmaps can be baked in Unity or Blender to easily add beautiful static light to your 3d content. Lightbaking for the web was never as easy. Just mark objects that you want to lightmap as static in Unity, add one or many lights to your scene (or use emissive materials) and click bake. Needle Engine will export your lightmaps per scene and automatically load and display them just as you see it in the Editor!
Note: There is no technical limitation on which lightmapper to use, as long as they end up in Unity's lightmapping data structures. Third party lightmappers such as Bakery thus are also supported.
Networking is built into the core runtime. Needle Engine deployments to Glitch come with a tiny server that allows you to deploy a multiplayer 3D environment in seconds. The built-in networked components make it easy to get started, and you can create your own synchronized components. Synchronizing variables and state is super easy!
Needle Engine brings powerful animations, state control and sequencing to the web โ from just playing a single animation to orchestrating and blending complex animations and character controllers. The Exporter can translate Unity components like Animator and Timeline into a web-ready format.
We even added this functionality to our Blender addon so you can craft compatible animation state machines and export nla tracks as timelines to the web from within Blender too.
The Animator and AnimatorController components in Unity let you setup animations and define conditions for when and how to blend between them. We support exporting state machines, StateMachineBehaviours, transitions and layers. StateMachineBehaviours are also supported with OnStateEnter, OnStateUpdate and OnStateExit events.
Note: Sub-states and Blend Trees are not supported.
We're also translating Unity's Timeline setup and tracks into a web-ready format.
Supported tracks include: AnimationTrack, AudioTrack, ActivationTrack, ControlTrack, SignalTrack.
Note: Sub-Timelines are currently not supported.
Note: It's possible to export custom timeline tracks.
Use Rigidbodies, Mesh Colliders, Box Colliders and SphereColliders to add some juicy physics to your world.
Building UI using Unity's UI canvas system is in development. Features currently include exporting Text (including fonts), Images, Buttons.
See the ui component reference for supported component.
Export of Unity ParticleSystem (Shuriken) is in development. Features currently include world/local space simulation, box and sphere emitter shapes, emission over time as well as burst emission, velocity- and color over time, emission by velocity, texturesheet animation, basic trails.
See a live sample of supported features below:
Builtin effects include Bloom, Screenspace Ambient Occlusion, Depth of Field, Color Correction. You can also create your own custom effects. See the component reference for a complete list.
Needle Engine comes with powerful integrations into the Unity Editor and Blender.
It allows you to setup and export complex scenes in a visual way providing easy and flexible collaboration between artists and developers.
Needle Engine uses as component based workflow. Create custom scripts in typescript or javascript. Use our modular npm-based package workflow integrated into Unity. A typescript to C# component compiler produces Unity components magically on the fly.
See our Getting Started Guide to learn about how to download and set up Needle Engine.
Learn about our vision or dive deeper into some of the technical background and glTF powering it all.
With Needle Engine, you can create fully interactive 3D websites. They can be deployed anywhere on the web and get optimized automatically by the Needle Engine Build Pipeline reducing asset size by up x100 without compromising quality.
Needle Engine is available as a package for Unity, add-on for Blender, as a ready-to-go Web Component, and as npm package for projects without an editor integration. Each of these comes with the same components and building blocks โ the choice is yours.
Needle Engine makes it easy to build web apps. That often, but not always, includes coding with JavaScript/TypeScript or writing HTML and CSS to describe user interfacces. We recommend Visual Studio Code for creating and editing these files. It's a free, open-source code editor that runs on Windows, macOS, and Linux.
Now that you've installed Needle Engine, you're ready to dive deeper into project creation, component workflows, scripting, deployment and more.
In case you need troubleshooting help, please see the Questions and Answers โ FAQ section.
We welcome you to join our Forum and Discord Community.
Needle Engine is build as a web component.
This means just install @needle-tools/engine in your project and include <needle-engine src="path/to/your.glb"> anywhere in your web-project.
npm i @needle-tools/engineWith our default Vite based project template Needle Engine gets bundled into a web app on deployment. This ensures smaller files, tree-shaking (similar to code stripping in Unity) and optimizes load times. Instead of downloading numerous small scripts and components, only one or a few are downloaded that contain the minimal code needed.
Vite (our default bundler) has a good explanation why web apps should be bundled: Why Bundle for Production
Needle Engine is unoponiated about the choice of framework. Our default template uses the popular vite as bundler. From there, you can add vue, svelte, nuxt, react, react-three-fiber or other frameworks, and we have samples for a lot of them. You can also integrate other bundlers, or use none at all โ just plain HTML and Javascript.
Here's some example tech stacks that are possible and that we use Needle Engine with:
Vite + HTML โ This is what our default template uses!
Vite + Vue โ This is what the Needle Tools website uses!. Find a sample to download here.
Vite + Svelte
Vite + SvelteKit
Vite + React โ There's an experimental template shipped with the Unity integration for this that you can pick when generating a project!
react-three-fiber โ There's an experimental template shipped with the Unity integration for this that you can pick when generating a project!
Vercel & Nextjs โ Find a example nextjs project here
CDN without any bundler โ Find a code example here
In short: we're currently providing a minimal vite template, but you can extend it or switch to other frameworks โ
Let us know what and how you build, and how we can improve the experience for your usecase or provide an example!
Tips
Some frameworks require custom settings in needle.config.json. Learn more here. Typically, the baseUrl needs to be set.
You can create and share your own web project templates to use other bundlers, build systems, or none at all.
Create a new Template
Create/Needle Engine/Project Template to add a ProjectTemplate into the folder you want to use as a templateThe dependencies come from unity when there is a NpmDef in the project (so when your project uses local references).
You could also publish your packages to npm and reference them via version number.
Tree shaking refers to a common practice when it comes to bundling of web applications (see MSDN docs). It means that code paths and features that are not used in your code will be removed from the final bundled javascript file(s) to reduce filesize. See below about features that Needle Engine includes and remove them:
Option 1: via needlePlugins config:
Set useRapier to false in your vite.config: needlePlugins(command, needleConfig, { useRapier: false }),
Option 2: via vite.define config:
Declare the NEEDLE_USE_RAPIER define with false
define: {
+ NEEDLE_USE_RAPIER: false
+},Option 3: via .env
Create a .env file in your web project and add VITE_NEEDLE_USE_RAPIER=false
Option 4: via Unity component
Add the Needle Engine Modules component to your scene and set Physics Engine to None
We support easily creating a Progressive Web App (PWA) directly from our vite template.
PWAs are web applications that load like regular web pages or websites but can offer user functionality such as working offline, push notifications, and device hardware access traditionally available only to native mobile applications.
By default, PWAs created with Needle have offline support, and can optionally refresh automatically when you publish a new version of your app.
npm install vite-plugin-pwa --save-devvite.config.js as seen below. Make sure to pass the same pwaOptions object to both needlePlugins and VitePWA.import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig(async ({ command }) => {
+
+ // Create the pwaOptions object.
+ // You can edit or enter PWA settings here (e.g. change the PWA name or add icons).
+ /** @type {import("vite-plugin-pwa").VitePWAOptions} */
+ const pwaOptions = {};
+
+ const { needlePlugins } = await import("@needle-tools/engine/plugins/vite/index.js");
+
+ return {
+ plugins: [
+ // pass the pwaOptions object to the needlePlugins and the VitePWA function
+ needlePlugins(command, needleConfig, { pwa: pwaOptions }),
+ VitePWA(pwaOptions),
+ ],
+ // the rest of your vite config...All assets are cached by default
Note that by default, all assets in your build folder are added the PWA precache โ for large applications with many dynamic assets, this may not be what you want (imagine the YouTube PWA caching all videos once a user opens the app!). See More PWA Options for how to customize this behavior.
To test your PWA, deploy the page, for example using the DeployToFTP component.
Then, open the deployed page in a browser and check if the PWA features work as expected:
PWAs use Service Workers to cache resources and provide offline support. Service Workers are somewhat harder to use during development, and typically are only enabled for builds (e.g. when you use a DeployTo... component).
You can enable PWA support for development by adding the following to the options object in your vite.config.js.
const pwaOptions = {
+ // Note: PWAs behave different in dev mode.
+ // Make sure to verify the behaviour in production builds!
+ devOptions: {
+ enabled: true,
+ }
+};Please note that PWAs in development mode do not support offline usage โ trying it may result in unexpected behavior.
Websites typically show new or updated content on page refresh.
In some situations, you may want the page to refresh and reload automatically when a new version has been published โ such as in a museum, trade show, public display, or other long-running scenarios.
To enable automatic updates, set the updateInterval property in the pwaOptions object to a duration (in milliseconds) in which the app should check for updates. If an update is detected, the page will reload automatically.
const pwaOptions = {
+ updateInterval: 15 * 60 * 1000, // 15 minutes, in milliseconds
+};Periodic Reloads and User Data
It's not recommended to use automatic reloads in applications where users are interacting with forms or other data that could be lost on a reload. For these applications, showing a reload prompt is recommended.
See the Vite PWA plugin documentation for more information on how to implement a reload prompt instead of automatic reloading.
Since Needle uses the Vite PWA plugin under the hood, you can use all options and hooks provided by that.
For example, you can provide a partial manifest with a custom app title or theme color:
const pwaOptions = {
+ // manifest options provided here will override the defaults
+ manifest: {
+ name: "My App",
+ short_name: "My App",
+ theme_color: "#B2D464",
+ }
+};For complex requirements like partial caching, custom service workers or different update strategies, you can remove the { pwa: pwaOptions } option from needlePlugins and add PWA functionality directly through the Vite PWA plugin.
Code that you expose can be accessed from JavaScript after bundling. This allows to build viewers and other applications where there's a split between data known at edit time and data only known at runtime (e.g. dynamically loaded files, user generated content).
For accessing components from regular javascript outside of the engine please refer to the interop with regular javascript section
See the Loading Display section in needle engine component reference
The needle-engine loading appearance can use a light or dark skin.
To change the appearance use the loading-style attribute on the <needle-engine> web component.
Options are light and dark (default):
<needle-engine loading-style="light"></needle-engine>
Please see the Loading Display section in needle engine component reference
Needle Engine is a web engine for complex and simple 3D applications alike. Work on your machine and deploy anywhere. Needle Engine is flexible, extensible and has built-in support for collaboration and XR. It is built around the glTF standard for 3D assets.
Powerful integrations for Unity and Blender allow artists and developers to collaborate and manage web applications inside battle-tested 3d editors. These Integrations allow you to use editor features for creating models, authoring materials, animating and sequencing animations, baking lightmaps and more with ease.
Our powerful compression and optimization pipeline for the web make sure your files are ready, small and load fast.
Access to core networking functionality can be obtained by using this.context.connection from a component. The default backend server connects users to rooms. Users in the same room will share state and receive messages from each other.
Networking is currently based on websockets and sending either json strings (for infrequent updates) or flatbuffers (for frequent updates). Continue reading below for more details:
Enable Networking
Add a SyncedRoom component.
Enable Desktop Viewer Sync
Add a SyncedCamera component.
Enable XR Avatar Sync
Add a WebXRSync component.
Enable Voice Chat
Add a VoIP component.
Enable Screensharing
Add a ScreenCapture component.
SyncedRoom โ handles networking connection and connection to a room.this.context.connectionSyncedTransform โ handles synchronizing transformsSyncedCamera โ spawns a prefab for any user connected to the room which will follow their positionWebXRSync โ handles synchronization for AR and VR usersVoIP โ handles voice-over-IP audio connections, microphone access etc. between usersNetworking โ use to customize the server backend urlSend a json message to all users in the same room:this.context.connection.send(key:string, data: IModel | object | boolean | string | number | null)
Send a flatbuffer binary array to all users in the same room:this.context.connect.sendBinary(arr:Uint8Array)
When sending an object containing a guid field it will be saved in the persistant storage and automatically sent to users that connect later or come back later to the site (e.g. to restore state).
To delete state for a specific guid from the backend storage you can use delete-state as the key and provide an object with { guid: "guid_to_delete" }
Subscribe to json events / listen to events in the room using a specific keythis.context.connection.beginListen(key:string, callback:(data) => void)
Unsubscribe with stopListening
Subscribe to flatbuffer binary eventsthis.context.connection.beginListenBinrary(identifier:string, callback:(data : ByteBuffer) => void)
Unsubscribe with stopListenBinary
| Room Events | |
|---|---|
this.context.beginListen(RoomEvents.JoinedRoom, () => { }) | Listen to the event when you have joined a networked room |
this.context.beginListen(RoomEvents.LeftRoom, () => { }) | Listen to the event when you have left a networked room |
this.context.beginListen(RoomEvents.UserJoinedRoom, () => { }) | Listen to the event when another user has joined your networked room |
this.context.beginListen(RoomEvents.UserLeftRoom, () => { }) | Listen to the event when another user has left your networked room |
To automatically network fields in a component you can just decorate a field with a @syncField() decorator (note: you need to have experimentalDecorators: true in your tsconfig.json file for it to work)
Automatically network a color field. The following script also changes the color randomly on click
import { Behaviour, IPointerClickHandler, PointerEventData, Renderer, RoomEvents, delay, serializable, showBalloonMessage, syncField } from "@needle-tools/engine";
+import { Color } from "three"
+
+export class Networking_ClickToChangeColor extends Behaviour implements IPointerClickHandler {
+
+ // START MARKER network color change syncField
+ /** syncField does automatically send a property value when it changes */
+ @syncField(Networking_ClickToChangeColor.prototype.onColorChanged)
+ @serializable(Color)
+ color!: Color;
+
+ private onColorChanged() {
+ // syncField will network the color as a number, so we need to convert it back to a Color when we receive it
+ if (typeof this.color === "number")
+ this.color = new Color(this.color);
+ this.setColorToMaterials();
+ }
+ // END MARKER network color change syncField
+
+ /** called when the object is clicked and does generate a random color */
+ onPointerClick(_: PointerEventData) {
+ const randomColor = new Color(Math.random(), Math.random(), Math.random());
+ this.color = randomColor;
+ }
+
+ onEnable() {
+ this.setColorToMaterials();
+ }
+
+ private setColorToMaterials() {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (renderer) {
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ // we clone the material so that we don't change the original material
+ // just for demonstration purposes, you can also change the original material
+ const mat = renderer.sharedMaterials[i]?.clone();
+ renderer.sharedMaterials[i] = mat;
+ if (mat && "color" in mat)
+ mat.color = this.color;
+ }
+ }
+ else console.warn("No renderer found", this.gameObject)
+ }
+
+}Simple networking of a number
import { Behaviour, syncField, IPointerClickHandler } from "@needle-tools/engine"
+
+export class AutoFieldSync extends Behaviour implements IPointerClickHandler {
+
+ // Use `@syncField` to automatically network a field.
+ // You can optionally assign a method or method name to be called when the value changes
+ @syncField("myValueChanged")
+ mySyncedValue?: number = 1;
+
+ private myValueChanged() {
+ console.log("My value changed", this.mySyncedValue);
+ }
+
+ onPointerClick() {
+ this.mySyncedValue = Math.random();
+ }
+}Needle Engine currently uses its own networking package hosted on npm. By default if not configured differently using the Networking component Needle Engine will connect to a server running on Glitch.
It can be added to your own fastiy or express server running on any server for example by adding the following code on your server after installing the package:
import networking from "@needle-tools/needle-tiny-networking-ws";
+networking.startServerFastify(fastifyApp, { endpoint: "/socket" });The following options are available:
endpoint string | relative path to the websocket endpoint (e.g. /socket) |
maxUsers number | Amount of users allowed per room |
defaultUserTimeout number | Timeout length in seconds until a user is kicked from a room (if no ping is received). Defaults to 30 seconds |
When deploying your app to Glitch, we include a simple networking backend that is great for prototyping and small deployments (~15-20 people at the same time). You can later update to a bigger/better/stronger networking solution if required.
For testing and development purposes it can be desired to run the needle engine networking package on a local server. We have prepared a repository that is setup to host the websocket package and to make that easy for you. Please follow the instructions in the linked repository:
You can also deploy your own networking server on e.g. google cloud. For further instructions please refer to the description found here: Local Networking Repository
If you want to use a different server for your local development and your hosted development (and the hosted server is not the same as your needle engine deployed website) then you can also enter a absolute URL in the Networking component URL field as well:
Needle Engine Screencapture / Screensharing and Voip components use peerjs for networking audio and video.
setPeerOptions(opts: PeerjsOptions) with your custom options. This can be used to modify the hosting provider in case where you host your own peerjs server.The <needle-engine> web-component comes with a nice collection of built-in attributes that can be used to modify the look and feel of the loaded scene without the need to add or edit the three.js scene directly.
The table below shows a list of the most important ones:
| Attribute | Description |
|---|---|
| Loading | |
src | Path to one or multiple glTF or glb files. Supported types are string, string[] or a stringified array (, separated) |
dracoDecoderPath | URL to the draco decoder |
dracoDecoderType | draco decoder type. Options are wasm or js. See three.js documentation |
ktx2DecoderPath | URL to the KTX2 decoder |
| Rendering | |
background-color | optional, hex color to be used as a background color. Examples: rgb(255, 200, 100), #dddd00 |
background-image | optional, URL to a skybox image (background image) or a preset string: studio, blurred-skybox, quicklook, quicklook-ar |
background-blurriness | optional, bluriness value between 0 (no blur) and 1 (max blur) for the background-image. Example: background-blurriness="0.5" |
environment-image | optional, URL to a environment image (environment light) or a preset string: studio, blurred-skybox, quicklook, quicklook-ar |
contactshadows | optional, render contact shadows |
tone-mapping | optional, supported values are none, linear, neutral, agx |
tone-mapping-exposure | optional number e.g. increase exposure with tone-mapping-exposure="1.5", requires tone-mapping to be set |
| Interaction | |
autoplay | add or set to true to auto play animations e.g. <needle-engine autoplay |
camera-controls | add or set to true to automatically add OrbitControls if no camera controls are found in the scene |
auto-rotate | add to enable auto-rotate (only used with camera-controls) |
| Events | |
loadstart | Name of the function to call when loading starts. Note that the arguments are (ctx:Context, evt:Event). You can call evt.preventDefault() to hide the default loading overlay |
progress | Name of the function to call when loading updates. onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... } |
loadfinished | Name of the function to call when loading finishes |
| Loading Display | Available options to change how the Needle Engine loading display looks. Use ?debugloadingrendering for easier editing |
loading-style | Options are light or dark |
loading-background-color | PRO โ Change the loading background color (e.g. =#dd5500) |
loading-text-color | PRO โ Change the loading text color |
loading-logo-src | PRO โ Change the loading logo image |
primary-color | PRO โ Change the primary loading color |
secondary-color | PRO โ Change the secondary loading color |
hide-loading-overlay | PRO โ Do not show the loading overlay, added in Needle Engine > 3.17.1 |
| Internal | |
hash | Used internally, is appended to the files being loaded to force an update (e.g. when the browser has cached a glb file). Should not be edited manually. |
<!-- Setting the path to a custom glb to be loaded -->
+<needle-engine src="path/to/your.glb"></needle-engine><!-- Overriding where the draco decoder is located -->
+<needle-engine src="path/to/your.glb" dracoDecoderPath="path/to/draco/folder"></needle-engine>Setting environment images, playing animation and automatic camera controls. See it live on stackblitz
<needle-engine
+ camera-controls
+ auto-rotate
+ autoplay
+ skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
+ environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
+ src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
+ >
+ </needle-engine>Receiving an event when the needle-engine context has finished loading:
<needle-engine loadfinished="onLoadFinished"> </needle-engine>
+<script>
+ function onLoadFinished() {
+ console.log("Needle Engine has finished loading");
+ }
+</script>You can easily modify how Needle Engine looks by setting the appropriate attributes on the <needle-engine> web component. Please see the table above for details.
Video tutorial: How to write custom components
Below you will find a few basic scripts as a quick reference.
We also offer a lot of sample scenes and complete projects that you can download and use as a starting point:
import { Behaviour, serializable } from "@needle-tools/engine"
+import { Object3D } from "three"
+
+export class MyComponent extends Behaviour {
+
+ @serializable(Object3D)
+ myObjectReference?: Object3D;
+
+ start() {
+ console.log("Hello world", this);
+ }
+
+ update() {
+ this.gameObject.rotateY(this.context.time.deltaTime);
+ }
+}see scripting for all component events
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Object3D } from "three"
+
+export class MyClass extends Behaviour {
+ // this will be a "Transform" field in Unity
+ @serializable(Object3D)
+ myObjectReference: Object3D | null = null;
+
+ // this will be a "Transform" array field in Unity
+ // Note that the @serializable decorator contains the array content type! (Object3D and not Object3D[])
+ @serializable(Object3D)
+ myObjectReferenceList: Object3D[] | null = null;
+}import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since ``instantiate()`` does create a copy of the asset after loading it
+ }
+}Tips
Find a working example in our samples to download and try
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class LoadingScenes extends Behaviour {
+ // tell the component compiler that we want to reference an array of SceneAssets
+ // @type UnityEditor.SceneAsset[]
+ @serializable(AssetReference)
+ myScenes?: AssetReference[];
+
+ async awake() {
+ if (!this.myScenes) {
+ return;
+ }
+ for (const scene of this.myScenes) {
+ // check if it is assigned in unity
+ if(!scene) continue;
+ // load the scene once
+ const myScene = await scene.loadAssetAsync();
+ // add it to the threejs scene
+ this.gameObject.add(myScene);
+
+ // of course you can always just load one at a time
+ // and remove it from the scene when you want
+ // myScene.removeFromParent();
+ // this is the same as scene.asset.removeFromParent()
+ }
+ }
+
+ onDestroy(): void {
+ if (!this.myScenes) return;
+ for (const scene of this.myScenes) {
+ scene?.unload();
+ }
+ }
+}Add this script to any object in your scene that you want to be clickable. Make sure to also have an ObjectRaycaster component in the parent hierarchy of that object.
import { Behaviour, IPointerClickHandler, PointerEventData, showBalloonMessage } from "@needle-tools/engine";
+
+export class ClickExample extends Behaviour implements IPointerClickHandler {
+
+ // Make sure to have an ObjectRaycaster component in the parent hierarchy
+ onPointerClick(_args: PointerEventData) {
+ showBalloonMessage("Clicked " + this.name);
+ }
+}Add this script to any object in your scene that you want to be clickable. Make sure to also have an ObjectRaycaster component in the parent hierarchy of that object.
The component will send the received click to all connected clients and will raise an event that you can then react to in your app. If you are using Unity or Blender you can simply assign functions to call to the onClick event to e.g. play an animation or hide objects.
import { Behaviour, EventList, IPointerClickHandler, PointerEventData, serializable } from "@needle-tools/engine";
+
+export class SyncedClick extends Behaviour implements IPointerClickHandler {
+
+ @serializable(EventList)
+ onClick!: EventList;
+
+ onPointerClick(_args: PointerEventData) {
+ console.log("SEND CLICK");
+ this.context.connection.send("clicked/" + this.guid);
+ this.onClick?.invoke();
+ }
+
+ onEnable(): void {
+ this.context.connection.beginListen("clicked/" + this.guid, this.onRemoteClick);
+ }
+ onDisable(): void {
+ this.context.connection.stopListen("clicked/" + this.guid, this.onRemoteClick);
+ }
+
+
+ onRemoteClick = () => {
+ console.log("RECEIVED CLICK");
+ this.onClick?.invoke();
+ }
+
+}import { Behaviour, serializable, Animation, IPointerClickHandler, PointerEventData } from "@needle-tools/engine";
+
+export class PlayAnimationOnClick extends Behaviour implements IPointerClickHandler {
+
+ @serializable(Animation)
+ animation?: Animation;
+
+ awake() {
+ if (this.animation) {
+ this.animation.playAutomatically = false;
+ this.animation.loop = false;
+ }
+ }
+
+ onPointerClick(_args: PointerEventData) {
+ if (this.animation) {
+ this.animation.play();
+ }
+ }
+}This can be useful if you want to run your custom animation logic.
You can also export an array of clips.
import { Behaviour, serializable } from "@needle-tools/engine";
+import { AnimationClip } from "three"
+
+export class ExportAnimationClip extends Behaviour {
+
+ @serializable(AnimationClip)
+ animation?: AnimationClip;
+
+ awake() {
+ console.log("My referenced animation clip", this.animation);
+ }
+}import { Behaviour, serializable, EventList } from "@needle-tools/engine"
+
+export class MyComponent extends Behaviour {
+
+ @serializable(EventList)
+ myEvent? : EventList;
+
+ start() {
+ this.myEvent?.invoke();
+ }
+}Tips
EventList events are also invoked on the component level. This means you can also subscribe to the event declared above using myComponent.addEventListener("my-event", evt => {...}) as well.
This is an experimental feature. Please provide feedback in our forum
This is useful for when you want to expose an event to Unity or Blender with some custom arguments (like a string)
import { Behaviour, serializable, EventList } from "@needle-tools/engine";
+import { Object3D } from "three";
+
+/*
+Make sure to have a c# file in your project with the following content:
+
+using UnityEngine;
+using UnityEngine.Events;
+
+[System.Serializable]
+public class MyCustomUnityEvent : UnityEvent<string>
+{
+}
+
+Unity documentation about custom events:
+https://docs.unity3d.com/ScriptReference/Events.UnityEvent_2.html
+
+*/
+
+// Documentation โ https://docs.needle.tools/scripting
+
+export class CustomEventCaller extends Behaviour {
+
+ // The next line is not just a comment, it defines
+ // a specific type for the component generator to use.
+
+ //@type MyCustomUnityEvent
+ @serializable(EventList)
+ myEvent!: EventList;
+
+ // just for testing - could be when a button is clicked, etc.
+ start() {
+ this.myEvent.invoke("Hello");
+ }
+}
+
+export class CustomEventReceiver extends Behaviour {
+
+ logStringAndObject(str: string) {
+ console.log("From Event: ", str);
+ }
+}Example use:
You can nest objects and their data. With properly matching @serializable(SomeType) decorators, the data will be serialized and deserialized into the correct types automatically.
In your typescript component:
import { Behaviour, serializable } from "@needle-tools/engine";
+
+// Documentation โ https://docs.needle.tools/scripting
+
+class CustomSubData {
+ @serializable()
+ subString: string = "";
+
+ @serializable()
+ subNumber: number = 0;
+}
+
+class CustomData {
+ @serializable()
+ myStringField: string = "";
+
+ @serializable()
+ myNumberField: number = 0;
+
+ @serializable()
+ myBooleanField: boolean = false;
+
+ @serializable(CustomSubData)
+ subData: CustomSubData | undefined = undefined;
+
+ someMethod() {
+ console.log("My string is " + this.myStringField, "my sub data", this.subData)
+ }
+}
+
+export class SerializedDataSample extends Behaviour {
+
+ @serializable(CustomData)
+ myData: CustomData | undefined;
+
+ onEnable() {
+ console.log(this.myData);
+ this.myData?.someMethod();
+ }
+}In C# in any script:
using System;
+
+[Serializable]
+public class CustomSubData
+{
+ public string subString;
+ public float subNumber;
+}
+
+[Serializable]
+public class CustomData
+{
+ public string myStringField;
+ public float myNumberField;
+ public bool myBooleanField;
+ public CustomSubData subData;
+}Tips
Without the correct type decorators, you will still get the data, but just as a plain object. This is useful when you're porting components, as you'll have access to all data and can add types as required.
Tips
Keep in mind that you still have access to all web apis and npm packages!
That's the beauty of Needle Engine if we're allowed to say this here ๐
import { Behaviour, showBalloonMessage } from "@needle-tools/engine";
+
+export class WhereAmI extends Behaviour {
+ start() {
+ navigator.geolocation.getCurrentPosition((position) => {
+ console.log("Navigator response:", position);
+ const latlong = position.coords.latitude + ", " + position.coords.longitude;
+ showBalloonMessage("You are at\nLatLong " + latlong);
+ });
+ }
+}import { Behaviour, Text, serializable, WaitForSeconds } from "@needle-tools/engine";
+
+export class DisplayTime extends Behaviour {
+
+ @serializable(Text)
+ text?: Text;
+
+ onEnable(): void {
+ this.startCoroutine(this.updateTime())
+ }
+
+ private *updateTime() {
+ while (true) {
+ if (this.text) {
+ this.text.text = new Date().toLocaleTimeString();
+ console.log(this.text.text)
+ }
+ yield WaitForSeconds(1)
+ }
+ };
+}Assuming you have a custom shader with a property name _Speed that is a float value this is how you would change it from a script.
You can find a live example to download in our samples
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Material } from "three";
+
+declare type MyCustomShaderMaterial = {
+ _Speed: number;
+};
+
+export class IncreaseShaderSpeedOverTime extends Behaviour {
+
+ @serializable(Material)
+ myMaterial?: Material & MyCustomShaderMaterial;
+
+ update() {
+ if (this.myMaterial) {
+ this.myMaterial._Speed *= 1 + this.context.time.deltaTime;
+ if(this.myMaterial._Speed > 1) this.myMaterial._Speed = .0005;
+ if(this.context.time.frame % 30 === 0) console.log(this.myMaterial._Speed)
+ }
+ }
+}See live example on StackBlitz
Make sure to install npm i postprocessing in your web project. Then you can add new effects by deriving from PostProcessingEffect.
To use the effect add it to the same object as your Volume component.
Here is an example that wraps the Outline postprocessing effect. You can expose variables and settings as usual as any effect is also just a component in your three.js scene.
import { EffectProviderResult, PostProcessingEffect, registerCustomEffectType, serializable } from "@needle-tools/engine";
+import { OutlineEffect } from "postprocessing";
+import { Object3D } from "three";
+
+export class OutlinePostEffect extends PostProcessingEffect {
+
+ // the outline effect takes a list of objects to outline
+ @serializable(Object3D)
+ selection!: Object3D[];
+
+ // this is just an example method that you could call to update the outline effect selection
+ updateSelection() {
+ if (this._outlineEffect) {
+ this._outlineEffect.selection.clear();
+ for (const obj of this.selection) {
+ this._outlineEffect.selection.add(obj);
+ }
+ }
+ }
+
+
+ // a unique name is required for custom effects
+ get typeName(): string {
+ return "Outline";
+ }
+
+ private _outlineEffect: void | undefined | OutlineEffect;
+
+ // method that creates the effect once
+ onCreateEffect(): EffectProviderResult | undefined {
+
+ const outlineEffect = new OutlineEffect(this.context.scene, this.context.mainCamera!);
+ this._outlineEffect = outlineEffect;
+ outlineEffect.edgeStrength = 10;
+ outlineEffect.visibleEdgeColor.set(0xff0000);
+ for (const obj of this.selection) {
+ outlineEffect.selection.add(obj);
+ }
+
+ return outlineEffect;
+ }
+}
+// You need to register your effect type with the engine
+registerCustomEffectType("Outline", OutlinePostEffect);import { Behaviour, ParticleSystem } from "@needle-tools/engine";
+import { ParticleSystemBaseBehaviour, QParticle } from "@needle-tools/engine";
+
+// Derive your custom behaviour from the ParticleSystemBaseBehaviour class (or use QParticleBehaviour)
+class MyParticlesBehaviour extends ParticleSystemBaseBehaviour {
+
+ // callback invoked per particle
+ update(particle: QParticle): void {
+ particle.position.y += 5 * this.context.time.deltaTime;
+ }
+}
+export class TestCustomParticleSystemBehaviour extends Behaviour {
+ start() {
+ // add your custom behaviour to the particle system
+ this.gameObject.getComponent(ParticleSystem)!.addBehaviour(new MyParticlesBehaviour())
+ }
+}This is an example how you could create your own audio component.
For most usecases however you can use the core AudioSource component and don't have to write code.
import { AudioSource, Behaviour, serializable } from "@needle-tools/engine";
+
+// declaring AudioClip type is for codegen to produce the correct input field (for e.g. Unity or Blender)
+declare type AudioClip = string;
+
+export class My2DAudio extends Behaviour {
+
+ // The clip contains a string pointing to the audio file - by default it's relative to the GLB that contains the component
+ // by adding the URL decorator the clip string will be resolved relative to your project root and can be loaded
+ @serializable(URL)
+ clip?: AudioClip;
+
+ awake() {
+ // creating a new audio element and playing it
+ const audioElement = new Audio(this.clip);
+ audioElement.loop = true;
+ // on the web we have to wait for the user to interact with the page before we can play audio
+ AudioSource.registerWaitForAllowAudio(() => {
+ audioElement.play();
+ })
+ }
+}Use the FileReference type to load external files (e.g. a json file)
import { Behaviour, FileReference, ImageReference, serializable } from "@needle-tools/engine";
+
+export class FileReferenceExample extends Behaviour {
+
+ // A FileReference can be used to load and assign arbitrary data in the editor. You can use it to load images, audio, text files... FileReference types will not be saved inside as part of the GLB (the GLB will only contain a relative URL to the file)
+ @serializable(FileReference)
+ myFile?: FileReference;
+ // Tip: if you want to export and load an image (that is not part of your GLB) if you intent to add it to your HTML content for example you can use the ImageReference type instead of FileReference. It will be loaded as an image and you can use it as a source for an <img> tag.
+
+ async start() {
+ console.log("This is my file: ", this.myFile);
+ // load the file
+ const data = await this.myFile?.loadRaw();
+ if (!data) {
+ console.error("Failed loading my file...");
+ return;
+ }
+ console.log("Loaded my file. These are the bytes:", await data.arrayBuffer());
+ }
+}import { Behaviour, EventList, serializable, serializeable } from "@needle-tools/engine";
+
+export class HTMLButtonClick extends Behaviour {
+
+ /** Enter a button query (e.g. button.some-button if you're interested in a button with the class 'some-button')
+ * Or you can also use an id (e.g. #some-button if you're interested in a button with the id 'some-button')
+ * Or you can also use a tag (e.g. button if you're interested in any button
+ */
+ @serializeable()
+ htmlSelector: string = "button.some-button";
+
+ /** This is the event to be invoked when the html element is clicked. In Unity or Blender you can assign methods to be called in the Editor */
+ @serializable(EventList)
+ onClick: EventList = new EventList();
+
+ private element? : HTMLButtonElement;
+
+ onEnable() {
+ // Get the element from the DOM
+ this.element = document.querySelector(this.htmlSelector) as HTMLButtonElement;
+ if (this.element) {
+ this.element.addEventListener('click', this.onClicked);
+ }
+ else console.warn(`Could not find element with selector \"${this.htmlSelector}\"`);
+ }
+
+ onDisable() {
+ if (this.element) {
+ this.element.removeEventListener('click', this.onClicked);
+ }
+ }
+
+ private onClicked = () => {
+ this.onClick.invoke();
+ }
+}import { Behaviour } from "@needle-tools/engine";
+import { Texture } from "three";
+
+export class DisableEnvironmentLight extends Behaviour {
+
+ private _previousEnvironmentTexture: Texture | null = null;
+
+ onEnable(): void {
+ this._previousEnvironmentTexture = this.context.scene.environment;
+ this.context.scene.environment = null;
+ }
+
+ onDisable(): void {
+ this.context.scene.environment = this._previousEnvironmentTexture;
+ }
+}Make sure to install the mediapipe package. Visit the github link below to see the complete project setup.
Try it live here - requires a webcam/camera
import { FilesetResolver, HandLandmarker, HandLandmarkerResult, NormalizedLandmark } from "@mediapipe/tasks-vision";
+import { Behaviour, Mathf, serializable, showBalloonMessage } from "@needle-tools/engine";
+import { ParticleSphere } from "./ParticleSphere";
+
+export class MediapipeHands extends Behaviour {
+
+ @serializable(ParticleSphere)
+ spheres: ParticleSphere[] = [];
+
+ private _video!: HTMLVideoElement;
+ private _handLandmarker!: HandLandmarker;
+
+ async awake() {
+ showBalloonMessage("Initializing mediapipe...")
+
+ const vision = await FilesetResolver.forVisionTasks(
+ // path/to/wasm/root
+ "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
+ );
+ this._handLandmarker = await HandLandmarker.createFromOptions(
+ vision,
+ {
+ baseOptions: {
+ modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/latest/hand_landmarker.task",
+ delegate: "GPU"
+ },
+ numHands: 2
+ });
+ //@ts-ignore
+ await this._handLandmarker.setOptions({ runningMode: "VIDEO" });
+
+ this._video = document.createElement("video");
+ this._video.setAttribute("style", "max-width: 30vw; height: auto;");
+ console.log(this._video);
+ this._video.autoplay = true;
+ this._video.playsInline = true;
+ this.context.domElement.appendChild(this._video);
+ this.startWebcam(this._video);
+ }
+
+ private _lastVideoTime: number = 0;
+
+ update(): void {
+ if (!this._video || !this._handLandmarker) return;
+ const video = this._video;
+ if (video.currentTime !== this._lastVideoTime) {
+ let startTimeMs = performance.now();
+ showBalloonMessage("<strong>Control the spheres with one or two hands</strong>!<br/><br/>Sample scene by <a href='https://twitter.com/llllkatjallll/status/1659280435023605773'>Katja Rempel</a>")
+ const detections = this._handLandmarker.detectForVideo(video, startTimeMs);
+ this.processResults(detections);
+ this._lastVideoTime = video.currentTime;
+ }
+
+ }
+
+ private processResults(results: HandLandmarkerResult) {
+ const hand1 = results.landmarks[0];
+ // check if we have even one hand
+ if (!hand1) return;
+
+ if (hand1.length >= 4 && this.spheres[0]) {
+ const pos = hand1[4];
+ this.processLandmark(this.spheres[0], pos);
+ }
+
+ // if we have a second sphere:
+ if (this.spheres.length >= 2) {
+ const hand2 = results.landmarks[1];
+ if (!hand2) {
+ const pos = hand1[8];
+ this.processLandmark(this.spheres[1], pos);
+ }
+ else {
+ const pos = hand2[4];
+ this.processLandmark(this.spheres[1], pos);
+ }
+ }
+ }
+
+ private processLandmark(sphere: ParticleSphere, pos: NormalizedLandmark) {
+ const px = Mathf.remap(pos.x, 0, 1, -6, 6);
+ const py = Mathf.remap(pos.y, 0, 1, 6, -6);
+ sphere.setTarget(px, py, 0);
+ }
+
+ private async startWebcam(video: HTMLVideoElement) {
+ const constraints = { video: true, audio: false };
+ const stream = await navigator.mediaDevices.getUserMedia(constraints);
+ video.srcObject = stream;
+ }
+}import { Behaviour, Collision, Renderer } from "@needle-tools/engine";
+import{ Color } from "three";
+
+export class ChangeColorOnCollision extends Behaviour {
+
+ private renderer: Renderer | null = null;
+ private collisionCount: number = 0;
+
+ private _startColor? : Color[];
+
+ start() {
+ this.renderer = this.gameObject.getComponent(Renderer);
+ if (!this.renderer) return;
+ if(!this._startColor) this._startColor = [];
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i] = this.renderer.sharedMaterials[i].clone();
+ this._startColor[i] = this.renderer.sharedMaterials[i]["color"].clone();
+ }
+ }
+
+ onCollisionEnter(_col: Collision) {
+ if (!this.renderer) return;
+ this.collisionCount += 1;
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i]["color"].setRGB(Math.random(), Math.random(), Math.random());
+ }
+ }
+
+ onCollisionExit(_col: Collision) {
+ if (!this.renderer || !this._startColor) return;
+ this.collisionCount -= 1;
+ if (this.collisionCount === 0) {
+ for (let i = 0; i < this.renderer.sharedMaterials.length; i++) {
+ this.renderer.sharedMaterials[i]["color"].copy(this._startColor[i])
+ // .setRGB(.1, .1, .1);
+ }
+ }
+ }
+
+ // more events:
+ // onCollisionStay(_col: Collision)
+ // onCollisionExit(_col: Collision)
+}Invoke events using an objects physics trigger methods
export class PhysicsTrigger extends Behaviour {
+
+ @serializeable(GameObject)
+ triggerObjects?:GameObject[];
+
+ @serializeable(EventList)
+ onEnter?: EventList;
+
+ @serializeable(EventList)
+ onStay?: EventList;
+
+ @serializeable(EventList)
+ onExit?: EventList;
+
+ onTriggerEnter(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onEnter?.invoke();
+ }
+
+ onTriggerStay(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onStay?.invoke();
+ }
+
+ onTriggerExit(col: Collider) {
+ if(this.triggerObjects && this.triggerObjects.length > 0 && !this.triggerObjects?.includes(col.gameObject)) return;
+ this.onExit?.invoke();
+ }
+}Reset an object's position automatically when it's leaving a physics trigger
import { Behaviour, Collider, GameObject, Rigidbody, serializeable } from "@needle-tools/engine";
+import { Vector3 } from "three";
+
+export class StartPosition extends Behaviour {
+
+ //@nonSerialized
+ startPosition?: Vector3;
+
+ start() {
+ this.updateStartPosition();
+ }
+
+ updateStartPosition(){
+ this.startPosition = this.gameObject.position.clone();
+ }
+
+ resetToStart() {
+ if (!this.startPosition) return;
+ const rb = GameObject.getComponent(this.gameObject, Rigidbody);
+ rb?.teleport(this.startPosition);
+ }
+}
+
+/** Reset to start position when object is exiting the collider */
+export class AutoReset extends StartPosition {
+
+ @serializeable(Collider)
+ worldCollider?: Collider;
+
+ start(){
+ super.start();
+ if(!this.worldCollider) console.warn("Missing collider to reset", this);
+ }
+
+ onTriggerExit(col) {
+ if(col === this.worldCollider){
+ this.resetToStart();
+ }
+ }
+}import { AudioSource, Behaviour, serializeable } from "@needle-tools/engine";
+
+export class PlayAudioOnCollision extends Behaviour {
+ @serializeable(AudioSource)
+ audioSource?: AudioSource;
+
+ onCollisionEnter() {
+ this.audioSource?.play();
+ }
+}Randomize the color of an object on start. Note that the materials are cloned in the start method
import { Behaviour, serializeable, Renderer } from "@needle-tools/engine";
+import { Color } from "three";
+
+export class RandomColor extends Behaviour {
+
+ @serializeable()
+ applyOnStart: boolean = true;
+
+ start() {
+ if (this.applyOnStart)
+ this.applyRandomColor();
+
+ // if materials are not cloned and we change the color they might also change on other objects
+ const cloneMaterials = true;
+ if (cloneMaterials) {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (!renderer) {
+ return;
+ }
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ renderer.sharedMaterials[i] = renderer.sharedMaterials[i].clone();
+ }
+ }
+ }
+
+ applyRandomColor() {
+ const renderer = this.gameObject.getComponent(Renderer);
+ if (!renderer) {
+ console.warn("Can not change color: No renderer on " + this.name);
+ return;
+ }
+ for (let i = 0; i < renderer.sharedMaterials.length; i++) {
+ renderer.sharedMaterials[i].color = new Color(Math.random(), Math.random(), Math.random());
+ }
+ }
+}import { Behaviour, GameObject, LogType, serializeable, showBalloonMessage, WaitForSeconds } from "@needle-tools/engine";
+
+export class TimedSpawn extends Behaviour {
+ @serializeable(GameObject)
+ object?: GameObject;
+
+ interval: number = 1000;
+ max: number = 100;
+
+ private spawned: number = 0;
+
+ awake() {
+ if (!this.object) {
+ console.warn("TimedSpawn: no object to spawn");
+ showBalloonMessage("TimedSpawn: no object to spawn", LogType.Warn);
+ return;
+ }
+ GameObject.setActive(this.object, false);
+ this.startCoroutine(this.spawn())
+ }
+
+ *spawn() {
+ if (!this.object) return;
+ while (this.spawned < this.max) {
+ const instance = GameObject.instantiate(this.object);
+ GameObject.setActive(instance!, true);
+ this.spawned += 1;
+ yield WaitForSeconds(this.interval / 1000);
+ }
+ }
+}If you are new to scripting we recommend reading the following guides first:
If you know what you're doing, feel free to jump right into the Needle Engine API documentation.
Runtime code for Needle Engine is written in TypeScript (recommended) or JavaScript. We automatically generate C# stub components out of that, which you can add to GameObjects in the editor. The C# components and their data are recreated by the runtime as JavaScript components with the same data and attached to three.js objects.
Both custom components as well as built-in Unity components can be mapped to JavaScript components in this way. For example, mappings for many built-in components related to animation, rendering or physics are already included in Needle Engine.
If you want to code-along with the following examples without having to install anything you just click the following link:
Our web runtime engine adopts a component model similar to Unity and thus provides a lot of functionality that will feel familiar. Components attached to three's Object3D objects have lifecycle methods like awake, start, onEnable, onDisable, update and lateUpdate that you can implement. You can also use Coroutines.
Often, interactive scenes can be realized using Events in Unity and calling methods on built-in components. A typical example is playing an animation on button click - you create a button, add a Click event in the inspector, and have that call Animator.SetTrigger or similar to play a specific animation.
Needle Engine translates Unity Events into JavaScript method calls, which makes this a very fast and flexible workflow - set up your events as usual and when they're called they'll work the same as in Unity.
An example of a Button Click Event that is working out-of-the-box in Needle Engine โ no code needed.
Scripts are written in TypeScript (recommended) or JavaScript.
There are two ways to add custom scripts to your project:
Simply add a file with an .ts or .js extension inside src/scripts/ in your generated project directory, for example src/scripts/MyFirstScript.ts
Unity specific:
Organize your code into NPM Definition Files (npm packages). These help you to modularize and re-use code between projects and if you are familiar with web development they are in fact regular npm packages that are installed locally.
In Unity you can create NpmDef files via Create > NPM Definition and then add TypeScript files by right-clicking an NpmDef file and selecting Create > TypeScript. Please see this chapter for more information.
In both approaches, source directories are watched for changes and C# stub components or Blender panels are regenerated whenever a change is detected.
Changes to the source files also result in a hot reload of the running website โ you don't have to wait for Unity to recompile the C# components. This makes iterating on code pretty much instant.
You can even have multiple component types inside one file (e.g. you can declare export class MyComponent1 and export class MyOtherComponent in the same Typescript file).
If you are new to writing Javascript or Typescript we recommend reading the Typescript Essentials Guide guide first before continuing with this guide.
src/scripts/Rotate.ts and add the following code:import { Behaviour, serializable } from "@needle-tools/engine";
+
+export class Rotate extends Behaviour
+{
+ @serializable()
+ speed : number = 1;
+
+ start(){
+ // logging this is useful for debugging in the browser.
+ // You can open the developer console (F12) to see what data your component contains
+ console.log(this);
+ }
+
+ // update will be called every frame
+ update(){
+ this.gameObject.rotateY(this.context.time.deltaTime * this.speed);
+ }
+}Now inside Unity a new script called Rotate.cs will be automatically generated. Add the new Unity component to a Cube and save the scene.
The cube is now rotating inside the browser.
Open the chrome developer console by F12 to inspect the log from the Rotate.start method. This is a helpful practice to learn and debug what fields are exported and currently assigned. In general all public and serializable fields and all public properties are exported.
Now add a new field public float speed = 5 to your Unity component and save it. The Rotate component inspector now shows a speed field that you can edit. Save the scene (or click the Build button) and note that the javascript component now has the exported speed value assigned.
Refer to the Typescript Essentials Guide to learn more about the syntax and language.
import { Behaviour } from "@needle-tools/engine";
+
+export class PrintNumberComponent extends Behaviour
+{
+ start(){
+ this.printNumber(42);
+ }
+
+ private printNumber(myNumber : number){
+ console.log("My Number is: " + myNumber);
+ }
+}While generated C# components use the type name to produce stable GUIDs, we recommend checking in generated components in version control as a good practice.
Components are added to three.js Object3Ds. This is similar to how Components in Unity are added to GameObjects. Therefore when we want to access a three.js Object3D, we can access it as this.gameObject which returns the Object3D that the component is attached to.
Note: Setting visible to false on a Object3D will act like SetActive(false) in Unity - meaning it will also disable all the current components on this object and its children. Update events for inactive components are not being called until visible is set to true again. If you want to hide an object without affecting components you can just disable the Needle Engine Renderer component.
Note that lifecycle methods are only being called when they are declared. So only declare update lifecycle methods when they are actually necessary, otherwise it may hurt performance if you have many components with update loops that do nothing.
| Method name | Description |
|---|---|
awake() | First method being called when a new component is created |
onEnable() | Called when a component is enabled (e.g. when enabled changes from false to true) |
onDisable() | Called when a component is disabled (e.g. when enabled changes from true to false) |
onDestroy() | called when the Object3D or component is being destroyed |
start() | Called on the start of the first frame after the component was created |
earlyUpdate() | First update event |
update() | Default update event |
lateUpdate() | Called after update |
onBeforeRender() | Last update event before render call |
onAfterRender() | Called after render event |
| Method name | Description |
|---|---|
onCollisionEnter(col : Collision) | |
onCollisionStay(col : Collision) | |
onCollisionExit(col : Collision) | |
onTriggerEnter(col : Collision) | |
onTriggerStay(col : Collision) | |
onTriggerExit(col : Collision) |
| Method name | Description |
|---|---|
onPointerEnter(args : PointerEventData) | Called when a cursor starts to hover over an object (or any of it's children) |
onPointerMove(args : PointerEventData) | Called when a cursor moves over an object (or any of it's children) |
onPointerExit(args : PointerEventData) | Called when a cursor exists (stops hovering) an object |
onPointerDown(args : PointerEventData) | Called when a cursor is pressed over an object |
onPointerUp(args : PointerEventData) | Called when a cursor is released over an object |
onPointerClick(args : PointerEventData) | Called when a cursor is clicked over an object |
requires Needle Engine >= 3.32.0
| Method name | Description |
|---|---|
supportsXR(mode: XRSessionMode) | Optionally implement if you only want to receive XR callbacks for specific XR modes like immersive-vr or immersive-ar. Return true to notify the system that you want callbacks for the passed in mode |
onBeforeXR(mode: XRSessionMode, init: XRSessionInit) | Called right before a XRSession is requested and can be used to modify the XRSessionInit object |
onEnterXR(args: NeedleXREventArgs) | Callback when this component joins a xr session (or becomes active in a running XR session) |
onUpdateXR(args: NeedleXREventArgs) | Callback when a xr session updates (while it is still active in XR session) |
onLeaveXR(args: NeedleXREventArgs) | allback when this component exists a xr session (or when it becomes inactive in a running XR session) |
onControllerAdded(args: NeedleXRControllerEventArgs) | Callback when a controller is connected/added while in a XR session OR when the component joins a running XR session that has already connected controllers OR when the component becomes active during a running XR session that has already connected controllers |
onControllerRemoved(args: NeedleXRControllerEventArgs) | callback when a controller is removed while in a XR session OR when the component becomes inactive during a running XR session |
| Method name | Description |
|---|---|
window.addEventListener("needle-xrsession-start") | CustomEvent that is invoked when a XRSession starts. details contains the NeedleXRSession |
window.addEventListener("needle-xrsession-end") | CustomEvent that is invoked when a XRSession starts. details contains the NeedleXRSession |
onXRSessionStart(args: { session:NeedleXRSession } ) | global event hook. To unsubscribe use offXRSessionStart |
Coroutines can be declared using the JavaScript Generator Syntax.
To start a coroutine, call this.startCoroutine(this.myRoutineName());
Example
import { Behaviour, FrameEvent } from "@needle-tools/engine";
+
+export class Rotate extends Behaviour {
+
+ start() {
+ // the second argument is optional and allows you to specifiy
+ // when it should be called in the current frame loop
+ // coroutine events are called after regular component events of the same name
+ // for example: Update coroutine events are called after component.update() functions
+ this.startCoroutine(this.rotate(), FrameEvent.Update);
+ }
+
+ // this method is called every frame until the component is disabled
+ *rotate() {
+ // keep looping forever
+ while (true) {
+ yield;
+ }
+ }
+}To stop a coroutine, either exit the routine by returning from it, or cache the return value of startCoroutine and call this.stopCoroutine(<...>). All Coroutines are stopped at onDisable / when disabling a component.
Needle Engine also exposes a few lifecycle hooks that you can use to hook into the update loop without having to write a full component.
Those hooks can be inserted at any point in your web application (for example in toplevel scope or in a svelte component)
| Method name | Description |
|---|---|
onInitialized(cb, options) | Called when a new context is initialized (before the first frame) |
onClear(cb, options) | Register a callback before the engine context is cleared |
onDestroy(cb, options) | Register a callback in the engine before the context is destroyed |
onStart(cb, options) | Called directly after components start at the beginning of a frame |
onUpdate(cb, options) | Called directly after components update |
onBeforeRender(cb, options) | called before calling render |
onAfterRender(cb, options) | called before calling render |
For example (See example on stackblitz)
// this can be put into e.g. main.ts or a svelte component (similar to onMount)
+import { Context, onUpdate, onBeforeRender, onAfterRender } from "@needle-tools/engine"
+onUpdate((ctx: Context) => {
+ // do something... e.g. access the scene via ctx.scene
+ console.log("UPDATE", ctx.time.frame);
+});
+
+onBeforeRender((ctx: Context) => {
+ // this event is only called once because of the { once: true } argument
+ console.log("ON BEFORE RENDER", ctx.time.frame);
+}, { once: true } );
+
+// Every event hook returns a method to unsubscribe from the event
+const unsubscribe = onAfterRender((ctx: Context) => {
+ console.log("ON AFTER RENDER", ctx.time.frame);
+});
+// Unsubscribe from the event at any time
+setTimeout(()=> unsubscribe(), 1000);To access other components, use the static methods on GameObject or this.gameObject methods. For example, to access a Renderer component in the parent use GameObject.getComponentInParent(this.gameObject, Renderer) or this.gameObject.getComponentInParent(Renderer).
Example:
import { Behaviour, GameObject, Renderer } from "@needle-tools/engine";
+
+export class MyComponent extends Behaviour {
+
+ start() {
+ const renderer = GameObject.getComponentInParent(this.gameObject, Renderer);
+ console.log(renderer);
+ }
+}| Method | |
|---|---|
GameObject.instantiate(Object3D, InstantiateOptions) | creates a new instance of this object including new instances of all its components |
GameObject.destroy(Object3D | Component) | destroy a component or Object3D (and its components) |
GameObject.addNewComponent(Object3D, Type) | adds (and creates) a new component for a type to the provided object. Note that awake and onEnable is already called when the component is returned |
GameObject.addComponent(Object3D, Component) | moves a component instance to the provided object. It is useful if you already have an instance e.g. when you create a component with e.g. new MyComponent() and then attach it to a object |
GameObject.removeComponent(Component) | removes a component from a gameObject |
GameObject.getComponent(Object3D, Type) | returns the first component matching a type on the provided object. |
GameObject.getComponents(Object3D, Type) | returns all components matching a type on the provided object. |
GameObject.getComponentInChildren | same as getComponent but also searches in child objects. |
GameObject.getComponentsInChildren | same as getComponents but also searches in child objects. |
GameObject.getComponentInParent | same as getComponent but also searches in parent objects. |
GameObject.getComponentsInParent | same as getComponents but also searches in parent objects. |
GameObject.findObjectOfType | searches the whole scene for a type. |
GameObject.findObjectsOfType | searches the whole scene for all matching types. |
The context refers to the runtime inside a web component.
The three.js scene lives inside a custom HTML component called <needle-engine> (see the index.html in your project). You can access the <needle-engine> web component using this.context.domElement.
This architecture allows for potentially having multiple needle WebGL scenes on the same webpage, that can either run on their own or communicate between each other as parts of your webpage.
To access the current scene from a component you use this.scene which is equivalent to this.context.scene, this gives you the root three.js scene object.
To traverse the hierarchy from a component you can either iterate over the children of an object
with a for loop:
for(let i = 0; i < this.gameObject.children; i++)
+ console.log(this.gameObject.children[i]);or you can iterate using the foreach equivalent:
for(const child of this.gameObject.children) {
+ console.log(child);
+}You can also use three.js specific methods to quickly iterate all objects recursively using the traverse method:
import { Object3D } from "three";
+this.gameObject.traverse((obj: Object3D) => console.log(obj));or to just traverse visible objects use traverseVisible instead.
Another option that is quite useful when you just want to iterate objects being renderable you can query all renderer components and iterate over them like so:
import { Renderer } from "@needle-tools/engine";
+for(const renderer of this.gameObject.getComponentsInChildren(Renderer))
+ console.log(renderer);For more information about getting components see the next section.
Use this.context.time to get access to time data:
this.context.time.time is the time since the application started runningthis.context.time.deltaTime is the time that has passed since the last framethis.context.time.frameCount is the number of frames that have passed since the application startedthis.context.time.realtimeSinceStartup is the unscaled time since the application has started runningIt is also possible to use this.context.time.timeScale to deliberately slow down time for e.g. slow motion effects.
Receive input data for the object the component is on:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ onPointerDown() {
+ console.log("POINTER DOWN on " + this.gameObject.name);
+ }
+}You can also subscribe to global events in the InputEvents enum like so:
import { Behaviour, InputEvents, NEPointerEvent } from "@needle-tools/engine";
+
+export class MyScript extends Behaviour
+{
+ onEnable() {
+ this.context.input.addEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+
+ onDisable() {
+ // it is recommended to also unsubscribe from events when your component becomes inactive
+ this.context.input.removeEventListener(InputEvents.PointerDown, this.inputPointerDown);
+ }
+
+ // @nonSerialized
+ inputPointerDown = (evt: NEPointerEvent) => { console.log("POINTER DOWN anywhere on the <needle-engine> element"); }
+}Or use this.context.input if you want to poll input state every frame:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ update() {
+ if(this.context.input.getPointerDown(0)){
+ console.log("POINTER DOWN anywhere")
+ }
+ }
+}If you want to handle inputs yourself you can also subscribe to all events the browser provides (there are a ton). For example to subscribe to the browsers click event you can write:
import { Behaviour } from "@needle-tools/engine";
+export class MyScript extends Behaviour
+{
+ onEnable() {
+ window.addEventListener("click", this.windowClick);
+ }
+
+ onDisable() {
+ // unsubscribe again when the component is disabled
+ window.removeEventListener("click", this.windowClick);
+ }
+
+ windowClick = () => { console.log("CLICK anywhere on the page, not just on <needle-engine>"); }
+}Note that in this case you have to handle all cases yourself. For example you may need to use different events if your user is visiting your website on desktop vs mobile vs a VR device. These cases are automatically handled by the Needle Engine input events (e.g. PointerDown is raised both for mouse down, touch down and in case of VR on controller button down).
Use this.context.physics.raycast() to perform a raycast and get a list of intersections. If you dont pass in any options the raycast is performed from the mouse position (or first touch position) in screenspace using the currently active mainCamera. You can also pass in a RaycastOptions object that has various settings like maxDistance, the camera to be used or the layers to be tested against.
Use this.context.physics.raycastFromRay(your_ray) to perform a raycast using a three.js ray
Note that the calls above are by default raycasting against visible scene objects. That is different to Unity where you always need colliders to hit objects. The default three.js solution has both pros and cons where one major con is that it can perform quite slow depending on your scene geometry. It may be especially slow when raycasting against skinned meshes. It is therefor recommended to usually set objects with SkinnedMeshRenderers in Unity to the Ignore Raycast layer which will then be ignored by default by Needle Engine as well.
Another option is to use the physics raycast methods which will only return hits with colliders in the scene.
const hit = this.context.physics.engine?.raycast();Here is a editable example for physics raycast
Networking methods can be accessed via this.context.connection. Please refer to the networking docs for further information.
It is possible to access all the functionality described above using regular JavaScript code that is not inside components and lives somewhere else. All the components and functionality of the needle runtime is accessible via the global Needle namespace (you can write console.log(Needle) to get an overview)
You can find components using Needle.findObjectOfType(Needle.AudioSource) for example. It is recommended to cache those references, as searching the whole scene repeatedly is expensive. See the list for finding adding and removing components above.
For getting callbacks for the initial scene load see the following example:
<needle-engine loadstart="loadingStarted" progress="loadingProgress" loadfinished="loadingFinished"></needle-engine>
+
+<script type="text/javascript">
+function loadingStarted() { console.log("START") }
+function loadingProgress() { console.log("LOADING...") }
+function loadingFinished() { console.log("FINISHED!") }
+</script>You can also subscribe to the globale NeedleEngine (sometimes also referred to as ContextRegistry) to receive a callback when a Needle Engine context has been created or to access all available contexts:
class YourComponentType extends Behaviour {}
+//---cut---
+import { NeedleEngine, GameObject, Behaviour } from "@needle-tools/engine";
+
+NeedleEngine.addContextCreatedCallback((args) => {
+ const context = args.context;
+ const scene = context.scene;
+ const myInstance = GameObject.getComponentInChildren(scene, YourComponentType);
+});Another option is using the onInitialized(ctx => {}) lifecycle hook
You can also access all available contexts via NeedleEngine.Registered which returns the internal array. (Note that this array should not be modified but can be used to iterate all active contexts to modify settings, e.g. set all contexts to context.isPaused = true)
Below you find a list of available events on the static NeedleEngine type.
You can subscribe to those events via NeedleEngine.registerCallback(ContextEvent.ContextCreated, (args) => {})
| ContextEvent options | |
|---|---|
ContextEvent.ContextRegistered | Called when the context is registered to the registry. |
ContextEvent.ContextCreationStart | Called before the first glb is loaded and can be used to initialize the physics engine. Can return a promise |
ContextEvent.ContextCreated | Called when the context has been created before the first frame |
ContextEvent.ContextDestroyed | Called when the context has been destroyed |
ContextEvent.MissingCamera | Called when the context could not find a camera, currently only called during creation |
ContextEvent.ContextClearing | Called when the context is being cleared: all objects in the scene are being destroyed and internal state is reset |
ContextEvent.ContextCleared | Called after the context has been cleared |
The static Gizmos class can be used to draw lines, shapes and text which is mostly useful for debugging.
All gizmos function have multiple options for e.g. colors or for how long they should be displayed in the scene. Internally they are cached and re-used.
| Gizmos | |
|---|---|
Gizmos.DrawLabel | Draws a label with a background optionally. It can be attached to an object. Returns a Label handle which can be used to update the text. |
Gizmos.DrawRay | Takes an origin and direction in worldspace to draw an infinite ray line |
Gizmos.DrawDirection | Takes a origin and direction to draw a direction in worldspace |
Gizmos.DrawLine | Takes two vec3 worldspace points to draw a line |
Gizmos.DrawWireSphere | Draws a wireframe sphere in worldspace |
Gizmos.DrawSphere | Draws a solid sphere in worldspace |
Gizmos.DrawWireBox | Draws a wireframe box in worldspace |
Gizmos.DrawWireBox3 | Draws a wireframe box3 |
Gizmos.DrawArrow | Draws an arrow taking two points in worldspace |
To embed components and recreate components with their correct types in glTF, we also need to save non-primitive types (everything that is not a Number, Boolean or String). You can do so is adding a @serializable(<type>) decorator above your field or property.
Example:
import { Behaviour, serializable } from "@needle-tools/engine";
+import { Object3D } from "three"
+
+export class MyClass extends Behaviour {
+ // this will be a "Transform" field in Unity
+ @serializable(Object3D)
+ myObjectReference: Object3D | null = null;
+
+ // this will be a "Transform" array field in Unity
+ // Note that the @serializable decorator contains the array content type! (Object3D and not Object3D[])
+ @serializable(Object3D)
+ myObjectReferenceList: Object3D[] | null = null;
+}To serialize from and to custom formats, it is possible to extend from the TypeSerializer class and create an instance. Use super() in the constructor to register supported types.
Note: In addition to matching fields, matching properties will also be exported when they match to fields in the typescript file.
Referenced Prefabs, SceneAssets and AssetReferences in Unity will automatically be exported as glTF files (please refer to the Export Prefabs documentation).
These exported gltf files will be serialized as plain string URIs. To simplify loading these from TypeScript components, we added the concept of AssetReference types. They can be loaded at runtime and thus allow to defer loading parts of your app or loading external content.
Example:
import { Behaviour, serializable, AssetReference } from "@needle-tools/engine";
+
+export class MyClass extends Behaviour {
+
+ // if you export a prefab or scene as a reference from Unity you'll get a path to that asset
+ // which you can de-serialize to AssetReference for convenient loading
+ @serializable(AssetReference)
+ myPrefab?: AssetReference;
+
+ async start() {
+ // directly instantiate
+ const myInstance = await this.myPrefab?.instantiate();
+
+ // you can also just load and instantiate later
+ // const myInstance = await this.myPrefab.loadAssetAsync();
+ // this.gameObject.add(myInstance)
+ // this is useful if you know that you want to load this asset only once because it will not create a copy
+ // since ``instantiate()`` does create a copy of the asset after loading it
+ }
+}AssetReferences are cached by URI, so if you reference the same exported glTF/Prefab in multiple components/scripts it will only be loaded once and then re-used.
Hello, my name is Kryลกtof and i did a research project about Needle. At our company, we wanted to determine how Needle can help us in our workflow. We have one local client which focuses on reselling luxury cars. We already delivered a mobile app and VR experience using Unity. We have around 30 unique cars ready in the engine. We plan to expand the client's website with visually pleasing digital clones with more configuration options. Needle could achieve a perfect 1:1 conversion between unity and web visuals. It would be a massive benefit to our workflow. So that's what sparked our research.
I'm not very well experienced with javascript, typescript or three.js, so my point of view is as a semi-experienced Unity developer trying out the simplest way how to create a web experience. For those who would suggest Unity WebGL, that sadly doesn't work and isn't flexible on mobile browsers. Needle is ๐
Our lighting model is based on reflection probes in unity. We do not need any directional or point lights, only ambient lighting.
We're using this skybox:
Which looks like this on the paint job:
Then to add a slight detail, i've added 2 directional lights with an insignificant intensity (0.04) to create specular highlights. So before it looked like this:
But with the added directional lights it added a better dynamic. The effect could be deepened with higher intensity:
The scene now looks like this:
The black background isn't very pretty. So to differentiate between visual and lighting skyboxes i've added an inverse sphere which wraps the whole map.
Regarding the gradient goes from a slight gray to a white color..
This effect could be easily made with just a proper UV mapping and a single pixel high texture which would define the gradient.
I've made an unlit shader in the shader graph:
I've noticed a color banding issue, so i've tried to implement dithering. Frankly, it didn't help the artefacts but i bet there's a simple solution to that issue. So the upper part of the shader does sample the gradient based on the Y axis in object space. And the lower part tries to negate the color banding.
By using shaders it's simpler to use and iterate the gradiant. By using Needle's Shadergraph markdown asset, it's even simpler! ๐ต
The scene right now is static since nothing moves. We can negate that by adding a fake feeling of motion. Let's start by adding motion to the wheels.
With a simple component called Rotator, we define an axis and speed along it.
import { Behaviour, serializable } from "@needle-tools/engine";
+
+export enum RotationAxis {
+ X, Y, Z
+}
+
+export class Rotator extends Behaviour {
+ //@type RotationAxis
+ @serializable()
+ axis : RotationAxis = RotationAxis.X;
+
+ @serializable()
+ speed : number = 1;
+
+ update() {
+ const angle = this.speed * this.context.time.deltaTime;
+ switch(this.axis) {
+ case RotationAxis.X:
+ this.gameObject.rotateX(angle);
+ break;
+ case RotationAxis.Y:
+ this.gameObject.rotateY(angle);
+ break;
+ case RotationAxis.Z:
+ this.gameObject.rotateZ(angle);
+ break;
+ }
+ }
+}The user now sees a car driving in deep nothingness, the color doesn't resemble anything and the experience is dull. We want to ground the model and that's done by adding a grid and then shifting it so it seems the car is moving. This is what we want to achieve:
The shader for the grid was comprised of two parts. A simple tiled texture of the grid that's being multipled by a circular gradient to make the edges fade off.
This tech demo takes it's goal to showcase the car's capabilities.
Let's start by highlighting the wheels.
Adding this shader to a plane will result in a dashed circle which is rotating by a defined speed. Combined with world space UI with a normal Text component this can highlight some interesting capabilities or parameters of the given product.
After showcasing the wheels we want to finish with a broad information about the product. In this case, that would be the car's full name and perhaps some available configurations.
By using the Unity's timeline we can control when the wheel dashes and text will be shown. This is complemented by the camera animation.
Needle Engine seems to be a very good candidate for us!
There are a few features which we miss.
That would be for example proper support for the Lit Shader Graphs. But nothing stops us to create shaders the three.js way and create simmilar shaders in Unity for our content team to tweak the materials.
Using Needle was a blast! ๐ต
|
+ |
+ Priority | +Change Frequency | +Last Updated Time | +
|---|---|---|---|
|
+ |
+
+ |
+
+ |
+
+ |
+
When using our templates, Needle Engine runs a local development server for you. Simply press play, and a website will open in your default browser, ready for testing on your local device. For testing on other devices in the same network, you may have to install a self-signed certificate (see below).
When using a custom setup / framework, please refer to your framework's documentation on how to run a secure local development server.
Tips
Our local server uses the IP address in your local network (e.g. https://192.168.0.123:3000) instead of localhost:3000. This allows you to quickly view and test your project from mobile devices, VR glasses, and other machines in the same network.
We're using HTTPS instead of the older HTTP, because modern powerful web APIs like WebXR require a secure connection โ the S stands for "secure".
Different operating systems have different security requirements for local development. Typically, displaying a website will work even with a auto-generated untrusted certificate, but browsers may warn about the missing trust and some features are not available. Here's a summary:
Tips
Installing trusted self-signed certificates on your development devices is recommended for a smooth development experience. Find the steps at the bottom of this page.
Default โ with auto-generated untrusted certificate
Displays a certificate warning upon opening the project in a browser.Uses the vite-plugin-basic-ssl npm package.
We're using websocket connections to communicate between the browser and the local development server. Websockets require a secure connection (HTTPS) in order to work. Depending on the platform, you might need to set up a custom certificate for local development. Android and Windows don't need a custom certificate, but iOS and MacOS do.
| OS | Viewing in the browser (with a security warning) | Automatic reloads |
|---|---|---|
| Windows | (โ) | โ |
| Linux | (โ) | โ |
| Android | (โ) | โ |
| macOS | (โ) | โ |
| iOS | (โ Safari and Chrome, after page reload) โ Mozilla XR Viewer | โ |
| Xcode Simulators | (โ after page reload) | โ |
With a self-signed, trusted root certificate
No security warning is displayed. You need to install the generated certificate on your device(s).
Uses the vite-plugin-mkcert npm package.
| OS | Viewing in the browser | Automatic reloads |
|---|---|---|
| Windows | โ | โ |
| Linux | โ | โ |
| Android | โ | โ |
| macOS | โ | โ |
| iOS | โ | โ |
in Unity/Blender, click on "Open Workspace" to open VS Code
check that you're using vite-plugin-mkcert instead of vite-plugin-basic-ssl (the latter doesn't generate a trusted root certificate, which we need) in your vite.config.ts file:
package.json"@vitejs/plugin-basic-ssl" from devDependenciesnpm install vite-plugin-mkcert --save-dev which will add the latest versionvite.config.ts and replace import basicSsl from '@vitejs/plugin-basic-ssl' with import mkcert from'vite-plugin-mkcert'plugins: [, replace basicSsl(), with mkcert(),
run npm run start once from VS Code's terminal
Error: Port 3000 is already in use, please close the server that may still be running from Unity.the generated certificate will automatically be installed on the machine you generated it on.
you can stop the terminal process again.
from now on, pressing Play in Unity/Blender will use the generated certificate for the local server, and no "security warning" will be shown anymore, since your browser now trusts the local connection.
On your development devices, you need to install the generated certificate and allow the OS to trust it. This is different for each OS. For each of them, you'll need the rootCA.pem file that was generated, and send it to the device you want to authenticate.
On Windows: find the certificate in Users/<your-user>/.vite-plugin-mkcert/rootCA.pem
On MacOS: find the certificate in Users/<your-user>/.vite-plugin-mkcert/rootCA.pem
Send the device to yourself (e.g. via E-Mail, AirDrop, iCloud, USB, Slack, ...) so that you can access it on your development devices.
Trust or go to Settings > General > About > Info > Certificate Trust Settings and enable full trust for the root certificate.Tips
The certificate is automatically installed on the machine you generated it on. For other machines in the local network, follow the steps below to also establish a trusted connection.
certmgr ("Manage user certificates") by typing Windows key + certmgr.rootCA.pem file (you may have to change the file type to "all") and follow the instructions.
+ 
+ 
Needle Engine provides an easy-to-use web component that can be used to display rich, interactive 3D scenes directly in HTML with just a few lines of code. It's the same web component that powers our integrations.
Once you outgrow the configuration options of the web component, you can extend it with custom scripts and components, and full programmatic scene graph access.
Use the integrations!
For complex 3D scenes and fast iteration, we recommend using Needle Engine with one of our integrations. They provide a powerful creation workflow, including a live preview, hot reloading, and an advanced build pipeline with 3D optimizations.
<!DOCTYPE html>
+<html>
+<head>
+ <!-- Import the Needle Engine module -->
+ <script
+ type="module"
+ src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.min.js">
+ </script>
+</head>
+<body style="margin:0; padding:0;">
+ <!--
+ Add the <needle-engine> HTML component to your page, and specify a source file.
+ This .glb file contains interactions, sounds, a skybox, and animations,
+ because it was exported from our Unity integration.
+ -->
+ <needle-engine src="https://cloud.needle.tools/api/v1/public/873a48a/10801b111/MusicalInstrument.glb" background-blurriness="0.8"></needle-engine>
+</body>
+</html>Open this example on Stackblitz
You can work directly with Needle Engine without using any Integration. Needle Engine uses three.js as scene graph and rendering library, so all functionality from three.js is available in Needle as well.
You can install Needle Engine from npm by running:npm i @needle-tools/engine
While our default template uses vite, Needle Engine can also be used directly with vanilla Javascript โ without using any bundler.
You can add a complete, prebundled version of Needle Engine to your website with just a line of code. This includes our core components, physics, particles, networking, XR, and more. Use this if you're not sure!
<script type="module"
+ src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.min.js">
+</script>If you know your project doesn't require physics features, you can also use a smaller version of Needle Engine, without the physics engine. This will reduce the total downloaded size.
<script type="module"
+ src="https://unpkg.com/@needle-tools/engine/dist/needle-engine.light.min.js">
+</script>Many examples can be found on StackBlitz.
For quick experiments, we provide a convenient link to create a new project ready to start, powered by StackBlitz:
engine.needle.tools/new
Under construction
If you want to work with Needle Engine without any integration, then you'll likely want to run a local server for your website. Here's how you can do that with Visual Studio Code:
http://localhost:5500/index.html in your web browser, if it doesn't open automatically.Since Needle Engine uses three.js as scene graph and rendering library, all functionality from three.js is available in Needle as well and can be used from component scripts. We're using a fork of three.js that includes additional features and improvements, especially in relation to WebXR, Animation, and USDZ export.
Tips
Make sure to update the <needle-engine src="myScene.glb"> path to an existing glb file or download this sample glb and put it in the same folder as the index.html, name it myScene.glb or update the src path.
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" href="favicon.ico">
+ <meta name="viewport" content="width=device-width, user-scalable=no">
+ <title>Made with Needle</title>
+
+ <!-- importmap -->
+ <script type="importmap">
+ {
+ "imports": {
+ "three": "https://unpkg.com/three/build/three.module.js",
+ "three/": "https://unpkg.com/three/"
+ }
+ }
+ </script>
+ <!-- parcel require must currently defined somewhere for peerjs -->
+ <script> var parcelRequire; </script>
+
+ <!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
+ <script type="module" src="https://unpkg.com/@needle-tools/engine@3.5.6-alpha/dist/needle-engine.light.min.js"></script>
+
+ <style>
+ body { margin: 0; }
+ needle-engine {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ background: grey;
+ }
+ </style>
+
+</head>
+
+<body>
+
+ <!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
+ <needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>
+
+</body>
+
+<script>
+ function onLoaded(ctx) {
+ console.log("Loading a glb file finished ๐");
+ console.log("This is the scene: ", ctx.scene);
+ }
+</script>
+
+</html>
Drop the downloaded .unitypackage file into a Unity project and confirm that you want to import it.
Wait a moment for the installation and import to finish. A window may open stating that "A new scoped registry is now available in the Package Manager.". This is our Needle Package registry. You can safely close that window.
Explore Samples.
Select the menu option Needle Engine > Explore Samples to view, open and modify all available sample scenes.
There are 100+ samples that cover a wide range of topics, use cases, and industries.
For a quick overview, take a look at our Samples page.
All of these samples are available directly in Unity:
Needle Engine > Explore Samples to browse for samplesOpen Scene.The Samples are read-only โ that makes them easy to update.
Our samples scenes are part of a UPM package in Unity. This means that you can't edit the assets and scripts in them directly โ they are read-only. To edit an asset from the samples package, copy it into your project's Assets folder. To edit a script from the samples package, copy it into your web project's src folder.
We provide a number of Scene Templates for quickly starting new projects.
These allow you to go from idea to prototype in a few clicks.
Click on File > New Scene
Select one of the templates with (needle) in their name and click Create.
We recommend the Collaborative Sandbox template which is a great way to get started with interactivity, multiplayer, and adding assets.
Click Play to install and startup your new web project.
If you don't want to start from a scene template, you can follow these steps.
Effectively, we're going to recreate the "Minimal (Needle)" template that's shipping with the package.
Create a new empty scene
Set up your scene for exporting
Add an empty GameObject, name it "Exporter" and add an ExportInfo component to it.
In this component you create and quickly access your exported runtime project.
It also warns you if any of our packages and modules are outdated or not locally installed in your web project.
Project Name and Scene Name
By default, the project name matches the name of your scene. If you want to change that, you can pick or enter a Directory Name where you want to create your new web project. The path is relative to your Unity project.
Choose a web project template Now, select a web project template for your project. The default template is based on Vite, a fast web app bundler.
Click Play to install and start your new web project
Define your own templates
If you find yourself creating many similar projects, you can create your own local or remote templates using the Project View context menu under Create/Needle Engine/Project Template. Templates can either be local on disk (a folder being copied) or remote repositories (a git repository being cloned).
| Folder | |
|---|---|
| Unity | |
Assets | This is where project specific/exclusive assets live. |
Packages | This is where packages installed for this project live. A package can contain any asset type. The main difference is that it can be added to multiple Unity projects. It therefor is a great method to share code or assets. To learn more about packages see the Unity documentation about packages. |
| Needle Engine Unity Package | |
Core/Runtime/Components | Contains all Needle Engine built-in components. Learn more about them in the Components Reference. |
When creating a new web project in Unity, you can choose to create it from a local template (by default we ship a vite based web template).
You can also reference remote templates by entering a repository URL in the ExportInfo project path (this can be saved with your scene for example). When creating a new web project the repository will be either cloned or downloaded (depending on if you have git installed) and searched for a needle.config.json file. If none can be found in the cloned repository the root directory will be used. Examples of remote template projects can be found on github.com/needle-engine
If you're planning to only add custom files via NpmDefs and not change the project config (e.g. for a quick fullscreen test), you can prefix the project path with Library. The project will be generated in the Unity Project Library and does not need to be added to source control (the Library folder should be excluded from source control). We call these projects temporary projects. They're great for quickly testing out ideas!
NPM Definition are npm packages tightly integrated into the Unity Editor which makes it easily possible to share scripts with multiple web- or even Unity projects.
C# component stubs for typescript files will also be automatically generated for scripts inside npmdef packages.
To create a NPM Definition right click in the Unity Project browser and select Create/NPM Definition.
You can install a NPM Definition package to your runtime project by e.g. selecting your Export Info component and adding it to the dependencies list (internally this will just add the underlying npm package to your package.json).
Don't forget to install the newly added package by e.g. clicking Install on the ExportInfo component and also restart the server if it is already running
To edit the code inside a NPM Definition package just double click the asset NPM Definition asset in your project browser and it will open the vscode workspace that comes with each npmdef.
Theoretically all WebXR-capable devices and browsers should be supported. That being said, we've tested the following configurations:
| Tested VR Device | Browser | Notes |
|---|---|---|
| Apple Vision Pro | โ๏ธ Safari Browser | hand tracking, support for transient pointer |
| Meta Quest 1 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1 |
| Meta Quest 2 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough (black and white) |
| Meta Quest 3 | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough, depth sensing, mesh tracking |
| Meta Quest Pro | โ๏ธ Meta Browser | hand tracking, support for sessiongranted1, passthrough |
| Pico Neo 3 | โ๏ธ Pico Browser | no hand tracking, inverted controller thumbsticks |
| Pico Neo 4 | โ๏ธ Pico Browser | passthrough, hand tracking2 |
| Oculus Rift 1/2 | โ๏ธ Chrome | |
| Hololens 2 | โ๏ธ Edge | hand tracking, support for AR and VR (in VR mode, background is rendered as well) |
| Looking Glass Portrait | โ๏ธ Chrome | requires shim, see samples |
| Tested AR Device | Browser | Notes |
|---|---|---|
| Android 10+ | โ๏ธ Chrome | |
| Android 10+ | โ๏ธ Firefox | |
| iOS 15+ | โ๏ธ WebXR Viewer | does not fully implement standards, but supported |
| iOS 15+ | (โ๏ธ)3 Safari | No full code support, but Needle Everywhere Actions are supported for creating dynamic, interactive USDZ files. |
| Hololens 2 | โ๏ธ Edge | |
| Hololens 1 | โ | no WebXR support |
| Magic Leap 2 | โ๏ธ |
| Not Tested but Should Workโข๏ธ | Browser | Notes |
|---|---|---|
| Magic Leap 1 | please let us know if you tried! |
1: Requires enabling a browser flag: chrome://flags/#webxr-navigation-permission
2: Requires enabling a toggle in the Developer settings
3: Uses Everywhere Actions or other approaches
Visit our Needle Engine XR Samples to try many interactive examples right now!
AR, VR and networking capabilites in Needle Engine are designed to be modular. You can choose to not support any of them, or add only specific features.
Enable AR and VR
Add a WebXR component.
Optional: you can set a custom avatar by referencing an Avatar Prefab.
By default a very basic DefaultAvatar is assigned.
Enable Teleportation
Add a TeleportTarget component to object hierarchies that can be teleported on.
To exclude specific objects, set their layer to IgnoreRaycasting.
Enable Networking
Add a SyncedRoom component.
Enable Desktop Viewer Sync
Add a SyncedCamera component.
Enable Voice Chat
Add a VoIP component.
Note: these components can be anywhere inside your
GltfObjecthierarchy. They can also all be on the same GameObject.
Castle Builder uses all of the above for a cross-platform multiplayer sandbox experience.
โ #madebyneedle ๐
WebARSessionRoot component to your root object.Define whether an object is visible in Browser, AR, VR, First Person, Third Person
Add a XR Flag component to the object you want to control. Change options on the dropdown as needed.
Common usecases are
Needle Engine supports the sessiongranted state. This allows users to seamlessly traverse between WebXR applications without leaving an immersive session โ they stay in VR or AR.
Currently, this is only supported on Oculus Quest 1, 2 and 3 in the Oculus Browser. On other platforms, users will be kicked out of their current immersive session and have to enter VR again on the new page.
Requires enabling a browser flag: chrome://flags/#webxr-navigation-permission
OpenURL component that makes it very easy to build connected worlds.Read more about scripting for XR at the scripting XR documentation
While we don't currently provide an out-of-the-box integration external avatar systems, you can create application-specific avatars or custom systems.
Head and add a XRFlag that's set to Third PersonHandLeft and HandRightThere's a number of experimental components to build more expressive Avatars. At this point we recommended duplicating them to make your own variants, since they might be changed or removed at a later point.
Example Avatar Rig with basic neck model and limb constraints
Random Player Colors
As an example for avatar customization, you can add a PlayerColor component to your renderers.
This randomized color is synchronized between players.
Eye RotationAvatarEyeLook_Rotation rotates GameObjects (eyes) to follow other avatars and a random target. This component is synchronized between players.
Eye BlinkingAvatarBlink_Simple randomly hides GameObjects (eyes) every few seconds, emulating a blink.
Example Avatar Prefab hierarchy
Offset ConstraintOffsetConstraint allows to shift an object in relation to another one in Avatar space. This allows, for example, to have a Body follow the Head but keep rotation levelled. It also allows to construct simple neck models.
Limb ConstraintBasicIKConstraint is a very minimalistic constraint that takes two transforms and a hint. This is useful to construct simple arm or leg chains. As rotation is currently not properly implemented, arms and legs may need to be rotationally symmetric to "look right". It's called "Basic" for a reason!
If you want to display different html content whether the client is using a regular browser or using AR or VR, you can just use a set of html classes.
This is controlled via HTML element classes. For example, to make content appear on desktop and in AR add a <div class="desktop ar"> ... </div> inside the <needle-engine> tag:
<needle-engine>
+ <div class="desktop ar" style="pointer-events:none;">
+ <div class="positioning-container">
+ <p>your content for AR and desktop goes here</p>
+ <p class="only-in-ar">This will only be visible in AR</p>
+ <div>
+ </div>
+</needle-engine>Content Overlays are implemented using the optional dom-overlay feature which is usually supported on screen-based AR devices (phones, tablets).
Use the .ar-session-active class to show/hide specific content while in AR. The :xr-overlay pseudo class shouldn't be used at this point because using it breaks Mozilla's WebXR Viewer.
.only-in-ar {
+ display: none;
+}
+
+.ar-session-active .only-in-ar {
+ display:initial;
+}It's worth noting that the overlay element will be always displayed fullscreen while in XR, independent of styling that has been applied. If you want to align items differently, you should make a container inside the class="ar" element.
Needle Engine supports WebXR ImageTracking (Live Demo)
Note: While WebXR ImageTracking is still in "draft" phase (Marker Tracking Explainer)
you need to follow these steps to enable WebXR ImageTracking on Android devices:
WebXR Incubations in chromeWebXRImageTracking componentYou can find additional documentation in the Everywhere Actions section
Without that spec, one can still request camera image access and run custom algorithms to determine device pose.
Libraries to add image tracking:
Augmented Reality experiences on iOS are somewhat limited, due to Apple currently not supporting WebXR on iOS devices.
Needle Engine's Everywhere Actions are designed to fill that gap, bringing automatic interactive capabilities to iOS devices for scenes composed of specific components. They support a subset of the functionality that's available in WebXR, for example spatial audio, image tracking, animations, and more. See the docs for more information.
Here's an example for a musical instrument that uses Everywhere Actions and thus works in browsers and in AR on iOS devices. It uses spatial audio, animation, and tap interactions.
There's also other options for guiding iOS users to even more capable interactive AR experiences:
Encryption in Space uses this approach. Players can collaboratively place text into the scene on their screens and then view the results in AR on iOS. On Android, they can also interact right in WebXR.
โ #madewithneedle by Katja Rempel ๐
Guiding users towards WebXR-compatible browsers on iOS. Depending on your target audience, you can guide users on iOS towards for example Mozilla's WebXR Viewer to experience AR on iOS.
Using camera access and custom algorithms on iOS devices.
One can request camera image access and run custom algorithms to determine device pose.
While we currently don't provide built-in components for this, here's a few references to libraries and frameworks that we want to try in the future:
WebXR Device API
caniuse: WebXR
Apple's Preliminary USD Behaviours