๐Ÿ‘ฃ 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.

โš ๏ธ 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 1.2.0. (old ๐Ÿ˜ข)

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 FeaturesWithThreeJSBuilt-in 3D
Editor integrationโ›…๐ŸŒž
3D Collision detection
๐ŸŒž๐ŸŒž (Extension)
3D Raycast๐ŸŒž๐ŸŒž (Extension)
3D Light๐ŸŒžโ›…
3D Sound๐ŸŒžโ˜”
3D Background image๐ŸŒžโ˜”
3D Sprite animation๐ŸŒžโ˜”
3D Particlesโ˜”๐ŸŒž (Extension)
3D Shadowโ˜”โ˜”
3D Physics engineโ˜”โ˜”
Multiple 3D cameras๐ŸŒžโ˜”
Grouping 3D Objects๐ŸŒžโ˜”
Parent-child structure๐ŸŒžโ˜”
3D Helpers๐ŸŒžโ˜”
Supported 3D formatsGLB, OBJGLB

๐Ÿ“– 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.

Watch this video to learn how to create 3D Objects using events.

โ„น๏ธ Don't forget that you need to register your images with GDevelop's resources, for example using sprite objects.

๐Ÿ“บ 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.
Also, you don't need to load the textures beforehand.

โ„น๏ธ Many various 3D actions have no effect on objects using behaviors. Because the 2D object values take precedence.
The features supported by behaviors vary.

โ„น๏ธ Do not add more than one of these behaviors to an object.

Please refer to the following video.

3D Sprite Projection Behavior

Supported: position, animation, flip, scale, opacity, blend mode

3D Board Projection Behavior

Supported: position, angle, animation, flip, scale, opacity, blend mode

3D Plane Projection from Tiled Sprite Behavior

Supported: position, angle, image offset, opacity, (blend mode)

3D Box Projection from Tiled Sprite Behavior

Supported: position, angle, image offset, opacity, (blend mode)

Linked 3D Camera Behavior

Supported: position, angle

Linked 3D Light Behavior

Supported: position, angle

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 (Experimental)

The 3D Box can have different textures on its 6 faces.
Supported: position, angle, opacity, (blend mode)
โš ๏ธ This object is high load.

Enable WithThreeJS Custom Object

This custom object always enables built-in 3D rendering.
Click here for instructions on how to use it.

About using GLB Model

โš ๏ธ 3D Models do not support Bounding Box Collision. This is because the 3D Model does not have a Bounding Box.
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.

โ„น๏ธ Don't forget that you need to register your images with GDevelop's resources, for example using sprite objects.

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. 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. Drop shadows are not yet implemented.

๐Ÿ“‚ 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
  • Loading OBJ Format Example
  • 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
  • Simple Ground Check Example
  • Point on Camera Example
  • 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

๐ŸŽ Extra files

"ExtraFiles.zip" contains 3D model files, etc.
Please open the file with the corresponding software.

  • car.vox (MagicaVoxel file, etc.)
  • simpleHuman.bbmodel (Blockbench file, etc.)
  • Stage1.bbmodel (Blockbench file, etc.)

๐Ÿ“ƒ Summary

โ„น๏ธ The "Projection Scale" and "ViewMode" properties are now set in the "Create 3D Scene" action.

3D Sprite Projection Behavior

  • [Expression]
    • Alpha Channel Test
  • [String Expression]
    • 3D Object ID

3D Board Projection Behavior

  • [Expression]
    • Alpha Channel Test
  • [String Expression]
    • 3D Object ID
    • Axis linked to 2D Object Angle
    • Orientation

3D Plane Projection from Tiled Sprite Behavior

  • [Expression]
    • Alpha Channel Test
  • [String Expression]
    • 3D Object ID
    • Blend Mode

3D Box Projection from Tiled Sprite Behavior

  • [Expression]
    • Depth
    • Alpha Channel Test
  • [String Expression]
    • 3D Object ID
    • Blend Mode

Linked 3D Camera Behavior

  • [Expression]
    • 3D Camera ID
    • Field Of View

Linked 3D Light Behavior

  • [Expression]
    • Tilt
  • [String Expression]
    • 3D Object ID
    • Type

3D Box Custom Object (Experimental)

  • [Expression]
    • Depth
  • [String Expression]
    • 3D Object ID

