Documentation Index
Fetch the complete documentation index at: https://docs.pinkfish.ai/llms.txt
Use this file to discover all available pages before exploring further.
What can you do with it?
Create interactive 3D applications using Babylon.js that fulfill specific objectives, generating complete HTML, CSS, and JavaScript for functional 3D scenes including environments, objects, animations, lighting, and camera controls for immersive web-based 3D experiences.
How to use it?
Basic Command Structure
/your-3d-app-connection [action] [required-parameters] [optional-parameters]
Parameters
Required:
action - The operation to perform (create-3d-app)
Optional:
app-description - Description of the 3D application to create
objects - Objects to include in the scene
animations - Animation requirements
lighting - Lighting setup preferences
camera-position - Initial camera position
environment - Environment and background settings
interactions - User interaction requirements
Create 3D App
Generate a complete 3D application using Babylon.js with specified requirements
Parameters:
app-description (required) - Description of the 3D application to create
objects (optional) - Objects to include (spheres, cubes, planes, custom meshes)
animations (optional) - Animation specifications (rotation, movement, scaling)
lighting (optional) - Lighting setup (hemispheric, point, directional, spot)
camera-position (optional) - Initial camera position and controls
environment (optional) - Environment settings (skybox, ground, fog)
interactions (optional) - User interaction capabilities (mouse, touch, keyboard)
Example:
/your-3d-app-connection
action: create-3d-app
app-description: Interactive 3D scene with animated sphere and particle effects
objects: sphere, ground plane
animations: sphere rotation and orbital movement
lighting: hemispheric and point light
camera-position: arc rotate camera at distance 10
environment: skybox with tropical theme and white ground
interactions: mouse rotation and zoom controls
Response:
{
"resultType": "app",
"result": "https://sandbox.example.com/3d-app-12345"
}
Generated HTML Application Features:
- Complete HTML document with Babylon.js CDN integration
- Responsive CSS styling for full-screen 3D canvas
- JavaScript using traditional browser-compatible syntax (no arrow functions, template literals, or const/let)
- Arc rotate camera with mouse/touch controls
- Hemispheric and point lighting setup
- Default environment with skybox and ground
- Animated objects with render loop
- Window resize handling
- Touch-friendly controls for mobile devices
Key Technical Specifications:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Babylon.js 3D Application</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script>
// Browser-compatible JavaScript implementation
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
function createScene() {
var scene = new BABYLON.Scene(engine);
// 3D scene implementation...
return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
window.addEventListener("resize", function() {
engine.resize();
});
</script>
</body>
</html>
Notes
3D App generation uses Babylon.js CDN for maximum compatibility. JavaScript code follows strict browser compatibility rules with no template literals, arrow functions, or const/let declarations. Applications are fully responsive and mobile-friendly with touch controls. Token limits restrict complexity, so complex scenes are automatically simplified. Generated apps include proper error handling and window resize support. The skill regenerates complete applications for any modifications rather than partial updates. All 3D coordinates and calculations use proper numeric values for accurate positioning.