---
title: "Create Web 3D experiences with Godot (it’s open source!)"
description: "If you’re thinking of making a 3D or 2D web-gamified experience or even games that run on various platforms, Godot is the way to go!"
canonical_url: "https://www.tarmac.io/resources/create-web-3d-experiences-with-godot-its-open-source/"
last_updated: "2026-10-07"
---

[Resources](https://www.tarmac.io/resources/) / Engineering

# Create Web 3D experiences with Godot (it’s open source!)

If you’re thinking of making a 3D or 2D web-gamified experience or even games that run on various platforms, Godot is the way to go!

Jay · December 18, 2024 Engineering

![Godot Game Engine banner: the robot logo surrounded by line icons for editing, rendering and shipping games](https://www.tarmac.io/_astro/img-1.HQdnLqog_ZsFe0u.webp)

If you’re thinking of making a 3D or 2D web-**gamified experience** or even [games](https://itch.io/games/platform-web/tag-godot) that run on various [platforms](https://docs.godotengine.org/en/stable/about/list_of_features.html#platforms), Godot is the way to go! It’s a free, open-source game engine, and chances are it’s got all the [features](https://godotengine.org/features/) you need, a great community, and it’s straightforward to use — not to mention it’s growing more and more each day.

## Why Godot

Godot’s combination of nodes and scripts makes it easy for beginners to create complex canvas-based applications such as drag-and-drop blocks-based [flow designers](https://www.reddit.com/r/godot/comments/ijx0cg/godot_meets_web_development/), for example, educational-purpose 2D and 3D games, games in general, or even gamified static pages like cool game portfolios. While you can quickly implement simple dynamic UIs, you can also create XR experiences.

All that with the great benefit of coding once and exporting to Web, Android, iOS, Windows, MacOS, Linux, or even consoles. Additionally, the client’s features like the scene tree editor, built-in script editor, scripting debugger, and [more](https://docs.godotengine.org/en/stable/about/list_of_features.html#editor), make it even greater!

## Getting started

To get started,[download](https://godotengine.org/) the client from their website, open the executable, and **Create** a new project in **Compatibility** renderer mode (so you can export it to the web). You can also always look for what you need on its great[documentation](https://docs.godotengine.org/en/stable/index.html).

![Godot “Create Project” screen.](https://www.tarmac.io/_astro/img-2.C-Zsgqtg_ZaAPxL.webp)

Its workflow consists of using the integrated IDE to create Scenes that contain specialized Nodes to do the things you need in the hierarchy. You’ll find many useful existing types of nodes, but you can even create your own. You can also attach GD Scripts (syntax based on Python) to the instantiated nodes to modify or add to their behavior (you can also use C#; just make sure you download the right client).

You are then presented with an empty Scene. Let’s create our first **3D Node**, which will be the root of our main Scene.

![Godot Client running an empty scene.](https://www.tarmac.io/_astro/img-3.C7zEwFQJ_xfRjj.webp)

## Adding things to our Scene

Under this same **Scene tab**, you’ll find the **Add** (“+”) button showing a vast list of types of Nodes can select to instantiate. Use it to add a **Camera3D** node to our Scene, and then add a **WorldEnvironment** node as a child of our Scene so we can make sure our Camera works.

With our WorldEnvironment selected, you’ll find its properties under the **Inspector tab** to your right. Use it to add a **New Environment** to the “Environment” **property**.

![Properties of a selected Node (WorldEnvironment).](https://www.tarmac.io/_astro/img-4.BWIc-0uu_Z1JuYfm.webp)

Then, under the “Background” section, set the “Mode” property to **Sky**, and under the “Sky” section, create a **New Sky**. Our “Sky Material” will be a **New ProceduralSkyMaterial**.

After that, we can run a debug version of our Scene by clicking the “Play” button at the top right corner of the screen.

Note that this will bring up a pop-up to select our project’s main scene. We can use that to save our current scene and select it as the main one.

![WorldEnvironment properties are set to run the scene.](https://www.tarmac.io/_astro/img-5.CuUyUvsm_Z1946n6.webp)

And this is the result! That is what our Camera sees:

![Running debug scene showing the Camera view.](https://www.tarmac.io/_astro/img-6.pu_eoqLG_Z1sGxnY.webp)

## Exporting for Web

The next step is to export the Web executable. To do this, go to **Project -> Export…** and click on the **Add Preset** button. Select the **Web** preset. For more information, refer to the [Exporting for Web](https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html) part of the documentation.

![Godot Export dialog with the Add Preset menu open and the Web preset highlighted in red](https://www.tarmac.io/_astro/img-7.CNEFF8t-_1zzc3D.webp)

You will get a “No export template found at expected path” warning, which is easily fixed by clicking on **Manage Export Templates** and then on the **Download and Install** button on the pop-up.

![Manage Export Templates pop-up allow](https://www.tarmac.io/_astro/img-8.poPmqY0o_1mFoWW.webp)

After that, you can close the pop-up, go to the Export path again, and click on the **Export Project…** button. This pop-up will appear:

![Exporting HTML debug executable.](https://www.tarmac.io/_astro/img-9.BU0Ux5gC_Z2vAj7g.webp)

You can then **Save** it and serve the files on any server. For testing, you can run a simple server using Godot’s Python [serve script](https://raw.githubusercontent.com/godotengine/godot/master/platform/web/serve.py) (as per [Exporting for the Web docs](https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html#serving-the-files)). Save the _serve.py_ script file and run it like this inside the exported files directory:

_\# You may need to replace `python` with `python3` on some platforms._

python serve.py — root .

This will serve all the exported files, you can then select the **index.html** file to view it.

![The exported Godot scene running in a browser at 127.0.0.1:8060, showing the sky and ground horizon](https://www.tarmac.io/_astro/img-10.Dl8w88b__Z16S8Az.webp)

You can download this final example[here](https://drive.google.com/file/d/1qIHHFtMGJmoXJ9FEHaOvNG11meonkDE5/view?usp=drive_link), including the exported files.

## Conclusion

This brief article shows you a little about the capacity of Godot and how it’s able to create simple 2D and 3D applications or even complex ones (with XR and all) that can be exported to multiple platforms at once. Its great community and documentation will help you move forward and allow you to be creative with your canvas-based app for the Web or any other native solutions you’re looking for.

This article is meant to give you a simple template to check how web export works on Godot, but if you want to go further, like for example, adding Input support or adding objects to your scene, here are some recommendations for a follow-up reading you can refer to:

[Godot Docs](https://docs.godotengine.org/en/stable/index.html), including:

-   [Your first 3D game](https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html)
    
-   [Exporting for the Web](https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html)
    
-   [Godot Engine on Github](https://github.com/godotengine/godot)
    

Other references:

-   [Web games made with Godot](https://itch.io/games/platform-web/tag-godot)
    
-   [Godot supported platforms](https://docs.godotengine.org/en/stable/about/list_of_features.html#platforms)
    
-   [Godot Features](https://godotengine.org/features/)
    

Keep reading

## More on Engineering

[

### C4 diagrams your AI agents can actually read

Confluence PNGs are invisible to your coding agents. C4, ERD, and sequence diagrams belong in the repo as Mermaid text, not a picture nobody updates.

August 25, 2026](https://www.tarmac.io/resources/c4-diagrams-for-ai-agents/)[

### A definition of done for humans and agents

Works on my machine is not a definition of done. A field guide to the checks that make done mean done, for human pull requests and AI agents alike.

July 30, 2026](https://www.tarmac.io/resources/definition-of-done-humans-and-agents/)[

### Go, Rust, or Python: picking a backend at scale

When success at scale strains Python, the fix is rarely a rewrite. How to choose Go, Rust, or Zig for the one service that needs it.

July 27, 2026](https://www.tarmac.io/resources/go-rust-python-backend-at-scale/)

## Let’s build something worth taking off.

Tell us what you’re building. We’ll assemble the senior team to ship it.

[Let’s team up→](https://www.tarmac.io/contact/?source=resources-create-web-3d-experiences-with-godot-its-open-source)

## Sitemap

See the full [sitemap](https://www.tarmac.io/sitemap.md) for all pages on tarmac.io.