Function

  • 3D Scene
    • [Action]
      • Create 3D Scene
      • Clear 3D Scene
      • Load 3D Texture
      • Load 3D Model From OBJ
  • 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 [UPDATE! 1.2.0]
      • Change 3D Object Scale
      • Change 3D Object DepthWrite (Experimental) [UPDATE! 1.2.0]
      • Change 3D Object All Animations Speed Scale
      • Change 3D Object Blend Mode [NEW! 1.2.0]
      • Resolve Bounding Box Collision
      • Add Child
      • Detach From Parent
      • Set 3D Object ID Of Children To Scene 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 [NEW! 1.2.0]
    • [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
  • 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 Angle (Experimental)
      • 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
  • 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
  • 3D Light
    • [Action]
      • Create 3D Light
  • 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
  • 3D Debug
    • [Action]
      • Create 3D Axes Helper
      • Update Bounding Box Helper
      • Output 3D Model Information To Console
      • Output All IDs To Console

๐Ÿ’– Recommended 3D Software

๐Ÿ‘พ Games created with this extension

Bomb Poi Poi

gd.games

Haunted Shadow House

gd.games

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. light and shadow, physics, bone animation, 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.๐Ÿ˜‰)

Buy Me a Coffee at ko-fi.com

Updated 16 days ago
StatusIn development
CategoryOther
PlatformsHTML5
Rating
Rated 5.0 out of 5 stars
(46 total ratings)
AuthorPANDAKO
Made withGDevelop
Tags3D, Pixel Art, Retro
Code licenseMIT License

Download

Download NowName your own price

Click download now to get access to the following files:

WithThreeJS1.2.1.zip 52 kB
ExtraFiles.zip 304 kB
WithThreeJsExtensionExamples1.1.1.zip 11 MB
if you pay $5 USD or more

Development log

View all posts

Comments

Log in with itch.io to leave a comment.

Viewing most recent comments 1 to 40 of 166 ยท Next page ยท Last page

Any performance improvement idea? I almsot finish my fps game first map, but too laggy. Fps drop sometimes. I set lowest rendering, but not really help. 

(+1)

could you make a documentation on this extension?

How do I get the example?

(+1)

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.

(+2)

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.

(+1)

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.

(1 edit)

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.

(1 edit)

Really cool! Just purchased. Is there a way to make snow falling? Like a particle effect.

(1 edit)

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.

(-1)

It's possible to use Spine 2D Threejs runtime with this plugin? 

(-2)

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?

(5 edits) (+5)
I managed to add advanced light and shadow, it's still a little rough but it worked.

Great! Did you use JS for this?

(1 edit) (+3)

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.

Deleted 194 days ago
(+1)

Wow this is really epic! How did you do this?

(+1)

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

(+2)

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:

image

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?

(1 edit) (+1)

Hi! Just noticed something with the animations - when you try to play an animation it will just stay idle(not animated) unless you click off "hide 2d" then they all start to animate. I can't seem to get any projected 2d sprites animated without this option..

The new 9.0 version is EXTREEMLY UNSTABLE. If you copy and paste something from the previous version the 3D RENDERING stop's working entirely and everything stops working please fix this.

(+2)

Version 0.9.0 is not backward compatible. You must correctly re-set the parameters of all actions and expressions related to 3D.

If it is difficult, please download version 0.8.5 from this page and import again.

pandakoใ•ใ‚“ใฏใ˜ใ‚ใพใ—ใฆใ€‚YouTubeใ€ใ„ใคใ‚‚ๆ‹่ฆ‹ใ•ใ›ใฆใ„ใŸใ ใ„ใฆใŠใ‚Šใพใ™ใ€‚ๆœ€่ฟ‘ใ‚ฒใƒผใƒ ไฝœใ‚Šใซ่งฆใ‚Œๅง‹ใ‚ใŸๅ…จใใฎๅˆๅฟƒ่€…ใชใฎใง่ณชๅ•ใฎๆ„ๅ›ณใŒใ†ใพใไผใˆใ‚‰ใ‚Œใ‚‹ใ‹ไธๅฎ‰ใชใฎใงใ™ใŒ๏ผ‘ใคใŠไผบใ„ใ—ใŸใ„ใ“ใจใŒๆœ‰ใ‚Šใพใ™ใ€‚็งใฏใƒ‡ใ‚นใ‚ฏใƒˆใƒƒใƒ—PCใงใฏใชใiPadใ‚’ไฝฟ็”จใ—ใ€Gdevelopใซใฆใ‚ฒใƒผใƒ ใ‚’ไฝœใ‚Šๅง‹ใ‚ใŸใฎใงใ™ใŒใ€ใ“ใกใ‚‰ใฎใ‚ตใƒผใƒ“ใ‚นใ‚’ๅˆฉ็”จใ—ใ€Gdevelop appใง3Dใ‚ฒใƒผใƒ ใ‚’ไฝœๆˆใ™ใ‚‹ใ“ใจใฏ็พ็Šถ้›ฃใ—ใ„ใฎใงใ—ใ‚‡ใ†ใ‹๏ผŸๅ›ž็ญ”ใ„ใŸใ ใ‘ใพใ—ใŸใ‚‰ๅนธใ„ใงใ™ใ€‚

