Controls: WASD keys.

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 rendering with light and shadow.

⚠️ Precautions for use

This extension is experimental. Destructive changes may be made.

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

ℹ️ 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.

3D Sprite Projection

The "3D Sprite Projection" behavior projects a sprite object onto a 3D sprite.
It supports animation. No need to load textures beforehand.

3D Plane Projection from Tiled Sprite
3D Box Projection from Tiled Sprite
Linked 3D Camera

Please refer to the following video.

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.

πŸ“‚ 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
  • 3D Box example
  • 3D Sprite example
  • Load OBJ format example
  • Simple collision example
  • Viewer Example
  • Platformer Example
  • 3D Sprite Projection Behavior Example
  • Raycast Example
  • Change 3D Texture Example
  • Simple Walkthrough Example
  • Alpha Channel Test Sample
  • Dungeon Example
  • Background Example
  • 8 Direction Character Example [NEW!]

πŸ“ƒ Summary

3D Sprite Projection Behavior

Supported: position, animation, flip

  • [Expression]
    • Projection Scale
  • [String Expression]
    • ViewMode
    • 3D Object ID

3D Plane Projection from Tiled Sprite Behavior

Supported: position, angle, image offset

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

3D Box Projection from Tiled Sprite Behavior

Supported: position, angle, image offset

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

Linked 3D Camera Behavior

Supported: position, angle

  • [Expression]
    • Projection Scale
  • [String Expression]
    • ViewMode

Function

  • 3D Scene
    • [Action]
      • Create 3D Scene
      • Clear 3D Scene
      • Load 3D Texture
      • Load 3D Texture v2
      • 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
      • Move 3D Object
      • Rotate 3D Object
      • Rotate 3D Object On World
      • Remove 3D Object
      • Change 3D Texture
    • [Expression]
      • 3D Object Position
      • 3D Object Rotation
      • Distance From 3D Object To 3D Object
    • [Condition]
      • Check Existence Of 3D Object
  • 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
      • Raycast From 3D Camera
    • [Expression]
      • 3D Camera Position
      • 3D Camera Rotation
      • 3D Camera Angle (experimental)
      • Distance From 3D Camera To 3D Object
  • 3D Debug
    • [Action]
      • Create 3D Axes Helper
      • Output 3D Model Information To Console
      • Output All IDs To Console [NEW!]

πŸ’– Recommended 3D Software

πŸ‘Ύ Games created with this extension

Time Trial 3D

Liluo.io / Google Play

πŸ”— Three.js

Copyright 2010-2022 Three.js Authors
https://github.com/mrdoob/three.js/blob/dev/LICENSE

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

Download

Download NowName your own price

Click download now to get access to the following files:

WithThreeJS0.5.1.zip 174 kB
WithThreeJsExtensionExamples0.5.1.zip 1 MB
if you pay $5 USD or more

Development log

View all posts

Comments

Log in with itch.io to leave a comment.

I like your extension, but it look like the player just stay in ground.  Is it possible make the player to jump and go up/ go down to multiple floor??   thank you very much

(+1)

Yeah, change the z order of an object, its basically the y in top down movement.

(+1)

Thank you very much

I liked your extension, but i have a question.  How to make a camera not to permeate with box or with wall?

Hi Xgames studios,

Please refer to the video or example.
"Dungeon Example" and others may be useful to you.

is there even a kit? its not working these days...

What exactly is a kit?πŸ€”

(1 edit)

Hi! i loved your extension im even making a game on it! can i make videos on my channel about my games using your extension and putting your name in the video?

Hi think3,

Yes, you can do them.

Ty, it means a lot to me as a dev.

Hi, friend! I liked your extension! Could I use it in commercial products? I'll be very happy! maxSkg

Hi maxSkg,

This extension is MIT License so you can use it in commercial projects.

(-1)

Thank you for creating this, really amazing job... I have just little suggestion - it would be great to have possibility to change sprites animation according to their direction towards camera/player - like characters in old-school fps-games... I have tried to do it myself, it seems my coding skills are to weak for this...

(+2)

Hi maeli,

Please see this video.


Thank you! I followed this tutorial, it works great!

(1 edit)

Hi, thank you for this amazing extension that you are sharing with us! I was wondering if there was any ways to animate the texture of a 3D plane? I tried with Replace 3D Texture and a timer, but it's limiting itself to only one instance of the 3D plane.

Hi yakisoba88,

Use the "For each object" event.

(+3)

I created platformer 3D with this extension !


https://antoine-sertling.itch.io/test-platformer-3d-gdevelop-5

(1 edit) (+2)

I hope GDevelop's team buys this and turn it into an official feature :)

The extension is awesome but i have question, how turn the camera up and down when the 3D camera has been assigned to a sprite ?

(+1)

Hi Quertup,

The "Move 3D Camera" action has no effect when using behaviors. Change the Z-Order of sprites.

I know that but what I meant is how to do like the "Rotate Camera like Head" condition with the "sprite camera" behavior enabled ?

