⚠️ 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."

⚠️ Please use WithThreeJS v1.0.1 or later for GDevelop v5.2.173 or later.

♻️ This extension has changed significantly in version 1.0.0. Always make a backup of your project before updating extensions in an existing project.

🎉 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.0.2. (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.

📖 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.

📺 More Videos

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.

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 [NEW!]

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 [NEW!]

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

About using GLB Model

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 [NEW!]

🎁 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 [NEW!]

  • [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 [UPDATE!]
      • Clear 3D Scene
      • Load 3D Texture
      • Load 3D Model From OBJ
      • Raycast
    • [Expression]
      • Raycast Result Count
      • Raycast Result Number
    • [String Expression]
      • Raycast Result String
  • 3D Object
    • [Action]
      • Create 3D Sprite
      • Create 3D Plane
      • Create 3D Box
      • Create 3D Model
      • Create 3D Model From Built-In 3D Model
      • 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
      • Correct 3D Object Rotation Within Limits (Deprecated)
      • Remove 3D Object
      • Change 3D Texture
      • Change 3D Object Visibility
      • Change 3D Object Opacity
      • Change 3D Object Scale
      • Change 3D Object DepthWrite (Experimental)
      • Change 3D Object All Animations Speed Scale
      • Resolve Bounding Box Collision
      • Add Child
      • Detach From Parent
      • Set 3D Object ID Of Children To Scene Variable
      • Play 3D Animation
      • Stop 3D Animation
    • [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
      • 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
      • Correct 3D Camera Rotation Within Limits (Deprecated)
      • Change 3D Camera FOV
      • Change 3D Camera Near
      • Change 3D Camera Far
      • Change 3D Camera Zoom
      • Raycast From 3D Camera
      • Setup Multiple 3D Cameras
    • [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 [NEW!]
  • 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

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 18 days ago
StatusIn development
CategoryOther
PlatformsHTML5
Rating
Rated 5.0 out of 5 stars
(47 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.0.2.zip 206 kB
ExtraFiles.zip 304 kB
WithThreeJsExtensionExamples1.0.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 161 · Next page · Last page

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.

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) (+4)
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 76 days ago

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

(+1)

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、いつも拝見させていただいております。最近ゲーム作りに触れ始めた全くの初心者なので質問の意図がうまく伝えられるか不安なのですが1つお伺いしたいことが有ります。私はデスクトップ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!

(+1)
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?

Hello! I'd like to know if its possible to add some sort of cubemap reflections to an obj model? three.js does indeed support it so is there a way to do it? Thanks in advance!

(-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!

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 214 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))

I need help! I'm trying to use rotate camera like head on macOS but I run into 2  1 problems

1. idk how to use it 

2. tutorials doesn't seem to work( the example shooter project also doesnt work :( ...   

I found a new solution.. instead I use rotate camera instead of rotate camera like head.. I don't know if this will work on other devices so please test it on a windows or linux or something like that :)

there's also a problem about the camera limitations and stuff

( again idk know how to use it T-T )

(+1)

By "shooter project" are you perhaps referring to the "FPS Example" example I am distributing?

Unfortunately I don't have a Mac so I can't confirm the problem. Are there any Mac users experiencing similar problems?

correct! i found a way to work around this by using "rotate camera" instead of "rotate camera like head" since i dont own a windows idk if it works on other platforms :/ 

My Skybox dosent work anymore. It worked earlier. Even if i create a totally new scene the scybox is just a pink texture instead of my picture. The path of the picture is right. What are possible reasons of this?

Make sure you haven't removed the skybox image from your resources. There are also reports that placing the skybox image in the project folder instead of the assets folder fixed it.

Btw i've solved this problem. Despite the fact a picture is in the game folder it can be not in resources list of the game. So i should first add this picture to any sprite/any other object to make it visible in the project resources list.

(+1)

I just wanna say that I really appreciate what you are doing - great work!

How do I add more that one OBJ  for 3d models that are too big to add normally through actions? I tried through JavaScript and it would not load the second large OBJ.

does anyone know how to make a 3d slope 

Viewing most recent comments 1 to 40 of 161 · Next page · Last page