Multiple <needle-engine> components

[dusky kindle]

I'm making a front-end application with Vue.js and I'm trying to integrate needles into the app. I have multiple card components each with some text and a space for a 3D preview of a model.

I'm having trouble:

1. Styling the needle-engine component to fit in the card
2. Passing some properties to the component to tell each needles-engine component what 3d model to display.

Is this something I should just do with three.js and reserve needle's engine for the more detailed AR preview after clicking on the card? The needles component also seems to have trouble finding my generated scripts when it is not at the top level of the project file structure like in the Vue sample app provided by needles.

[velvet widget]

Thanks for reaching out @dusky kindle

Please read through the following and share the information requested. This will help us to better assist you.

Description

Describe the issue that you're seeing. Please be as detailed as possible e.g. is this issue happening in Unity or Blender, which Needle Engine version are you using, do you see any errors in the Editor or Browser console, etc.

Information:

• If you're using Unity click the menu item Needle Engine/Report a Bug/Copy Project Info to Clipboard. Please share the results below.
• Please provide code snippets using Discord Code Blocks
• Have you contacted Needle through another channel or just through Discord?

Thanks for submitting!

💡 Did you know that we now also have a forum with AI support? Join now with your discord account!

[dusky kindle]

I was able to get the styling kind of where I want it, but it is not able to find the generated script I have

It would also be nice to be able to pass properties to each needle-engine component

[tame trout]

Hi <needle-engine> is just a regular web component. You can resize and style and include it in your DOM like any other HTML element. You can check the chrome element inspector to see what styles are applied from which file.

You can also pass in a different glb url to each component via <needle-engine src="<path/to/your.glb"></needle-engine> if you want (same way as in e.g. modelviewer) https://engine.needle.tools/docs/reference/needle-engine-attributes.html

[dusky kindle]

can src take a download url?

[tame trout]

Yes

[dusky kindle]

Thanks @tame trout ! Also is there a way to dynamically pass a variable to this src attribute

[dusky kindle]

What is this modelviewer example? (where can I find it)

[tame trout]

You mean a different URL? What kind of variable do you mean?

[tame trout]

I just mean: It's the same thing as if you'd be using <modelviewer>

Maybe this example helps you: https://stackblitz.com/edit/needle-engine-cycle-src?file=index.html

[dusky kindle]

yes dynamically pass the url in

[tame trout]

See the stackblitz link I just posted 🙂

[dusky kindle]

Thanks! but is it possible to do something like in the stackblitz when there are multiple needle-engine components?

Since each needle-engine component is loaded dynamically I want to be able to pass in the corresponding glb to each one

through src

[tame trout]

Yes it is. Stackblitz is using also just a small vite template - basically the same you get when you create a web project in Unity with Needle 🙂

[dusky kindle]

I was also looking into addContextCreatedCallback() since if I'm just able to access a gameobject that has a loader script in each needle engine component then I could tell each which model to load

Do you know how addContextCreatedCallback() works when there are multiple needle-engine components in the scene

I could not find the documentation for it

[tame trout]

Sure, you get the context inside the argument addContextCreatedCallback(args => { const context = args.context; console.log(context.domElement) })
The domElement is your <needle-engine> HTML element

You can also use onInitialized which is newer and a bit shorter to write onInitialized(context => console.log(context.domElement)) https://engine.needle.tools/docs/scripting.html#special-lifecycle-hooks

[dusky kindle]

Perfect this helps a ton thanks! I think I'm good now

[tame trout]

Ok great 🙂

[dusky kindle]

Just one more question, using onInitialized seems to affect all needle-engine components is there a way to isolate the context passed into each onInitialized lifecycle hook to each component