Function setupScene

packages/examples/src/examples/gltf/ExampleGltfCharacter.tsx:107–261

()

	// model has been instantiated into the world (runs from level.load's
	// onLoaded, after the container reset + model creation)
	const setupScene = () => {
		app.world.addChild(new SkyBackdrop(), -10000);

		const scene = loader.getGLTF("character");
		// the animated asset loads as a single GLTFModel named after the asset
		const model = app.world.getChildByName("character")[0] as GLTFModel;
		if (!scene || !model) {
			return;
		}

		// frame a Camera3d on the model: center on its bounds, look down a touch
		// at a 3/4 yaw, pulled back to fit the model height.
		const { min, max } = scene.bounds;
		const cx = ((min[0] + max[0]) / 2) * SCALE;
		const cy = -((min[1] + max[1]) / 2) * SCALE; // render space: -Y is up
		const cz = -((min[2] + max[2]) / 2) * SCALE;
		const spanY = (max[1] - min[1]) * SCALE;

		const camera = app.viewport as InstanceType<typeof Camera3dClass>;
		camera.setClipPlanes(SCALE * 0.1, 8000);
		const clamp = (v: number, lo: number, hi: number) =>
			Math.max(lo, Math.min(hi, v));

		// orbit state — drag to rotate around the character
		let yaw = 0.5;
		let pitch = -0.12;
		let distance = spanY * 2.4 + 200;
		const updateCam = () => {
			pitch = clamp(pitch, -1.45, 1.45);
			distance = clamp(distance, 120, 4000);
			camera.pos.set(
				cx + Math.sin(yaw) * Math.cos(pitch) * -distance,
				cy + Math.sin(pitch) * distance, // up = -Y
				cz - Math.cos(yaw) * Math.cos(pitch) * distance,
			);
			camera.lookAt(cx, cy, cz);
		};
		updateCam();

		// drag to orbit — radians per pixel dragged. Use the camera-independent
		// screen coords (gameScreenX/Y), NOT gameX/gameY: the latter are
		// projected through the viewport, so since orbiting moves the camera
		// every frame the same pixel would map to a different world point each
		// move — a feedback loop that makes the drag jump. gameScreenX/Y come
		// straight from the canvas/scale transform and stay stable. (Same
		// approach as the glTF Scene example.)
		const ORBIT_SENSITIVITY = 0.0022;
		let dragging = false;
		let lastX = 0;
		let lastY = 0;
		input.registerPointerEvent("pointerdown", camera, (ev: Pointer) => {
			dragging = true;
			lastX = ev.gameScreenX;
			lastY = ev.gameScreenY;
		});
		input.registerPointerEvent("pointerup", camera, () => {
			dragging = false;
		});