THREE-pop — popping a quick THREE.js demo with least effort

This will give you a quick rotating cube setup:

import * as THREE from 'three';
import { createScene } from 'three-pop';

const { scene, container } = createScene();

scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
));

document.body.appendChild(container);

Live demo: https://raw.githack.com/mihailik/three-pop/refs/heads/main/index.html

Constructed parts of the scene

When you call createScene() you get a scene and a bunch of other THREE objects and things. Add your 3D objects, and pop it on the page.

• scene: THREE.Scene
• camera: THREE.PerspectiveCamera defaults to { fov: 75, near: 0.1, far: 1000 }
• renderer: THREE.WebGLRenderer
• stats: Stats FPS widget
• controls: OrbitControls rotating, zooming the scene with mouse/touch

You can pass parameters into createScene({ ... }):

const { scene, container } = createScene({
  renderer: { antialias: true },
  camera: { fov: 50 }
});

License

MIT   Oleg Mihailik