Perplexity Computer
f0231733a2
Applies Replit PR #21 feature on top of current main: - buildWorld()/teardown() lifecycle for world rebuild on context restore - disposeWorld(), disposeAgents(), disposeEffects(), disposeInteraction() - getAgentStates()/applyAgentStates() for state preservation across rebuilds - webgl-recovery-overlay in index.html - Canvas reuse on reinit (existingCanvas param in initWorld) - Preserves: visibility-change pause, visitor init, debounced resize
96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
import * as THREE from 'three';
|
|
import { getMaxPixelRatio, getQualityTier } from './quality.js';
|
|
|
|
let scene, camera, renderer;
|
|
const _worldObjects = [];
|
|
|
|
/**
|
|
* @param {HTMLCanvasElement|null} existingCanvas — pass the saved canvas on
|
|
* re-init so Three.js reuses the same DOM element instead of creating a new one
|
|
*/
|
|
export function initWorld(existingCanvas) {
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x000000);
|
|
scene.fog = new THREE.FogExp2(0x000000, 0.035);
|
|
|
|
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 500);
|
|
camera.position.set(0, 12, 28);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
const tier = getQualityTier();
|
|
renderer = new THREE.WebGLRenderer({
|
|
antialias: tier !== 'low',
|
|
canvas: existingCanvas || undefined,
|
|
});
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, getMaxPixelRatio()));
|
|
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
|
|
|
if (!existingCanvas) {
|
|
document.body.prepend(renderer.domElement);
|
|
}
|
|
|
|
addLights(scene);
|
|
addGrid(scene, tier);
|
|
|
|
return { scene, camera, renderer };
|
|
}
|
|
|
|
function addLights(scene) {
|
|
const ambient = new THREE.AmbientLight(0x001a00, 0.6);
|
|
scene.add(ambient);
|
|
|
|
const point = new THREE.PointLight(0x00ff41, 2, 80);
|
|
point.position.set(0, 20, 0);
|
|
scene.add(point);
|
|
|
|
const fill = new THREE.DirectionalLight(0x003300, 0.4);
|
|
fill.position.set(-10, 10, 10);
|
|
scene.add(fill);
|
|
}
|
|
|
|
function addGrid(scene, tier) {
|
|
const gridDivisions = tier === 'low' ? 20 : 40;
|
|
const grid = new THREE.GridHelper(100, gridDivisions, 0x003300, 0x001a00);
|
|
grid.position.y = -0.01;
|
|
scene.add(grid);
|
|
_worldObjects.push(grid);
|
|
|
|
const planeGeo = new THREE.PlaneGeometry(100, 100);
|
|
const planeMat = new THREE.MeshBasicMaterial({
|
|
color: 0x000a00,
|
|
transparent: true,
|
|
opacity: 0.5,
|
|
});
|
|
const plane = new THREE.Mesh(planeGeo, planeMat);
|
|
plane.rotation.x = -Math.PI / 2;
|
|
plane.position.y = -0.02;
|
|
scene.add(plane);
|
|
_worldObjects.push(plane);
|
|
}
|
|
|
|
/**
|
|
* Dispose only world-owned geometries, materials, and the renderer.
|
|
* Agent and effect objects are disposed by their own modules before this runs.
|
|
*/
|
|
export function disposeWorld(disposeRenderer, _scene) {
|
|
for (const obj of _worldObjects) {
|
|
if (obj.geometry) obj.geometry.dispose();
|
|
if (obj.material) {
|
|
const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
|
|
mats.forEach(m => {
|
|
if (m.map) m.map.dispose();
|
|
m.dispose();
|
|
});
|
|
}
|
|
}
|
|
_worldObjects.length = 0;
|
|
disposeRenderer.dispose();
|
|
}
|
|
|
|
export function onWindowResize(camera, renderer) {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|