Perhaps you are saying you want to move the viewpoint up and down, not the camera?

(I think he simply wants that when the player clicks w the player looks up)

Yes, that's it. But with the "linked Camera" behavior enabled (I apologize if my English is not perfect πŸ˜…)

Could you add ammo.js things such as RigidBodies into the extension?

It may be added in the future, but is currently low priority.

What things are of higher priority for the extension?

Lighting =D (I hope ;P )

I hope too!

(+1)

Awesome extension πŸ˜€ I've been playing with the included examples and is looking very promising.

Is there any way to know when the OBJ model is fully loaded ?

Do you have any plans to add model animations ?

Hi tgeorgemihai,

The "Output 3D Model Information To Console" action may help you if you want to know the result of loading the OBJ file.

Adding model animation would require solving a number of issues, so it may be added in the future, but it is currently low priority.

This is what I made so far

(+1)

Awesome extension!

Deleted 24 days ago

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

Deleted 24 days ago
Deleted 24 days ago
Deleted 24 days ago

How did you do the button thing where the button opens the bars?

It uses "Raycast From 3D Camera" and Tween. See the "Dungeon Example" scene in the example for more details.πŸ˜‰

(+1)

This looks great so far. Are basic lights in the plan? ie. just light and dark, so that we can light some areas and not others? Movable lighting would add tremendously to this.

(+1)

Hi flipbuk,

It may be added in the future, but is currently low priority.

That would be great, your extension reminds me of the P3D extension for ClickTeam Fusion from a few years ago.

Even basic (per polygon?) lighting adds a lot to atmosphere, as below (not my examples), using P3D.

The effect seen in that video will be possible with the "fog" that will be implemented in a future upgrade.

Ah, interesting, I look forward to that, thankyou.

(1 edit)

I hacked in a basic fog setting directly into "Create 3D Scene" ... but no lighting! :'-(

Textures all taken from Ultima Underworld.

EPIC!!!

(+2)

ζ›΄ζ–°γ—γ¦γγ‚Œγ¦γ‚γ‚ŠγŒγ¨γ†

(+2)

this is without a doubt one of the most generous, comprehensive and frankly groundbreaking additions to the Gdevelop engine. If they aren't employing you they absolutely should be after this. This has completely changed the way I'm working! I can't thank you enough, when I get paid I will have to give you a huge tip. 

i agree

(+1)

so amazing

I want the next version.

Please sell!

(+1)

wow.. super

really appreciate the work dude πŸ‘

(+1)

Really great extension. Keep up your wonderful work! ;-)

How do you do collisions?

I have no plans to implement 3D collisions at this time. Please use GDevelop collisions.

All collisions that work in my videos are GDevelop collisions.

How do you do that?

It is difficult to explain all of them here. Please see the video or an example. πŸ˜‰
Or wait until the explanation page is ready. (Completion is still undecided)

How would you make a 3D platformer with this?

Please refer to the video or example.

3D extension for GDevelop. Version 0.2.1 is released.

I’m saying like full 3D movement

(1 edit)

I have yet to create a full 3D platformer. With "Move 3D Object" and "Raycast" it might be possible.

I would be glad if you could try to create one. πŸ˜‰

(+1)

When I use 3D Camera Look At 3D Object, how to get the contents of obj file? Thanks.

Hi wonghanz2007,

Are you successfully importing OBJs?
If not, please read "About importing OBJ files" on this page.

If you want to see how the OBJ was imported, "Output 3D Model Information To Console" will help. (Use WithThreeJS 0.3.0 or higher)

Hi Pandako, first of all thank you for this great extension. I have been playing around with it and it works great. Do you have any ideas on how to integrate the 3D coordinate system with that of the 2D GDevelop system? As in using 3D stuff in parts of your game and GDevelop 2D in other parts. Thanks!  

Deleted 49 days ago

Hi Robert1976,

3D scenes and GDevelop scenes are drawn separately and cannot be integrated. At the moment I do not have a good idea.

Therefore, I recommend to create a 3D object using the coordinates of a 2D object, as in this video, or to use the "3D Sprite Projection" behavior.

3D extension for GDevelop. Version 0.2.1 is released.

(1 edit)

Hello. What a nice work . Good job i really like that . What i need to use it in my game ? I need a special license or something? Also why you don't ask gdevelop and add it as an extension or you add it . This is gonna help improve the whole program..thx again and hope you will answer.

Hi SpiderX,

This extension is MIT License. Anyone can use this freely.

This extension is incomplete and is updated frequently.
Therefore, I have not submitted it to the GDevelop community extension.

da texture loader dont works on mi gdevelo

(-1)

Make sure the images you want to use are included in the resources. And use the Resource name.

(1 edit) (+2)

Really incredible work!!. Its great to have people like you in the community, bringing new possibilities to the platform and its users!

(+3)

Wow, That’s impressive!!!! Never thought i would see 3d in gdevelop.