Hi Beginnerman,

I recommend using the browser version instead of the app version.

ใ“ใฎๆ‹กๅผตๆฉŸ่ƒฝใฏiOSใ‚ขใƒ—ใƒช็‰ˆใงใฏไธๅฎ‰ๅฎšใงใ™ใ€‚ใ‚ขใƒ—ใƒช็‰ˆใงใฏใชใใƒ–ใƒฉใ‚ฆใ‚ถ็‰ˆใ‚’ไฝฟ็”จใ™ใ‚‹ใ“ใจใ‚’ใŠๅ‹งใ‚ใ—ใพใ™ใ€‚

(+1)

Hey PANDAKO!

Thanks for the built-in 3D integration, really useful to take advantage of both features at the same time!

(+2)
An excellent extension, it and the built-in 3D tools in Gdevelop opened up an endless number of new possibilities. Definitely a big step for Gdevelop. Thank you and good luck with your future development!

hello! can you add lighting pls?

(-1)

Hello, i have a problem, whenever i move on the mouse, it doesent work, please hurry because i am on an event, thank you

(1 edit) (+1)

I have some questions:

1) For 3D Box and Plane Projection from Tiled Sprite Behavior, is there a way to rotate it in world? Imagine a fan of a windmill, for example.

Solved it: Set 2D angle linked to Z-Axis!

2) Any tips for implementing head bobbing for the 3D camera? I tried it with various methods but only able to make the camera shaky.

All the best and thank you!

(1 edit)

Im stucking on the rotation thing. How did you solve it? Can you explain, how did you linked the 2d angle to the Z-Axis?

Can you make a bounding sphere?

I have the issue of a jumpy 3D camera (any type of head/world) if I use a 1000 hz(or higher) mouse polling rate. I tested this on two Windows 10 PCs, one low-spec and the other mid-spec with the same result. ShortClipOfTheJumpyCamera The clip is an extreme example of the teleporting/jumpy 3D cam problem since the problem is exaggerated when other things are running in the background. An anti-virus was scanning plus a Twitch stream was running.

(+1)

Thanks for reporting.

This problem is somewhat improved by using version 0.1.4 of the "Mouse Pointer Lock" extension. If you are already using it, please wait until further improved versions are released.

I'm having a problem, when I try to move my head using the hints that are available, for some reason my camera angle gets stuck and I can't move my head.


รcone "Verificada pela comunidade"


(+1)(-3)

With the game jam coming up and me being not able to purchase the examples me and many of us are left in the dark when it comes to how to use this extension.

I really hope that you choose to put this information out to the public instead of leaving information behind a paywall.  There are several 3D extensions being made by people like yourself but i want to use yours.

it would be better to get this information from you instead of us getting it from someone else. 

(+2)(-1)

Thanks for your opinion.

I'm sorry. I do not offer examples for free. Instead I will continue to provide videos with tips.

Deleted 332 days ago
(+1)(-5)

You are being very silly. Pandako has written and published the extension for anyone to use. All the documentation *is on this page!* In addition there are quite a few videos demonstrating the process of creating game examples. What Pandako is charging ($5!) for is the examples they made. These take time to make and test. When you are an adult time has a value you would be foolish to squander. I wonder how much your computer cost and who bought it for you?

(+2)(-3)

What are you even talking about?  I didnt ask for any examples for free, I asked for information.  Try again when you try to belittle someone. Maybe im so poor that i can not do game dev but in a free library to learn? Maybe i can not learn from the comfort of a home like you. Think before you speak to others that way.

(+1)(-5)

๐Ÿ˜‚

(+2)

agreeing with theartbros about the information

- an homeless aspiring gamedeveloper

Agreed!

This is wonderful, but it doesn't seem to work on my project the 3d scene doesn't display

I Need Help!

(again :P)

since my magicavoxel only appears as a black screen i used blockbench to make my obj model.. (now i dont know if blockbench works or not) but i saw someone used blender so i made mine with blender (keep in mind none of them appeared in my game)

unless im stupid and it has something to do with the setup or the texturing :/     

(and im too lazy to make another model if i dont really need to (but if i do then ill just make another model... if magicavoxel would OPEN (not blank screen))

Viewing most recent comments 1 to 40 of 166 ยท Next page ยท Last page