Construct 3 3DObject Plugin
This plugin loads a 3D Model into Construct 3, similar to the new built-in 3DShape plugin, but the 3D object can be a more complicated 3D model, loaded from a 3D model file format and texture. It also supports 3D animations.
It only supports gltf embedded and glb formats (preferably with an embedded texture in the file, a separate texture png file can also be supported.)
Please leave feedback or tag @kindeyegames on X or Mikal in the Construct Community Discord.
Known issues
- The bounding box may not fully track the model with rotations.
3D Model file requirements:
It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- Must be gltf/glb embedded formatand embedded texture (png, jpg formats are ok)
- The texture can be embedded in the gltf/glb or supplied as an image in the c3 editor, but the gltf/glb file must have a material referring to a texture if it's not using a solid color.
- Do not include other non diffuse textures (e.g. normal map, bump map, etc.) in the gltf/glb embedded files if possible, they are not used, but would still take up memory.
- It's highly recommended to set 3DObject projects to 'regular' z-axis settings.
- Be aware of the 0,0,0 origin relative to the model center (affects rotation center and position.) This can be changed as needed with the Set local center ACE.
- Be aware of the relative scale of the model in model units. This can be scaled up/down with the Set scale ACE or property and xScale, yScale, zScale (note that these are divisors, to match C3 zScale property.)
- 3D models are available on CGTrader and Turbosquid, but you may need to find the ones that have gltf and texture support. If there are multiple textures, usually look for the ones labeled diffuse or albedo. These will be the base color textures (e.g. not normal maps, bump maps, etc.) You can only use models that have one diffuse/albedo texture or multiple textures. (If you have expertise with blender you can load a model with multiple textures and then bake them to a single texture and export texture in the gltf embedded/glb file.)
- If a model you use is not available in gltf file format, try loading the model into blender and exporting with thegltf embedded orglbfile format.
- Merge multiple animations into a single file gltf/glb file.
- If you are importing fbx to blender consider using plug-in to improve fbx import to blender: https://blendermarket.com/products/better-fbx-importer--exporter
Debugging 3D models
- Load gltf/glb model into: https://sandbox.babylonjs.com/
- Does it render correctly, have texture, animate correctly
- Check textures, material, animations
- Check scale
- Load model in https://gltf.report/ - check for errors / validation
- Check the 0,0,0 origin point of your model in a 3D modeling program (e.g. Blender), center your model as needed.
Performance notes
- Use just a few low polygon models (in the low thousand range, if you have a lot of models, move to the low hundreds range)
- Animating models require additional performance
- You can control the animation rate to reduce the required CPU performance.
- Bake down to a single texture (using 3D modeling tool like blender)
- Use solid color models without texture (will save texture memory).
- Use a smaller texture map to save GPU memory (2k x 2k texture takes up 16MB, 512x512 is 1MB)
- If you are baking texture in blender, consider also baking in AO (on model only), this can give more depth to the model. AO Tutorial
Some more (From @meta comments on CC Discord)
- Do fake shadows with just sprite
- I you want shadow and light formations in your 3D model texture, you need to texture bake with combine bake type.
- At the same time reduce the number of triangles of the models by editing the meshes and investigate this bake type as high poly to low poly bake.
- You will see more things. The result you need to achieve at the end of the day is to achieve a 30k poly effect with low poly models with wonderful baked textures reduced from 30k tri to 1k tri.
- I suggest you to design your whole scene in blender beforehand and do the lighting there and bake it, and I suggest you to use only 1 material for each 3D model.
- Also generally use 256x256 for texture sizes, 512x512 is ideal for things I care about detail
- See WoW examples for great baking of texture with low poly geometry
Basic usage:
- Use project setting z axis scale 'regular'
- This sets the z axis scale to the same scale as x and y, which is better for 3D development (and you also can control the project FOV.)
- Add a 3DObject to the project
- Add gltf embedded file or glb file to the project (preferred to include texture in the embedded gltf/glb file)
- If you are using a gltf/glb with an embedded texture (preferred) set the image editor to a solid color, otherwise:
- Open 3DObject image editor loads the texture file into the image. Note image size must be larger than the Project's setting for spritesheet size (e.g. 512-4096), resize the image larger if needed in the image editor.
- Test! You can use the normal position ACEs to move in x,y direction and position related behaviors should work (though I tend to lock the 3DObject with other sprites w/ behaviors using events)
- To change z position, use the setZ elevation ACE (other behaviors or actions which affect zElevation should also work, e.g. sine behavior, drag and drop, etc.)
- Set the zHeight to match the relative zHeight of the object (used for C3 3D viewport clipping.)
- Please post feedback and pix/vid of your tests.
Advanced uses: read the dev logs and look at their associated examples.
Future state if this goes well:
- *DONE* Support multiple instances of one 3DObject
- *DONE* More animation ACEs (end of animation trigger, etc.)
- *DONE* Add expression for current animation time or frame.
- *DONE* Blend between animation changes
- *DONE* Support multiple textures
- *DONE* Support solid color
- *DONE* Runtime load model (single load allowed)
- *DONE* Load different model for different instances of the same object (single load allowed, allocates memory on CPU and GPU for each instance.)
- *DONE* Dynamic change of a mesh's material (e.g. change a mesh's texture)
- *DONE* Support correct rotation (for mixed multiple node types)
- *DONE* Improve bounding box and z-height regions for rotated models to prevent early clipping.
- *DONE* ACEs for setting animation blend time.
- *DONE* Enable 3D flat lighting in worker animation mode.
- *DONE* Morph targets
- *DONE* Review SS3D Light, changing texture color w/ white lights.
- *DONE* Add vertex snapping (int vertex values) retro mode
- *DONE* Can other parameters (angle x,y,z, etc. be added to timeline)
- *DONE* Enable lighting baking / update lighting in worker animation mode.
- *DONE* Add flashlight example
- Add ACE to preload 3d models at startup w/o draw.
- Review worker animation mode causing issues on ios also with audio and possible crashes
- QoL:
- AnimationTimeLength
- AnimationFrameLength
- Reload model in editor if gltf path changes
- *DONE* On animation <name> finished
- *DONE* CurrentAnimationSpeed
- Add worker mode support for lighting
Big thanks to r0j0hound on the Construct forums for sharing the gltf parsing and animation code which I used as a base for the gltf integration in this plug-in.
Fire elemental model credit: https://sketchfab.com/3d-models/fire-elemental-05fe96ef7fca472ba0bf753686216002
Again, please leave feedback or tag @kindeyegames on Twitter.
A great video from @FozzleCC describing details of how to use 3D models with the plug-in. If this video is useful for you, please support FozzleCC on his Patreon: https://bit.ly/PatreonFoozleCC
Note one change since this video was produced, it is now recommended to embed textures in the gltf / glb files and 3DObject will use them directly from the file, there is no need to load them into the 'image' of the 3DObject. The image can be left blank or filled with a solid color for easier identification in the event sheet.
If you want to go directly to specific subjects in the video, please see the timecode links below:
0:00 - Intro
2:31 - 3DObject Plugin Overview
6:48 - What is GLTF?
7:40 - Blender Intro
8:53 - Where to get 3D Models?
9:59 - Extracting Unity Asset Store Assets
15:21 - Sketchfab and Blender Reference
16:46 - Merging Multiple FBX Animations in Blender
22:35 - Associating texture to model in Blender
24:33 - Export GLTF from Blender
25:29 - Import GLTF into Construct 3
28:43 - Bake Multiple Textures to One in Blender
34:41 - Setting up Lighting for Baking in Blender
40:56 - Importing Baked Texture Model into C3
42:43 - Getting Free Animations from Mixamo.com
43:23 - GTLF Viewer & Debug
45:27 - Tips on Using GLTF Models & Performance
47:04 - Improve Performance with Blender Decimate
| Status | Released |
| Category | Assets |
| Rating | Rated 5.0 out of 5 stars (23 total ratings) |
| Author | kindeyegames |
| Made with | Construct |
| Tags | 3D,construct,construct-3 |
Download
Click download now to get access to the following files:
Development log
- fix (perf) target to, improve perf - do not force animation
- fix (file) corrupted file upload
- Feat (rotation) add target to ACE (rotate to face target)
- Feat (bones) update to support for 64 bones
- 3DObject showcase: Syder Studios
- Add 3D Effects affine texture support (PS1 retro)
- fix (addon) fix corrupted addon
- fix (accessors) add support for sparse accessors in gltf
Comments
Log in with itch.io to leave a comment.
This add-on will not be ported to SDK V2 (but an LTS version of C3 that is compatible with it will be available for use for quite a while).
I am working on a new, similar addon with more capabilities, which is working with SDK V2 now. I will announce here when it is ready (it will take a bit to get to the same feature set, but it already supports PBR texture and normal maps.)
Yes, transparency/alpha in 3D, in general, is always a challenge. The better results for simple renderers like C3 are to render in order as much as possible.
Check that the render order is the distance from the camera and all layers are 3D.
If your 'world' is one big GLB/GLTF model, it will be hard to sort properly (near and far meshes will all be part of one model.)
An alternate option is the 'screendoor transparency' in the 3D effect, which has a particular 'look' but will make the rendering support out-of-order rendering better.
DAN
Hello,
Watching FoozleCC, he shows sample code to copy and use. I have no idea where this code is – which sample is he showing/using?
https://www.youtube.com/watch?v=p02bz6jax8Y&t=1105s
Construct 3 r416.2 stable
Installed addons: Frag Light 2.8.0, SSAO 1.6, 3DObject, Rotate 3D
Preview 3DObjectFragLight - Scene is completely black.
F12 – I now see I have an error:
main.js:98 Uncaught TypeError: Cannot set properties of undefined (setting 'GetDefaultVertexShaderSource') at main.js:98:57
(anonymous) @ main.js:98Understand this errorAI
c3runtime.js:280 Uncaught (in promise) Error: Error compiling fragment shader: ERROR: 0:11: 'pos' : redefinition
at C3.Gfx.WebGLShaderProgram.Compile (c3runtime.js:280:1243)
at async C3.Gfx.WebGLShaderProgram.Create (c3runtime.js:280:1904)
at async C3.Gfx.WebGLRenderer.CreateShaderProgram (c3runtime.js:460:9318)
at async Promise.all (3DObjectFragLight-8/index 1)
at async C3.CanvasManager._InitWebGL (c3runtime.js:1190:6728)
at async C3.CanvasManager._InitRenderer (c3runtime.js:1190:7050)
at async C3.CanvasManager.CreateCanvas (c3runtime.js:1190:4819)
at async C3.Runtime._InitialiseCanvas (c3runtime.js:1195:18300)
at async C3.Runtime.Init (c3runtime.js:1195:10955)
at async Q._InitDOM (main.js:26:12442)
Same error after publishing and running in chrome using IIS.
3DObjectVertexColor –
Project exported – running in Chrome.. Scene is completely black.
Error log:
main.js:99 Uncaught TypeError: Cannot set properties of undefined (setting 'GetDefaultVertexShaderSource') at main.js:99:57Understand this errorAI
c3runtime.js:280 Uncaught (in promise) Error: Error compiling fragment shader: ERROR: 0:11: 'pos' : redefinition
ERROR: 0:12: 'vColor' : redefinition
at C3.Gfx.WebGLShaderProgram.Compile (c3runtime.js:280:1243)
at async C3.Gfx.WebGLShaderProgram.Create (c3runtime.js:280:1904)
at async C3.Gfx.WebGLRenderer.CreateShaderProgram (c3runtime.js:460:9318)
at async Promise.all (3DObjectVertexColor/index 0)
at async C3.CanvasManager._InitWebGL (c3runtime.js:1190:6728)
at async C3.CanvasManager._InitRenderer (c3runtime.js:1190:7050)
at async C3.CanvasManager.CreateCanvas (c3runtime.js:1190:4819)
at async C3.Runtime._InitialiseCanvas (c3runtime.js:1195:18300)
at async C3.Runtime.Init (c3runtime.js:1195:10955)
at async Q._InitDOM (main.js:26:12442)
Hello, thank you for this great plugin, I have a doubt, when I import a 3d object with the texture embeded appears compresed in game.
If I search the texture manually in construct 3 it shows ok.
The problem is I can´t search the texture for a mesh with multiples materials, also if I set a mesh as "static" with the texture checkbox marked, the texture appears corrupted.
Any idea how to resolve it? Thank you so much
Hi, there! First of all, congratulations and thank you for developing this much needed plugin!
I am creating a 2.5D platformer, but, after implementing some basic functionality to make the camera follow the player, I noticed that the objects on the left or right border of the screen pop in instead of just being there. Any idea of how I can prevent that and make sure that objects within the camera view are always visible?
I've attached a gif to illustrate the issue. The issue is noticeable if you look at the floor close to the horizontal border the player moves toward.
Yes, I used the bounding box scale ACE. Here is a screenshot of a model at the right border, with its bounding box scale set to 2x:
I've noticed that this behavior during runtime is very similar to what happens to 3D models in the layout editor. Here is a gif to illustrate what I mean (I'm scrolling the layout manually with the mouse):
I don't know if seeing the same symptom happening in the layout editor might give us any clue, but I thought I should include this. Perhaps this is caused by some project setting?
secondary nodes seem to light weird. notice that when I export just one node (the sprockets here) they light fine on their own. any idea? (the turret is it's own object so is unrelated to the body) It must be related to my object as testing with the clerk model from your examples is fine. But I don't what property of my object could be influenced by the other nodes
Try the latest version uploaded.
https://kindeyegames.itch.io/c3-3dobject-alpha/devlog/828933/fix-addon-fix-corru...
Apologies if the addon was corrupted for you; use safe mode to uninstall the addon:
https://www.construct.net/en/make-games/manuals/addon-sdk/guide/safe-mode
I am getting an error and I am not sure what it means.
When I set the object source in C3 I get "error: gltf, unhandled bufferView, try exporting gltf without using sparse accessors"
The model loads fine on the tester sites. the error it gives me is "
0
UNUSED_OBJECT
This object may be unused.
2
/meshes/0/primitives/0/attributes/TEXCOORD_0
" But I Don't know what that means.
I uploaded the file I am testing if you wanted to look at it.
https://drive.google.com/file/d/1JPLh9YELbWTffP7mHefZT7v2FmyJtujR/view?usp=shari...
Try this with the original file:
https://kindeyegames.itch.io/c3-3dobject-alpha/devlog/828684/fix-accessors-add-s...
Ok, I looked and the ACE is already there. Use Enable Quaternion and Set Quatrenion.
Set quaternion uses this format: "[x,y,z,w]", where x,y,z,w are the values of the quaternion.
You can use JS to create the quaternion using the globatThis.glMatrix libraries, they are documented here:
You could try:
setAxisAngle(out, axis, rad)
https://glmatrix.net/docs/module-quat.html
Hi, thanks for your reply, here is a test .....
https://drive.google.com/file/d/1Z3WFFDmTIyCTQur6u1Bz4tMStKRL2iF4/view?usp=drive...
original question....
I have tried every way to alter rotation but can't achieve this. please help.
It just picks a point in the mesh defined by the number and position of the point in the mesh list of points.
If you want to be more specific create a very small box and attach it to the model where you want the node to be, so that any of the points will be close to the location desired.
Also be aware that this may not work in gpu skinning. Instead use static geometry setting when this is needed.
Hi kindeyegames,
I'm working on a simulation game about a children's playground, but it will take a while (only 30% of the progress is done at the moment).
Due to the fact that there are a lot of 3D models used (about 30 different models), the performance will need to be optimized again later on (the image only show 1/5 of the game as it is still being designed).
I'll share it with you later if it's done.
Thank you very much for the addon, it makes it easier to make 3D games!
, is that possible?
Hello, can you show me using a small example in Construct 3 engine, how to display 3D models and animations for all players using the Photon Engine multiplayer plugin.
tried different options. And for the first person who entered the room, his 3D avatar is displayed, but for all subsequent ones, it is not displayed, as well as the animations that are triggered.
Hey kindeyegames, I'm not sure if you saw my reply to your request of a project file containing the bugs I had reported previously. Since the response was pretty deep in the thread, you may have missed it, but I did manage to put together a demo for you showcasing the issues I mentioned back then.
Here's the link to the demo just in case you didn't see it:
https://creativeed.itch.io/construct-3-3d-object-rotate-3d-bugs
Hi kindeyegames,
I'd like to follow up on the progress of fixing this bug, as I've noticed that it keeps causing some strange issues.
Currently it has come up again:
if the 3DObject is set to Static, when loading a material from sprite, some sizes of the sprite canvas (eg: 256x256) will causes the material to render incorrectly.
This can only be solved by disabling the project's "Max spritesheet size". This may be the same bug causing the problem.
Please check the screenshot below, and the new .c3p file.
Demo file:
