WithThreeJS Extension for GDevelop
โ ๏ธ If you receive a black screen or a warning when using the WithThreeJS extension in GDevelop v5.3 or later, please see this page.
About the warning "Please add an Enable WithThreeJS object to a scene."
๐ WithThreeJs is now on the GDevelop Community Extensions!
Distribution of the latest version may take some time. The version currently distributed by the community is 2.1.0. (latest ๐)
WithThreeJS Extension for GDevelop
Extension for GDevelop to create simple 3D scenes.
This extension is intended for easy and simple 3D rendering. It does not currently aim for realistic 3D rendering.
๐ Feature
3D Features | WithThreeJS | Built-in 3D |
---|---|---|
Editor integration | โ | ๐ |
3D Collision detection | ๐ | ๐ (Extension) |
3D Raycast | ๐ | ๐ (Extension) |
3D Light | ๐ | ๐ (My extension) |
3D Shadow | ๐ | ๐ (My extension) |
3D Sound | ๐ | โ |
3D Background image | ๐ | ๐ (My extension) |
3D Sprite animation | ๐ | ๐ (Extension) |
3D Particles | โ | ๐ (Extension) |
3D Physics engine | โ | โ |
Multiple 3D Cameras | ๐ | โ |
Grouping 3D Objects | ๐ | โ |
Parent-child structure | ๐ | โ |
3D Helpers | ๐ | ๐ (My extension) |
Post effect | โ | โ |
Supported 3D formats | GLB, OBJ | GLB |
๐ How to use
Import the downloaded "WithThreeJS0.0.0.json" file into your project.
There is no manual at this time. Please refer to the following video.
โน๏ธ For more information about Behaviors, see "About Behaviors" below.
๐บ Please subscribe to my YouTube channel.
There are more videos on my YouTube channel.
Difference between GDevelop axes and 3D Scene axes
Difference between GDevelop units and 3D scene units.
GDevelop units are pixels and 3D scene units are meters.
Camera shooting direction
The camera shoots in the local negative Z axis direction.
About Behaviors.
This extension comes with very powerful behaviors.
The various projection behaviors project 2D objects onto 3D objects. When you create or move a 2D object, the 3D object changes in the same way.
- 3D Sprite Projection Behavior
- 3D Board Projection Behavior
- 3D Plane Projection from Tiled Sprite Behavior
- 3D Box Projection from Tiled Sprite Behavior
- Linked 3D Camera Behavior
- Linked 3D Light Behavior
The features supported by behaviors vary. Please also check the summary below.
โน๏ธ Many various 3D actions have no effect on objects using behaviors. Because the 2D object values take precedence.
โน๏ธ Do not add more than one of these behaviors to an object.
Please refer to the following video.
About 3D Custom Objects
This extension comes with custom objects.
Custom Objects are similar to Projection Behaviors, but support different features.
- 3D Box Custom Object
- Enable WithThreeJS Custom Object
Please also check the summary below.
About using GLB Model
๐ฃ Where did the "Create 3D Model From Built-In 3D Model" action go?
With an updated GDevelop interface, the action now appears when you select a 3D model.
โ ๏ธ 3D models often have a parent-child structure. Therefore, if you want to use Bounding Box Collision, you need to know the ID (name) of the mesh that has the bounding box in advance.
The simplest solution is to add the 3D Model as a child of the 3D Box.
About importing OBJ files
It has some rules and restrictions.
- Open the OBJ file in a text editor and copy/paste the contents into GDevelop.
- The 3D model must contain UV mapping.
- Texture is required. No MTL files are used, so no material colors are applied.
- For models with multiple materials, specify the textures in GDevelop in that order. (Because of this limitation, it is not possible to set up an OBJ file where multiple models have materials in different orders)
โน๏ธ Entering large OBJ strings directly into actions slows down GDevelop. I recommend using Javascript events as shown in the video.
About the Alpha Channel Test
From v0.3.2, "Alpha Channel Test" can be set in "Create 3D Sprite", "Create 3D Plane", "Create 3D Model" and "3D Sprite Projection".
This is a non-rendered transparency reference value.
0 to 1 (Recommended values: 0 or 0.5)
โน๏ธ If the texture is opaque, you can set the value to 0 to reduce the drawing load.
About Skybox
To enable Skybox, you need to set an equirectangular image with a 2:1 aspect ratio.
Euler angle problem
As this image shows, you may not always get the values you expect from the rotation.
There is more than one way to represent any given rotation using XYZ (Euler angles). Comparing just one of the XYZ values of a rotation can be confusing.
The simplest solution is to use different variables for each XYZ to manage the rotation.
Example of limiting rotation:
Please refer to "Simple FPS Example" or "Third-person Perspective Example".
For more information on this problem, you may want to search for explanations of Euler and Quaternion by Unity, Unreal Engine, etc.
About 3D Lights
โน๏ธ 3D Sprite do not support 3D Lights.
โน๏ธ Lighting and drop shadows are different features.
How to enable 3D Shadows
- Darken the Ambient Light Color of the 3D Scene.
- Check "Cast Shadow" of 3D Light.
- Check "Cast Shadow" for the 3D Object that casts a shadow.
- Check "Receive Shadow" of the 3D Object that receives the shadow.
- Adjust the 3D Light shadow settings.
This extension provides real-time shadows.
Real-time shadowing is a heavy process. Therefore, it is recommended to minimize the shadow generation range.
It is a good idea to move the light along with the camera so that shadows are generated only where necessary.
โน๏ธ 3D Sprite do not support 3D Shadows.
โน๏ธ Many game engines often use pre-baked shadows and real-time shadows together, but with this extension it is difficult to use baked shadows and real-time shadows together due to limitations of Three.js.
For examples of adjusting 3D light properties, see this page.
Bounding Box Collision and Oriented Bounding Box Collision
โน๏ธ Note that the Oriented Bounding Box is generated based on the unrotated state of the 3D object.
๐ Examples project file
"WithThreeJsExtensionExamples0.0.0.zip" is the examples project.
Open "game.json" in GDevelop.
List of examples included in the project.
- Basic Example (Using Behaviors)
- Basic Example (Using Actions)
- 3D Box With Multiple Textures Example
- GLB vs OBJ
- Loading Large OBJ Format Example
- Platformer Example
- Classic FPS Example
- Background and Fog Example
- Various Billboard Samples
- 8 Direction Character Example
- Bounding Box Collision Example
- 3D Raycast Example [UPDATE! 2.1.0]
- Simple Ground Check Example
- Point on Camera Example [UPDATE! 2.1.0]
- Alpha Channel Test Samples
- Opacity Blend Samples
- Dungeon Example
- Remove 3D Object Example
- Simple Effect Example
- Effect Material Samples
- Simple FPS Example
- Parent-child Relationship Example
- Third-person Perspective Example
- 3D Sound Example
- Multiple Camera Example
- GLB Model Animation Example
- Light Example
- 3D Object Variable Example
- Futuristic Racing Example
- Shadow Example
๐ Summary
โน๏ธ The "Projection Scale" and "View Mode" properties that affect Behavior can be set in the "Create 3D Scene" action.
3D Sprite Projection Behavior
Supported: position, animation, flip, scale, opacity, blend mode
- [Expression]
- Alpha Channel Test
- [String Expression]
- 3D Object ID
3D Board Projection Behavior
Supported: position, angle, animation, flip, scale, opacity, blend mode
- [Expression]
- Alpha Channel Test
- [String Expression]
- 3D Object ID
- Axis linked to 2D Object Angle
- Orientation
3D Plane Projection from Tiled Sprite Behavior
Supported: position, angle, image offset, opacity, (blend mode)
- [Expression]
- Alpha Channel Test
- [String Expression]
- 3D Object ID
- Blend Mode
3D Box Projection from Tiled Sprite Behavior
Supported: position, angle, image offset, opacity, (blend mode)
- [Expression]
- Depth
- Alpha Channel Test
- [String Expression]
- 3D Object ID
- Blend Mode
Linked 3D Camera Behavior
Supported: position, angle
- [Expression]
- 3D Camera ID
- Field Of View
Linked 3D Light Behavior
Supported: position, angle
- [Expression]
- Tilt
- [String Expression]
- 3D Object ID
- Type
3D Box Custom Object
The 3D Box can have different textures on its 6 faces.
Supported: position, angle, opacity, (blend mode)
โ ๏ธ This object is high load.
- [Expression]
- Depth
- [String Expression]
- 3D Object ID
Enable WithThreeJS Custom Object
This custom object always enables built-in 3D rendering.
Click here for instructions on how to use it.
Function
- 3D Scene
- [Action]
- Create 3D Scene
- Clear 3D Scene
- Load 3D Texture
- Load 3D Model From OBJ
- [Action]
- 3D Object
- [Action]
- Create 3D Sprite
- Create 3D Plane
- Create 3D Box
- Create 3D Model
- Create 3D Model From Built-In 3D Model
- Create 3D Group
- Move 3D Object
- Move 3D Object On World
- Rotate 3D Object
- Rotate 3D Object Like Head
- Rotate 3D Object On World
- Look At 3D Object
- Look At 3D Camera
- Remove 3D Object
- Change 3D Texture
- Change 3D Object Visibility
- Change 3D Object Opacity
- Change 3D Object Scale
- Change 3D Object DepthWrite
- Change 3D Object All Animations Speed Scale
- Change 3D Object Blend Mode
- Change 3D Object Raycast Detection [NEW! 2.1.0]
- Resolve Bounding Box Collision
- Add Child
- Detach From Parent
- Set 3D Object ID Of Children To Scene Variable (Deprecated)
- Set 3D Object ID Of Children To Variable
- Play 3D Animation
- Stop 3D Animation
- Set number to 3D Object Variable
- Set string to 3D Object Variable
- Linearly interpolate 3D Object
- Add Suffix To 3D Object ID
- Set 3D Object Shadow
- [Expression]
- 3D Object Position
- 3D Object Position On World
- 3D Object Rotation
- 3D Object Rotation On World
- 3D Object Direction
- 3D Object Opacity
- 3D Object Scale
- 3D Object Animation Speed Scale
- 3D Object Animation Time
- 3D Object Animation Duration
- 3D Object Number Variable
- 3D Object String Variable
- Distance From 3D Object To 3D Object
- Bounding Box Collision Result Number
- [String Expression]
- 3D Object Parent
- [Condition]
- Check Existence Of 3D Object
- Check Visibility Of 3D Object
- Check Bounding Box Collision
- Check 3D Animation Is Playing
- Check 3D Animation Is Finished
- Check Oriented Bounding Box Collision
- Check 3D Object Is Within 3D Camera FOV [NEW! 2.1.0]
- [Action]
- 3D Camera
- [Action]
- Move 3D Camera
- Rotate 3D Camera
- Rotate 3D Camera On World
- Rotate 3D Camera Like Head
- 3D Camera Look At 3D Object
- Change 3D Camera FOV
- Change 3D Camera Near
- Change 3D Camera Far
- Change 3D Camera Zoom
- Setup Multiple 3D Cameras
- Linearly interpolate 3D Camera
- [Expression]
- 3D Camera Position
- 3D Camera Rotation
- 3D Camera Direction
- Distance From 3D Camera To 3D Object
- 3D Camera FOV
- 3D Camera Near
- 3D Camera Far
- 3D Camera Zoom
- Point Of 3D Object On 3D Camera
- Point Of World Position On 3D Camera
- [Action]
- 3D Sound
- [Action]
- Play 3D Sound
- Stop 3D Sound
- Change Master Volume Of 3D Scene
- [Expression]
- Master Volume Of 3D Scene
- [Condition]
- Check 3D Sound Is Playing
- [Action]
- 3D Light
- [Action]
- Create 3D Light
- [Action]
- 3D Raycast
- [Action]
- Raycast
- Raycast From 3D Camera
- Raycast From 3D Object
- Place 3D Object Using Raycast Result
- [Expression]
- Raycast Result Count
- Raycast Result Number
- [String Expression]
- Raycast Result String
- [Action]
- 3D Debug
- [Action]
- Create 3D Axes Helper [UPDATE! 2.1.0]
- Update Bounding Box Helper [UPDATE! 2.1.0]
- Output 3D Model Information To Console
- Output All IDs To Console
- [Action]
๐ Recommended 3D Software
- MagicaVoxel
- Blockbench
- Sprytile (addon for Blender)
๐พ Games created with this extension
Bomb Poi Poi
Haunted Shadow House
Time Trial 3D
gd.games (Liluo.io) / Google Play
๐ Three.js
Copyright 2010-2023 Three.js Authors
https://github.com/mrdoob/three.js/blob/dev/LICENSE
๐ฉ Donation
In the future I would like to add many features to this extension. (e.g. particle system, physics, etc.)
However, developing this extension requires a lot of time.
Currently, I'm doing development in between jobs, but if many people support me, I will be able to devote more time to the development.
If you enjoy this extension, please consider downloading the Example project file to maintain this extension. (The Example project file will surely help you.๐)
Updated | 11 days ago |
Status | In development |
Category | Other |
Platforms | HTML5 |
Rating | Rated 5.0 out of 5 stars (51 total ratings) |
Author | PANDAKO |
Made with | GDevelop |
Tags | 3D, Pixel Art, Retro |
Code license | MIT License |
Download
Click download now to get access to the following files:
Comments
Log in with itch.io to leave a comment.
Hey, PANDAKO!
Could you change the "cursor lock" key from esc to something else? For my Fps game I would use esc to enter the menu :)
Unfortunately, this is a configured behavior in the browser and cannot be changed.
Hello, can someone please help me with collisions? Preferably on already existing box projection from tiled sprites, i tried almost every tutorial on youtube and they are either too old or do some weird stuff that doesn't work, or they just do not work and objects just go through the floor :(
any help or documentation about collisions would be greatly appreciated
How do you make the objects not blurry?
Awesome extension! I am currently having trouble with the 3D lights however. When i delete the light object, the light stays in place of the object as shown in the screenshot.
Also i know this isn't relevant to this extension but i know you developed it, the Mouse Pointer Lock extension doesn't seem to work on desktop and (chromium-based) browser version of GDevelop, only in Firefox.
Hope to see more improvements to the extension in the future!
This also applies to toggling it's visibility.
Thank you for reporting this.
I was not able to reproduce the lighting issue. I checked both when using behaviors and when using actions.
Please let me know the steps to check the issue in a new scene.
Do you mean the helper is not deleted? The helper is for debugging and will not be removed.
I don't know how, but trying to reproduce the bug in a new scene/project and now it works as intended when i toggle visibility of the light object. I honestly have no clue what i did wrong since both scene events look identical.
The only difference i made is i created the "light" boolean variable using "At the beginning of the scene" and made it a scene variable instead of a global variable.
I can maybe send the project file to you to check it out yourself.
> Do you mean the helper is not deleted? The helper is for debugging and will not be removed.
No, the bug happens when the helper is on or off. Doesn't matter.
Please send me your project files. I'll leave it up to you to decide how to send the files.
Here you go!
I received the project.
I can't find an action to remove the light. I don't know how to reproduce the problem.
Please explain.
Are you using the "Mouse Pointer Lock" extension on Linux? I've heard reports of issues with it on Linux.
Yes! To be specific, Arch Linux with the GNOME desktop environment using X11/X.org display server. It only works when i have GDevelop open in Firefox and nothing else.
The extension will be updated soon (if approved by GDevelop...)
An update for the Mouse Pointer Lock extension has been released. v0.1.7 is available.
Can confirm it works! Much appreciated!
when 3d multiplayer example?
Hey PANDAKO can you re-added Correct 3D Camera Rotation Within Limits (experimental) for the Website version of Gdevelop
Hello! The pause and return to the scene it's fixed now?
where did correct camera rotation go?
Really like this! Paid the $5. Worth it!
I'm using Create Objects from LAYOUT in my scenes and notice when I PAUSE & go to another scene... objects from the previous scene transfer... and when I RETURN to the original scene it crashes
Thank you for reporting it. I have confirmed that an error occurs.
WithThreeJS does not support the "Pause and start a new scene" action. Currently, I am working on improvements to avoid the error.
Also, I need to have a scene with an ORTHOGRAPHIC camera view. How can I do that?
can you use 3d shadows in gdevlops 3d
My game is made with this extension.
https://radioactive-frog-games.itch.io/the-elders-realm
Is there a chance you can sell ready g develop templates? I am having hard time following your youtube tutorials. I would pay for those templates.
thank yuo so much for making this! definitely changed gdevelop!
could you make a documentation on this extension?
How do I get the example?
have to pay 5 bucks
Download older version if using an older version of Gdevelop?
Ok, I figured out how to add my own GLB 3D file from the video above. Thanks for that! But how do I add collision with the camera and GLB object? I can not seem to get it to work. Oh and is there a forum for WithThreeJS? It would be nice to have community support.
The new gdev update breaks this extension
Yeah, I get a black screen when I open the preview of the project I was testing this with. Hopefully there's an update fix.
Thanks for letting me know. I am currently working on the issue.
If you want to solve the issue right away, please add a 3D box to Scene objects (no need to place it in the scene). That alone will solve this issue.
Oh that seemed to work, thank you!
Love the extension. Hopefully one day you can just mod the official 3d to include things like your lighting and sprite projections.
Hey uh, huge fan, love your work. Umm, could you help me with setting up 3D sound. I can't seem to find a simple explanation for it. I want a rock band to play songs on stage and the player's location to affect how it sounds. Please and thank you.
Really cool! Just purchased. Is there a way to make snow falling? Like a particle effect.
Is there a way to get other versions of this extension? The latest versions are fine, but I'm not quite used to the changes yet. I'm specifically looking for version 8.5, btw.
It's possible to use Spine 2D Threejs runtime with this plugin?
We are waiting for version 1 !!!
There is an extension 3d particles that works with default gdevelop 3d but doesnt work with WithThreeJs. Could you please integrate it with WithThreeJs?
I use 3D projection sprites and want to remove them by there 3D ID. Is this possible?
Can we make 3D layers, for example to make an enemy marking mechanic like in Metal Gear Solid V or Far Cry?
Great! Did you use JS for this?
Thank you.
I am adding features from ThreeJs.
Within 1 or 2 days I will upload a scene with all the new content, including a night / day scene, a generator of terrain (using heightmaps and displacement) and an isometric game mode.
Wow this is really epic! How did you do this?
Thank you very much, Pandako. Great work.
I created a little mod for your extension, to load morph targets.
Hi Pandako,
I tried to follow with the examples and I cant get mouse look or wasd movement working despite copying exactly from the simple fps example. Could you make a tutorial video of how to get it working from scratch?
pls add lighting
Hi Pandako,
Firstly, Thank you for the frequent updates on the extension!
I need to ask, what do you think is the difference between this extension and the 3D features built in GDevelop?
Your description says "This extension is intended for easy and simple 3D rendering." Which means it is made for graphics like Duke3D:
Is that correct?
If you plan to optimize the 3d functions and avoid adding shaders, I would be very happy.
how to make camera bounce when moving?
How do I use this in the browser version of GDevelop? There is no option to import an extension.
I don't know if the browser version allows extension from asset store, but this is now in the Community Extensions
Really? What is it called?
I think it's also called "WithThreeJS". There is an image from this page, try looking for it. (Can't paste it here somehow)
Thank you so much!
How to find out 3d object ID? What is the easiest way?