Scene·three·v1.0.0·MIT

Orbit Scene

A starter Three.js scene with a perspective camera, orbit controls, ambient + directional light, ground grid, and a render loop. Drop your geometry into `scene` and go.

#three#scene#orbit#starter

Install

npx gamecn add orbit-scene

Usage

ts
import { OrbitScene } from '@/scenes/OrbitScene';
const orbit = new OrbitScene({ canvas: document.querySelector('canvas')! });
orbit.scene.add(myMesh);
orbit.start();

Source preview

Compatibility

Engines
three >=0.160.0
Frameworksvanilla
Languagestypescript
Bundlersvite

Files installed

  • {scenes}/OrbitScene.ts
  • docs/gamecn/orbit-scene.md(docs)

Dependencies

npm

three@>=0.160.0

Notes

Usage

<canvas id="game" style="width: 100vw; height: 100vh;"></canvas>
import * as THREE from "three";
import { OrbitScene } from "@/scenes/OrbitScene";

const orbit = new OrbitScene({
  canvas: document.getElementById("game") as HTMLCanvasElement,
  backgroundColor: 0x1a1a2e,
  cameraPosition: [5, 5, 5],
  shadows: true,
});

// Add your geometry
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshStandardMaterial({ color: 0xff6b6b }),
);
orbit.scene.add(cube);

// Per-frame logic
orbit.onUpdate((dt) => {
  cube.rotation.y += dt;
});

orbit.start();

// Later:
// orbit.stop();
// orbit.dispose();

What you get

  • WebGLRenderer with antialias, devicePixelRatio scaling, optional shadows
  • PerspectiveCamera with reasonable defaults (50° FOV, 0.1–1000 near/far)
  • OrbitControls with damping
  • AmbientLight + DirectionalLight
  • Optional GridHelper
  • requestAnimationFrame loop with delta-time updaters
  • Resize handling on window

Related