website·Indexed 30 days ago
https://make-it-3d.vercel.appA Construct 3 plugin that integrates Three.js capabilities and the Rapier Physics engine into game projects. It provides a set of Actions, Conditions, and Expressions (ACE) for managing 3D elements, lighting, and materials, alongside a Context API for JavaScript scripting to handle dynamic bodies, forces, and spatial queries.
MakeIt3D is a Construct 3 plugin that integrates the Three.js library to enable 3D graphics within the Construct 3 environment.
Critical Technical Constraint: MakeIt3D uses a separate Three.js rendering system that overlays the Construct 3 canvas. Because it is a standalone rendering solution, 3D objects do not integrate with Construct's native layout system, sprite behaviors, or collision detection. It is controlled via events rather than the standard 2D object system.
The Rapier plugin provides a set of Actions, Conditions, and Expressions (ACE) for Construct 3 Event Sheets to manage 3D physics and rendering. Key capabilities include:
// Object IDs
MakeIt3D.SelfObjectId // ID of the object checking for collision
MakeIt3D.OtherObjectId // ID of the other object involved in collision
// Impact and Contact
MakeIt3D.TotalImpulse // Total impulse applied (number)
MakeIt3D.HasActiveContact // True if at least one active contact point exists (boolean)
MakeIt3D.ContactPointsCount // Number of contact points in most recent collision
// Detailed Data (JSON strings)
MakeIt3D.ContactNormalsJson // Compact JSON of all contact normal vectors
MakeIt3D.ContactPointsJson // Compact JSON of positions, impulses, distances
MakeIt3D.CollisionDataJson // Full collision data (normals, points, impulses)
MakeIt3D.CollisionDataBeautified // Human-readable JSON for debuggingThe MakeIt3D API provides a set of Actions, Conditions, and Expressions (ACE) for Construct 3 Event Sheets to handle the following 3D tasks:
Load Scene From JSON action allows you to load a scene previously saved by the three.js editor. You can specify the JSON path and choose whether to use the camera defined within the JSON file.// Example: Load scene from a specific JSON path
MakeIt3D.CreateScene(0, 'path/to/scene.json', false, false, true, true, true)// Key Light (main light source)
MakeIt3D.CreateDirectionalLight("keyLight", "#FFFFFF", 1.2)
MakeIt3D.SetLightPosition("keyLight", 5, 5, 5)
// Fill Light (softer, fills shadows)
MakeIt3D.CreateDirectionalLight("fillLight", "#87CEEB", 0.6)
MakeIt3D.SetLightPosition("fillLight", -3, 2, 3)
// Rim Light (separates object from background)
MakeIt3D.CreateDirectionalLight("rimLight", "#FFE4B5", 0.8)
MakeIt3D.SetLightPosition("rimLight", 0, -2, -5)eventQueue. Use drainCollisionEvents within a frame-based tick function to process collisions. This method provides the handles of the two colliders involved and a boolean indicating if the collision started or ended. To map these handles back to object IDs, iterate through the objects registry.const { world, eventQueue, objects } = window.MakeIt3DContext.rapierContext;
function processCollisionEvents() {
eventQueue.drainCollisionEvents((handle1, handle2, started) => {
if (started) {
// Map handles to object IDs
let objectId1 = null, objectId2 = null;
for (const [id, objectData] of objects.entries()) {
if (objectData.collider && objectData.collider.handle === handle1) objectId1 = id;
if (objectData.collider && objectData.collider.handle === handle2) objectId2 = id;
}
console.log("Collision started between:", objectId1, objectId2);
}
});
}
function onTick(runtime) {
processCollisionEvents();
}