Skip to content

Commit 6dc7128

Browse files
authored
Completely rewrote 3D Rendering to be a LOT more detailed
1 parent 64180c9 commit 6dc7128

1 file changed

Lines changed: 157 additions & 10 deletions

File tree

Lines changed: 157 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
---
2+
author: OfficialCB
23
desc: This page explains how to use 3D rendering in your mod!
3-
lastUpdated: 2025-09-08T20:53:00.000Z
4+
lastUpdated: 2026-03-03T20:36:15.789Z
45
title: 3D rendering
56
---
67
# 3D rendering
78

89
In Codename Engine, there is Away3D integration with a few tools to make the process easier for you.
910

10-
Here's a simple way to add a Cube primitive into your scene.
11-
Just take this method and apply it to a stage or something, and you'll get your cube. Though you'll need to do more work to get the cameras and their perspectives to line up correctly. a sugge
11+
If you want to read up on Away3D and how it works, I recommend looking at it's [Github Repository](https://github.com/openfl/away3d) or looking at the [Documentation](http://away3d.com/documentation/).
12+
13+
## Working with primitives
14+
15+
Primitives are built-in meshes that are simple in nature.
16+
Examples of primitives are Cubes, Planes, or Spheres.
17+
18+
Here's an example of adding a Cube Primitive to your scene.
1219
```haxe
1320
import flx3d.Flx3DView;
1421
@@ -17,29 +24,169 @@ import away3d.primitives.CubeGeometry;
1724
1825
function create() {
1926
cube = new Mesh(new CubeGeometry()); // This is your Cube
20-
cube.z -= 200; // Move it back a bit so you can see it on the camera
27+
28+
cube.scale(2); // Make it double the size, just to see it better
29+
2130
cube.rotationY = 23; // Add some rotation so you can see it's 3D
2231
cube.rotationX = 45;
2332
2433
scene3D = new Flx3DView(0, 0, FlxG.width, FlxG.height); // This is what's creating the 3D world
2534
scene3D.screenCenter();
26-
scene3D.addChild(cube);
35+
36+
scene3D.addChild(cube); // This adds the cube to the scene
2737
2838
add(scene3D); // The 3D View works just like any other sprite so it will have to be added like one
2939
}
3040
```
3141

32-
## Temporary information (clean up later)
42+
If you wanna add a texture to this primitive, you'll need to create a `TextureMaterial`.
43+
Here's the same code as before, but we add a `TextureMaterial` to the cube.
44+
```haxe
45+
import flx3d.Flx3DView;
46+
47+
import away3d.entities.Mesh;
48+
import away3d.primitives.CubeGeometry;
49+
50+
import away3d.utils.Cast;
51+
import away3d.materials.TextureMaterial;
52+
53+
function create() {
54+
cube = new Mesh(new CubeGeometry()); // This is your Cube
55+
56+
cube.material = new TextureMaterial(
57+
Cast.bitmapTexture(
58+
Assets.getBitmapData(Paths.image("path/to/texture"))
59+
),
60+
true, // This is "smooth" or "antialiasing" for the texture, setting this to false will make it pixelated
61+
false, // This is "repeat" and it's useful if you want your texture to tile over a large area, to make it tile, set it to true
62+
true // This is "mipmap" which pretty much makes your texture become less detailed the further away it is
63+
);
64+
65+
cube.scale(2); // Make it double the size, just to see it better
3366
34-
From now on, assume that `scene3D` is set up like this
67+
cube.rotationY = 23; // Add some rotation so you can see it's 3D
68+
cube.rotationX = 45;
69+
70+
scene3D = new Flx3DView(0, 0, FlxG.width, FlxG.height); // This is what's creating the 3D world
71+
scene3D.screenCenter();
72+
73+
scene3D.addChild(cube); // This adds the cube to the scene
74+
75+
add(scene3D); // The 3D View works just like any other sprite so it will have to be added like one
76+
}
77+
```
78+
79+
## Working with models
80+
81+
From now on, assume that `scene3D` is set up like this as I will not be writing out the entire script anymore.
3582
```haxe
3683
scene3D = new Flx3DView(0, 0, FlxG.width, FlxG.height);
3784
```
3885

