Here is anything related to vanilla threejs & cool finds or links on twitter
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1722193200:f> (this is in your local time). We will be in our Hubs room at https://hubs.webxr.community/anWukKk/webxr-discord.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
Also, our monthly meetup begins in ~20 minutes!
@everyone Letting you folks know that AWS and Meta are putting together another hackathon! It takes place August 27-August 29, and while WebXR isn't the focus this time, WebXR entries are still very much welcome and encouraged. Check the link for more details: https://pages.awscloud.com/GLOBAL-event-T3-meta-and-aws-presence-platform-hackathon-2024-reg-event.html
@everyone Monthly meetup beginning now!
It's coworking day! @Meetup, come hang out!
Hey @everyone/@Meetup, the Games Showcase is officially starting! Join us! 😁
🎥 Some of the recorded Games Showcases are now available on YouTube! Thanks @trezy for hosting and recording the events, and @kenny.wtf for managing the channel! https://www.youtube.com/@webgamedev Subscribe ❤️
Hello @everyone! Our monthly meetup will be beginning in 5 minutes. No planned presentations for today, so it'll be pretty freeform, but if you have anything you want to talk about feel free to stop by! The URL for the room is https://hubs.webxr.community/anWukKk/webxr-discord.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord. See you there!
Did I understand correctly a reddit post that says that I can use Needle Engine to export a particle system from Unity as a gltf file and import it into three js project?
Hi <@426507297246674964> Which reddit post do you refer to? But yes technically you can import the glTF and access the data for the particle system in any three.js project. If you use Needle Engine then the particlesystem would be loaded by the engine https://engine.needle.tools/samples/particles
I think it was this one: https://www.reddit.com/r/threejs/comments/yoy3vz/exporting_particles_from_unity_to_threejs_with/
So my workflow logic should be applicable right: Create Unity project with needle package. Create GameObject with Particle Effects and Needle Script stuff. Export the GameObject as gltf and import into threejs with useGltf function?
You could do that if you register a GLTFLoader extension for NEEDLE_components to access the particlesystem data. Do you have experience with that or an existing project? Are you using R3F at the moment or is there a specific reason why you want to use this workflow?
Im using R3F, dont have much experience but im using the proect for learning, creating a portfolio(so not in comercial use). If you got any links to existing tutorials or repos I can check out for reference It would make my life easier
For Needle Engine go to https://samples.needle.tools - all the samples can be downloaded 🙂
I checked out the examples already and found the one with particles, I tried exporting an object from Unity using Assets->UnityGLTF->Export selected as GLTF. The gltf file gets created, then I try threejs useGLTF(path) to create the object but the scene does not create it(i exported just an "empty" object with particle system attatched to it so if particles are not shown there is no mesh)
That's what i meant here 🙂 Use Needle Engine if you want to use the glTF directly with the Particles that you authored in Unity as is or you can re-create the particlesystem in R3F in which case you need to handle rendering yourself.
right so im guessing i should use needle engine gltf loader in my threejs project, not the r3f version or its the same?
I still need help. I exported a SmokeEffect that has ParticleSystem script on it in Unity. I added GLTFObject script to it and added Export object(from sample scene). It contains NeedleEngine script(I changed the template to R3F), ComponentGenerator, DeployToGlitch, SkyboxExportSettings and NeedleEditorSync scripts attached to it. Export steps were GameObject->UnityGLTF->Export selected as GLTF and exported it to public/... folder of ThreeJS project. It generates SmokeEffect.bin, SmokeEffect.gltf, SmokePuff04.png-1 and SmokePuff04Normal.jpg-1(it makes an orange particles in my scene, when i remove -1 from image files it renders correct particle image). However the scene is static and no particles are generated and are not moving.
I will attach the gltf file and i can copy the three js code for importing.
Hope someone can help
You'll need to export with "GameObject > Needle Engine > Export as GLB" Note the "Needle Engine" menu instead of the "UnityGLTF" menu
If i do this the object does not load(i tried verifing via gltf viewer i get the error in image attached)
Am i missing some steps? Do i need to add additional code for enabling the particle system in three js?
GLTF Content: {"metadata":{"version":4.6,"type":"Object","generator":"Object3D.toJSON"},"object":{"uuid":"b60bd31c-a51c-4be8-87a5-a31731d435e6","type":"Group","name":"SmokeEffectglb","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"up":[0,1,0],"children":[{"uuid":"51e891d8-99ac-4872-9384-3ea3cf4c38b9","type":"Object3D","name":"SmokeEffect","userData":{"name":"SmokeEffect","gltfExtensions":{"NEEDLE_editor":{"id":"6400159491434804159_750665007710600732"},"NEEDLE_gameobject_data":{"guid":"6400159491434804159_750665007710600732"}}},"layers":1,"matrix":[0.9658946652181464,-0.25881548814225336,-0.007876121626577637,0,-0.00852434254272938,-0.0013823287606897772,-0.9999626308022923,0,0.25879494929075364,0.9659257065191477,-0.00354141327172397,0,-1.22766376,0.8345566,-9.123273,1],"up":[0,1,0]}]}} App.tsx:87 Animations: [] App.tsx:88 Extensions: {"NEEDLE_lighting_settings":{"ambientMode":3,"ambientLight":[0.2830189,0.2830189,0.2830189,1],"ambientIntensity":1,"environmentReflectionSource":0},"NEEDLE_lightmaps":{"textures":[{"pointer":"/textures/0","type":1,"index":0}]}}
It seems to me that particle System script attached to object did not get exported. Am i doing something wrong?
You need to load it via needle - not entirely sure I can follow
The files contain custom extensions (for example for particles) so the validator will complain that it doesn’t know the extensions. Needle know them of course 🙂
Well im not sure either if i can follow the advices i get so i will try to make the question as simple as it can be: how do i export the object from the 1st image and import it into a threejs empty scene so that particles are emiting
I am fine with doing animation baking of said particle, but im having trouble and im not sure if its posible since the particle is just emitting the shader
import it into a threejs empty scene I think there may be a misunderstanding. three.js does not have particle systems out of the box. Needle has. You can load the file with Needle, which is based on three.js, and get your particle systems.
Hey @everyone, there will be no Games Showcase this month. I wasn't able to book a full roster, so we'll be skipping this month.
That said, I'll be hanging out in the Lounge chat during the normal showcase time. Come hang out and chat about your games, get a little work done, hear about my experience at devcom/gamescom, and let me know if you have a project you want to present for the October Games Showcase! 😁
Hi @everyone!
💌 The Web Game Dev Newsletter Issue 023 is out! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🐘 Mastodon • 🦋 Bluesky
Another super big one, I can't help it, sorry! Thank you! ❤️
Hello @everyone! Our monthly meetup will be beginning in ~25 minutes. No planned presentations for today, but feel free to stop by if you do have something you want to show or just feel like hanging out! The URL for the room is https://hubs.webxr.community/anWukKk/webxr-discord.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord. See you there!
Hi everyone! https://funny-web-site.vercel.app/IMMERSIVE
Hey @everyone, our next showcase is on Friday! I currently have 1 presentation booked and would love to get at least 1 if not 2 more presenters on the list. If you're interested in showing off your game to the WGD community, shoot me a DM! 😁 https://discord.com/events/1032873609280106566/1283872087345463296/1291776845414400000
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1730055600:f> (this is in your local time). We will be in our Hubs room at https://hubs.webxr.community/anWukKk/webxr-discord.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now!
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1732474800:f> (this is in your local time). This time around we'll be taking a trip to a meeting space designed by our friends over at Wonderland Engine! It'll be in their Wonderland Hub at https://webxr-meetup.wonderlandengine.com.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now! Reminder that today we are in https://webxr-meetup.wonderlandengine.com/.
🚀 Alright, @React Three Fiber folks: Three.js r171 is the release you've been waiting for to use WebGPU with zero config. It has been tested with Vite, Next.js 14/15, Pages/App routers, React 18/19, and even RSCs. All test cases are documented in this repo. This is all you need to use WebGPU today:
import { Canvas } from '@react-three/fiber'
import { WebGPURenderer } from 'three/webgpu'
// ...
<Canvas gl={canvas => new WebGPURenderer({ canvas })}>
<:r3f:1049222603270799380> Let's go!! <:r3f:1049222603270799380>
💌 The Web Game Dev Newsletter Issue 024 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
💫 Happy holidays, and see you 2025! Thank you! ❤️
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1734894000:f> (this is in your local time). Our regular Hubs instance unfortunately seems to have broke at an inopportune time (and I probably won't have enough time today to fully debug/restore), so we'll be at our FRAME meeting space instead. The link to that is https://framevr.io/webxr-discord.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. If you have any projects or news you'd like to share/present, shoot me a message! Otherwise, see you at the final meetup of 2024!
Good news @everyone! Thanks to the help of @HrithikWins we now have Hubs working for the meetup today! The room link has changed, so be sure to join https://hubs.webxr.community/XyuRTLu/webxr-discord/ for the meetup today.
@everyone Monthly meetup beginning now! https://hubs.webxr.community/XyuRTLu/webxr-discord/
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1737918023:f> (this is in your local time). We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. Note that this URL has changed recently, as I moved hosting providers for the instance.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now! https://hubs.webxr.community/xjMXKJb/webxr-discord
@everyone Apologies, we're having some technical difficulties with voice in the instance right now! I'll make an update announcement shortly
@everyone We're all good now, thank you for your patience!
Hey all, I’d like to use Needle for VFX in my vanilla three.js project.
Is this a good use case? I know Needle is primarily used for scene composition
Eg Use Needle exported gltf files in my three.js scene imperatively when I want to trigger a vfx
I think I see a way with using the ContextRegistry
But it seems like I need to let Needle create and manage my scene graph and handle the loading of Needle customized glb assets
I would prefer to keep using my regular three.js setup and be able to plop in needle components as desired
But it seems like that won't really be possible
Hi Scott, so when you export e.g particle systems with Needle Engine in Unity you get all the data inside the glTF NEEDLE_components extension (the gltf is not modified in any way, they're regular glTF files and you can load any glTF file with Needle Engine or Needle Engine glTF files anywhere else too)
That means what you can do is to add a three GltfLoader plugin when loading your VFX file (e.g. assuming you setup an effect in Unity and export that e.g. via context menu in the scene or asset hierarchy) and then use the exported data to recreate the effect in vanilla three.js.
What you're currently asking sounds a bit like using react components without react or svelte templates without svelte - so the Needle Engine particle components need to be updated by a Needle Engine context. Under the hood the scene and objects are all three.js so I'd be interested to understand why you can't just add what you currently have in your three project to the Needle Engine scene?
E.g. via a lifecycle hook onStart(context => console.log(context.scene));
That would work. It just would be very un ergonomic for our use case. We’re creating a three.js game with all that that entails, and we don’t have any use case for using entire scenes. We just want to download a glb file with Needle extensions and then tell Needle to manage its lifecycle, and have that all be encapsulated inside a component so we can add multiple instances of it to our threejs scene
What do you mean by entire scenes? You can setup e.g. only a particle system in Unity -> export -> load into a Needle Engine scene and create the whole rest via your code as you would with vanilla threejs.
I made a quick example on stackblitz based on a vite template. Note that i only added the onStart() which gives me access to the three scene/renderer (all empty initially).
In Unity i created an empty scene, added a particle system and exported that to a glTF file via the context menu, dropped that to my web project and load it in code to play the effect. The context menu export here is mainly because I wanted to send you a stackblitz file and demonstract that you can setup your project elsewhere and just load those files
Yes that makes sense
But how would I load MULTIPLE Needle particle systems?
For example, triggering multiple separate explosions inside my scene
Same way - I can export them all in separate glb files and then load them separately on demand to the scene (or remove them from the scene)
Not sure what your ideal workflow would be for developing the effects. For example you can have one unity scene where you setup all effects and then export what you need/changed via context menu OR you can have the Needle Unity plugin export them as separate GLB files when you add a GltfObject component (which does the same as a context click export but automatically to a local folder which could be setup to your sourcecontrol for example).
Just create multiple instances of the effects you want. I can make an example if it helps.
I’d have to look at some code examples but that sounds great
The stackblitz link has some code. Here are also more examples on stackbliz: https://stackblitz.com/@marwie/collections/needle-engine OR you can checkout the samples repo https://github.com/needle-tools/needle-engine-samples and there are some basic examples in the docs too: https://engine.needle.tools/docs/scripting-examples.html
I updated the example to load more effects at an interval and destroys them again after some time....
What would be awesome is a three.js custom Mesh class (extends three Mesh) and which simply has a parameter referencing a path to the glb file. All the needle lifecycle stuff would be encapsulated inside the mesh constructor.
But am I right in thinking this wouldn’t be possible?
I’d be willing to use the forked version of threejs
You could also call all the lifecycle methods of a component from your own code technically. But I'm still not sure why you'd prefer that?
Just would be more ergonomic to me
It’s fine I’ll investigate
Thanks for all your help!
Hello @everyone! This is a reminder that our monthly meetup will be taking place <t:1740340800:f> (this is in your local time). I want to experiment with adding a couple more meeting spaces into rotation this year (including one we've never used for a meetup before 👀), so we'll be visiting our FRAME meeting space today. The link to that is https://framevr.io/webxr-discord. For those wondering about the time change, our meetups were traditionally always at 3PM EST/12PM PST, but since I no longer live in a state with daylight savings time it seems I accidentally missed a change at some point, so I'm taking this chance to reset it back to normal.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now! https://framevr.io/webxr-discord
💌 The Web Game Dev Newsletter Issue 025 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
Thank you! ❤️
Hello @everyone! This is a reminder that our monthly meetup will be taking place within the next 10 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. For anyone that may have connectivity issues to the instance, I've whipped up a quick Google Form to try and gather more data + narrow down what may be causing it, which you can access here https://forms.gle/2VeUxfEB3pXHwDyZ9.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
Hello @everyone! This is a reminder that our monthly meetup will be taking place within the next 10 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. For anyone that may have connectivity issues to the instance, I've whipped up a quick Google Form to try and gather more data + narrow down what may be causing it, which you can access here https://forms.gle/2VeUxfEB3pXHwDyZ9.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
💌 The Web Game Dev Newsletter Issue 026 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
Thank you! ❤️
Hello @everyone! This is a reminder that our monthly meetup is taking place now! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. For anyone that may have connectivity issues to the instance, I've whipped up a quick Google Form to try and gather more data + narrow down what may be causing it, which you can access here https://forms.gle/2VeUxfEB3pXHwDyZ9.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
Hello @everyone! This is a reminder that our monthly meetup is taking in less than 15 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. For anyone that may have connectivity issues to the instance, I've whipped up a quick Google Form to try and gather more data + narrow down what may be causing it, which you can access here https://forms.gle/2VeUxfEB3pXHwDyZ9.
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now! https://hubs.webxr.community/xjMXKJb/webxr-discord
@everyone Three.js r178 released 🧡 https://x.com/threejs/status/1939695023492395112
Hello @everyone! This is a reminder that our monthly meetup is taking in about 15 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. Nothing on the docket today, but feel free to stop by and chat!
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Three.js r179 released 🌟 https://x.com/threejs/status/1951272304803254698
💌 The Web Game Dev Newsletter Issue 027 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
Thank you! ❤️
Hey guys! I'm trying to get the needle-tools/usd npm package to work with ThreeJS. was wondering if there's any documentation on this as the examples link is invalid and the demo code seems to be missing parts of it
USD package
Hello @everyone! This is a reminder that our monthly meetup is starting now! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. Nothing much on the docket today, but feel free to stop by and chat!
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Three.js r180 released 🫰 https://x.com/threejs/status/1963256400366415953
Hello everyone 👋 I wanted to ask a question on here and I do not know in which chat.
whats your question? if it's about needle-engine maybe ask in <#1166424502008303696> otherwise for webdev this chat here is fine
Hello @everyone! This is a reminder that our monthly meetup is starting in less than 30 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. Nothing much on the docket today, but feel free to stop by and chat!
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Monthly meetup beginning now! https://hubs.webxr.community/xjMXKJb/webxr-discord
💌 The Web Game Dev Newsletter Issue 028 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
Thank you! ❤️
@everyone Three.js r181 released 🎃 https://fxtwitter.com/threejs/status/1984292085563089194
@everyone For any members near London, Zappar is considering hosting a WebXR meetup at their office on Friday December 12: check https://discord.com/channels/758943204715659264/1438894292759347202 for more details and RSVP if you'd like to attend!
@everyone Hey everyone! Meta is putting on a competition with dedicated prizes for WebXR submissions, check out the announcement below:
Are you ready to take your WebXR project to the next level? Join the Meta Horizon Start Developer Competition and compete for your share of $1.5 million in cash prizes—with dedicated awards for WebXR developers! Why Participate? Showcase your innovation: Build new or enhanced Entertainment, Lifestyle, or Gaming experiences for Meta Quest. Win big:
Apply to Meta Horizon Start: To be eligible, you must be a member of the Start program. Apply now
Check out the competition details and submit your project: View on Devpost
Mark your calendar: Competition runs: November 5, 2025 – December 9, 2025 Don’t miss this chance to put your WebXR skills in the spotlight and win big!
If you have questions or want to connect with other developers, join the IWSDK Workshop & Office Hour on November 24.
Hello @everyone! This is a reminder that our monthly meetup is starting in less than 30 minutes! We will be in our Hubs room at https://hubs.webxr.community/xjMXKJb/webxr-discord. Nothing on the docket today, but feel free to stop by and chat!
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
@everyone Apologies everyone, I just had something come up on my end and probably won't be able to attend for another hour. You're welcome to hang around in the room beforehand, there just won't be a presentation-runner there
I'm back! On stream now to look at @ns tcg's project!
@everyone Three.js r182 released 📈 https://fxtwitter.com/threejs/status/1998816106728010050
@everyone Congratulations to @jamesckane and his app "The Nanauts" for winning "Best Immersive Experience Built with Immersive Web SDK" in the Meta Horizon Start Developer Competition! https://devpost.com/software/nanauts
@everyone Whoops, I missed the other winning entries! Additional congratulations to:
If any of you are in the server, let me know and I can tag you properly.
Links: https://devpost.com/software/dunjun https://devpost.com/software/handcraft-xr-winter-edition https://devpost.com/software/party-blast
💌 The Web Game Dev Newsletter Issue 029 is out, @everyone! 🙏 Please help share it on your favorite platforms: 🐦 X / Twitter • 🦋 Bluesky • 🐘 Mastodon
Thank you! ❤️
Hello @everyone! This is a reminder that our monthly meetup is starting in less than 15 minutes! We will be in our Hubs room at https://hubs.webxr.community/zjSBhxt/webxr-discord-monthly-meetup. Nothing on the docket today, but feel free to stop by and chat!
If you're unable to attend, you can also catch the livestream at https://www.twitch.tv/webxrdiscord, as well as the VODs on both the Twitch channel and YouTube at https://www.youtube.com/@webxrdiscord. See you there!
