+
Loading workspace data...
+
Loading...
+
+
+
+```
+
+**`app.js` (Three.js module skeleton):**
+```javascript
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+// --- Scene setup ---
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x0f0f1a);
+scene.fog = new THREE.Fog(0x0f0f1a, 50, 200);
+
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 5, 10);
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.0;
+document.body.appendChild(renderer.domElement);
+
+// --- Controls ---
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.05;
+controls.maxPolarAngle = Math.PI / 2;
+
+// --- Lighting ---
+const ambientLight = new THREE.AmbientLight(0x404060, 0.5);
+scene.add(ambientLight);
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
+directionalLight.position.set(10, 20, 10);
+directionalLight.castShadow = true;
+directionalLight.shadow.mapSize.set(2048, 2048);
+directionalLight.shadow.camera.near = 0.5;
+directionalLight.shadow.camera.far = 100;
+directionalLight.shadow.camera.left = -30;
+directionalLight.shadow.camera.right = 30;
+directionalLight.shadow.camera.top = 30;
+directionalLight.shadow.camera.bottom = -30;
+scene.add(directionalLight);
+
+// --- Ground ---
+const groundGeo = new THREE.PlaneGeometry(200, 200);
+const groundMat = new THREE.MeshStandardMaterial({ color: 0x1a1a2e, roughness: 0.8 });
+const ground = new THREE.Mesh(groundGeo, groundMat);
+ground.rotation.x = -Math.PI / 2;
+ground.receiveShadow = true;
+scene.add(ground);
+
+// --- Objects ---
+const geometry = new THREE.BoxGeometry(2, 2, 2);
+const material = new THREE.MeshStandardMaterial({
+ color: 0x6366f1,
+ roughness: 0.3,
+ metalness: 0.5,
+});
+const cube = new THREE.Mesh(geometry, material);
+cube.position.y = 1;
+cube.castShadow = true;
+scene.add(cube);
+
+// --- Theme ---
+if (window.dench) {
+ window.dench.app.getTheme().then(theme => {
+ if (theme === 'light') {
+ scene.background = new THREE.Color(0xf0f0f5);
+ scene.fog = new THREE.Fog(0xf0f0f5, 50, 200);
+ groundMat.color.set(0xe8e8f0);
+ }
+ }).catch(() => {});
+}
+
+// --- Hide loading screen ---
+document.getElementById('loading')?.classList.add('hidden');
+
+// --- Animation loop ---
+const clock = new THREE.Clock();
+
+function animate() {
+ requestAnimationFrame(animate);
+ const dt = clock.getDelta();
+ const elapsed = clock.getElapsedTime();
+
+ cube.rotation.y = elapsed * 0.5;
+ cube.position.y = 1 + Math.sin(elapsed) * 0.5;
+
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+// --- Resize ---
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
+```
+
+### Three.js Common Addons
+
+Load additional Three.js modules as needed via the import map:
+
+```javascript
+// First-person controls
+import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+
+// GLTF model loading
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+// Post-processing
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+
+// Environment maps
+import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+
+// Text
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
+// Sky
+import { Sky } from 'three/addons/objects/Sky.js';
+
+// Water
+import { Water } from 'three/addons/objects/Water.js';
+
+// Physics integration (use cannon-es via CDN)
+// Add to importmap: "cannon-es": "https://unpkg.com/cannon-es@0.20/dist/cannon-es.js"
+import * as CANNON from 'cannon-es';
+```
+
+### Three.js First-Person Game Pattern
+
+```javascript
+import * as THREE from 'three';
+import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+document.body.appendChild(renderer.domElement);
+
+const controls = new PointerLockControls(camera, document.body);
+
+// Click to enter pointer lock
+document.addEventListener('click', () => {
+ if (!controls.isLocked) controls.lock();
+});
+
+// Movement state
+const velocity = new THREE.Vector3();
+const direction = new THREE.Vector3();
+const keys = { forward: false, backward: false, left: false, right: false, jump: false };
+
+document.addEventListener('keydown', (e) => {
+ switch (e.code) {
+ case 'KeyW': case 'ArrowUp': keys.forward = true; break;
+ case 'KeyS': case 'ArrowDown': keys.backward = true; break;
+ case 'KeyA': case 'ArrowLeft': keys.left = true; break;
+ case 'KeyD': case 'ArrowRight': keys.right = true; break;
+ case 'Space': keys.jump = true; break;
+ }
+});
+
+document.addEventListener('keyup', (e) => {
+ switch (e.code) {
+ case 'KeyW': case 'ArrowUp': keys.forward = false; break;
+ case 'KeyS': case 'ArrowDown': keys.backward = false; break;
+ case 'KeyA': case 'ArrowLeft': keys.left = false; break;
+ case 'KeyD': case 'ArrowRight': keys.right = false; break;
+ case 'Space': keys.jump = false; break;
+ }
+});
+
+let onGround = true;
+const MOVE_SPEED = 50;
+const JUMP_FORCE = 12;
+const GRAVITY = 30;
+
+const clock = new THREE.Clock();
+
+function animate() {
+ requestAnimationFrame(animate);
+ const dt = Math.min(clock.getDelta(), 0.1);
+
+ if (controls.isLocked) {
+ // Apply friction
+ velocity.x -= velocity.x * 10.0 * dt;
+ velocity.z -= velocity.z * 10.0 * dt;
+ velocity.y -= GRAVITY * dt;
+
+ direction.z = Number(keys.forward) - Number(keys.backward);
+ direction.x = Number(keys.right) - Number(keys.left);
+ direction.normalize();
+
+ if (keys.forward || keys.backward) velocity.z -= direction.z * MOVE_SPEED * dt;
+ if (keys.left || keys.right) velocity.x -= direction.x * MOVE_SPEED * dt;
+ if (keys.jump && onGround) { velocity.y = JUMP_FORCE; onGround = false; }
+
+ controls.moveRight(-velocity.x * dt);
+ controls.moveForward(-velocity.z * dt);
+ camera.position.y += velocity.y * dt;
+
+ if (camera.position.y < 1.7) {
+ velocity.y = 0;
+ camera.position.y = 1.7;
+ onGround = true;
+ }
+ }
+
+ renderer.render(scene, camera);
+}
+
+animate();
+```
+
+### Three.js GLTF Model Loading
+
+```javascript
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+
+const loader = new GLTFLoader();
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('https://unpkg.com/three@0.170/examples/jsm/libs/draco/');
+loader.setDRACOLoader(dracoLoader);
+
+// Load a model from the app's assets folder
+loader.load('assets/model.glb', (gltf) => {
+ const model = gltf.scene;
+ model.traverse((child) => {
+ if (child.isMesh) {
+ child.castShadow = true;
+ child.receiveShadow = true;
+ }
+ });
+ model.scale.setScalar(1);
+ scene.add(model);
+
+ // If the model has animations
+ if (gltf.animations.length > 0) {
+ const mixer = new THREE.AnimationMixer(model);
+ const action = mixer.clipAction(gltf.animations[0]);
+ action.play();
+ // In animate loop: mixer.update(dt);
+ }
+}, undefined, (error) => {
+ console.error('Model load error:', error);
+});
+```
+
+### Three.js Post-Processing (Bloom, etc.)
+
+```javascript
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene, camera));
+
+const bloomPass = new UnrealBloomPass(
+ new THREE.Vector2(window.innerWidth, window.innerHeight),
+ 0.5, // strength
+ 0.4, // radius
+ 0.85 // threshold
+);
+composer.addPass(bloomPass);
+
+// In animate loop, replace renderer.render(scene, camera) with:
+// composer.render();
+
+// On resize, also update:
+// composer.setSize(window.innerWidth, window.innerHeight);
+```
+
+### Three.js Procedural Terrain
+
+```javascript
+function createTerrain(width, depth, resolution) {
+ const geometry = new THREE.PlaneGeometry(width, depth, resolution, resolution);
+ const vertices = geometry.attributes.position.array;
+
+ for (let i = 0; i < vertices.length; i += 3) {
+ const x = vertices[i];
+ const z = vertices[i + 1];
+ vertices[i + 2] = noise(x * 0.02, z * 0.02) * 15;
+ }
+
+ geometry.computeVertexNormals();
+
+ const material = new THREE.MeshStandardMaterial({
+ color: 0x3a7d44,
+ roughness: 0.9,
+ flatShading: true,
+ });
+
+ const mesh = new THREE.Mesh(geometry, material);
+ mesh.rotation.x = -Math.PI / 2;
+ mesh.receiveShadow = true;
+ return mesh;
+}
+
+// Simple noise function (for procedural generation without dependencies)
+function noise(x, y) {
+ const n = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+ return n - Math.floor(n);
+}
+```
+
+### Three.js HUD / UI Overlay
+
+Since Three.js renders to a canvas, use HTML overlays for UI:
+
+```html
+