39-
Here's just a few function I found that I think would be useful to know about
86+
Adding models is greatly simplified in Codename Engine compared to using Away3D normally.
87+
To add a model simply do the following.
88+
```haxe
89+
scene3D.addModel(
90+
Paths.obj("path/to/model"), // This is where it grabs the model from, I will go into more detail about this below
91+
92+
function (model) {
93+
// This runs for every single asset inside of your model, including mesh, potential animators, and whatever else you could have going on
94+
95+
// If you want to manipulate your model in any way, do it in here
96+
},
97+
98+
Paths.image("path/to/texture"), // This is the texture of your model
99+
100+
true // This is "smoothTexture" which determines if your texture will be filtered or if it should be pixelated
101+
);
102+
```
103+
104+
You can also set a variable to be your mesh this way.
105+
```haxe
106+
var coolModel;
107+
108+
scene3D.addModel(
109+
Paths.obj("path/to/model"),
110+
111+
function (model) {
112+
// This runs for every single asset inside of your model, including mesh, potential animators, and whatever else you could have going on
113+
114+
if (Std.string(model.asset.assetType) == 'mesh') { // This is needed to specify that we're specifically interacting with the Mesh of the object instead of interacting with any animations or skeletons on accident
115+
coolModel = model.asset;
116+
}
117+
},
118+
119+
Paths.image("path/to/texture"),
120+
121+
true
122+
);
123+
```
124+
125+
In the examples above, I used `Paths.obj()` to grab the model, however, there are more model types that are supported, some of which have more features.
126+
127+
The list of supported formats are these:
128+
- `obj`
129+
- `dae`
130+
- `md2`
131+
- `md5`
132+
- `awd`
133+
134+
The `AWD` format is specific to Away3D's Away Builder.
135+
Away Builder is a program designed to simplify a lot of complex work with importing models and animations into your project.
136+
However, since Away Builder is so old, it is now mainly depricated and doesn't really work with most modern software.
137+
Instead, you are often required to use the `md5mesh` and `md5anim` formats, which do not exist in most programs today.
138+
There are however workarounds, as older versions of Blender have [addons](https://github.com/KozGit/Blender-2.8-MD5-import-export-addon) to let you export to these formats.
139+
140+
141+
I will not go through how to use Away Builder here as it is not specific to Codename Engine.
142+
143+
The `AWD` format is useful as it allows you to package models, animations, and more into one asset which all get loaded together automatically.
40144

145+
***TODO: Go into more detail about the pros and cons of each formats listed above***
146+
147+
## Animating your models
148+
149+
To animate your models, I recommend using the `AWD` format alongside Away Builder since it simplifies the process of setting up the animators.
150+
151+
However, some precautions about Away3D.
152+
It's animation is quite limited and doesn't allow for animations changing size or position, only rotation is available.
153+
154+
Once you have your model and animations exported from Away Builder, you'll want to set it up something like this:
41155
```haxe
42-
scene3D.addModel(assetPath:String, callback:Asset3DEvent->Void, ?texturePath:String, smoothTexture:Bool = true);
156+
var coolModel;
157+
158+
var coolAnimator;
159+
160+
scene3D.addModel(
161+
Paths.obj("path/to/model"),
162+
163+
function (model) {
164+
// This runs for every single asset inside of your model, including mesh, potential animators, and whatever else you could have going on
165+
166+
if (Std.string(model.asset.assetType) == 'mesh') { // This is so we only interact with the Mesh
167+
coolModel = model.asset;
168+
}
43169
44-
scene3D.addChild(childObject);
170+
if (Std.string(model.asset.assetType) == 'animator') { // To only interact with the Animator
171+
coolAnimator = model.asset;
172+
173+
animatorLoaded();
174+
175+
// FYI, you can play the animation directly in here if you want, I just keep them separate for demonstration purposes
176+
// model.asset.play("animationName");
177+
}
178+
},
179+
180+
Paths.image("path/to/texture"),
181+
182+
true
183+
);
184+
185+
function animatorLoaded() {
186+
coolAnimator.play("animationName");
187+
}
45188
```
189+
190+
Once you have your animator, you can simply call it's `play("animName")` function whenever you wanna play an animation.
191+
192+
## TODO: Add info about lighting and other stuff

0 commit comments

Comments
 (0)