# three-playground > Three helper for quick prototyping Latest version **0.3.0** (published 2020-07-29) · MIT license · 0 weekly downloads ## Install ```sh npm install three-playground pnpm add three-playground yarn add three-playground bun add three-playground ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.0 | | Published | 2020-07-29 | | First published | 2020-03-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 828.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Julien Dargelos | | Maintainers | juliendargelos | ## Links - npm: https://www.npmjs.com/package/three-playground - Repository: https://github.com/juliendargelos/three-playground - Homepage: https://github.com/juliendargelos/three-playground#readme - Issues: https://github.com/juliendargelos/three-playground/issues - npm.io page: https://npm.io/package/three-playground ## Dependencies (7) - [dat.gui](https://npm.io/package/dat.gui.md) ^0.7.7 - [stats.js](https://npm.io/package/stats.js.md) ^0.17.0 - [three-dat.gui](https://npm.io/package/three-dat.gui.md) ^2.0.7 - [@types/dat.gui](https://npm.io/package/@types/dat.gui.md) ^0.7.5 - [postprocessing](https://npm.io/package/postprocessing.md) ^6.16.0 - [@types/stats.js](https://npm.io/package/@types/stats.js.md) ^0.17.0 - [camera-controls](https://npm.io/package/camera-controls.md) ^1.22.1 ## Recent versions - 0.3.0 (latest) — 2020-07-29 - 0.2.3 — 2020-07-24 - 0.2.2 — 2020-07-24 - 0.2.1 — 2020-07-24 - 0.2.0 — 2020-07-24 - 0.1.0 — 2020-03-02 - 0.0.3 — 2020-03-02 - 0.0.2 — 2020-03-02 ## README # three-playground [![test](https://github.com/juliendargelos/three-playground/workflows/test/badge.svg?branch=master)](https://github.com/juliendargelos/three-playground/actions?workflow=test) [![build](https://github.com/juliendargelos/three-playground/workflows/build/badge.svg?branch=master)](https://github.com/juliendargelos/three-playground/actions?workflow=build) [![version](https://img.shields.io/github/package-json/v/juliendargelos/three-playground)](https://github.com/juliendargelos/three-playground) *Three helper for quick prototyping, get rid of common initialization routines* **Featuring** - [camera-controls](https://github.com/yomotsu/camera-controls) - [postprocessing](https://github.com/vanruesc/postprocessing) - [stats.js](https://github.com/mrdoob/stats.js) - [dat.gui](https://github.com/dataarts/dat.gui) and [three-dat.gui](https://github.com/SolalDR/three-dat.gui) [Demo](https://juliendargelos.com/three-playground) ([Source code](https://github.com/juliendargelos/three-playground/blob/master/demo/index.ts)) ### Install **With yarn or npm:** ```bash yarn add three three-playground npm install three three-playground --save ``` **Include from unpkg:** ```html ``` ### Usage Basic example: ```typescript import { Playground } from 'three-playground' Playground.play({ async initialize () { this.model = (await this.loadGLTF('model.gltf')).scene this.gui.addObject3D('model', this.model) this.scene.add(this.model) }, update () { this.model.rotation.y += this.delta / 1000 } }) ``` All available parameters: ```typescript import { Playground } from 'three-playground' Playground.play({ // All parameters are optional, these are the default values background: 0x000000, // Renderer clear color controls: true, // Enable orbit controls ambientLight: true, // Add ambient light to the scene pointLight: true, // Add point light to the scene play: true, // Start the render loop at initialization fps: Infinity, // Number of frames per second while playing stats: true, // Display performance monitor gui: true, // Display gui controller width: 1024, // Width of the canvas (ignored if autosize or fullscreen are se to true) height: 512, // Height of the canvas (ignored if autosize or fullscreen are se to true) dracoPath: '', // Path to draco decoder (used in DRACOLoader and GLTFLoader if provided) dracoConfig: {}, // Config of draco decoder autosize: true, // Autosize the canvas to fill the container on window resize (ignored if fullscreen is set to true) fullscreen: true, // Autosize the canvas to fill the screen on window resize container: document.body, // Element where the canvas is appended renderer: new WebGLRenderer({ antialias: true }), // Renderer to use composer: new EffectComposer(/* renderer */), // Composer to use camera: new PerspectiveCamera(), // Camera to use async initialize () { // Initialize and add objects to scene // optionnaly asynchronous so you can load assets before rendering starts }, update () { // Update objects at each loop iteration }, resize () { // Do stuff on resize } }) ``` Each of `initialize`, `update` and `resize` hooks are binded to a `Playground` instance (the instance is also passed as parameter): ```typescript class Playground { readonly renderer: WebGLRenderer readonly composer: EffectComposer readonly controls: Cameracontrols readonly camera: PlaygroundCamera readonly scene: Scene readonly ambientLight: AmbientLight readonly pointLight: PointLight readonly gui: dat.GUI readonly stats: Stats playing: boolean // Equals true when the playground is playing elapsed: number // Elapsed time since initialization or last reset() call delta: number // Delta time from last loop iteration time: number // Time returned by last Date.now() call fps: number // Number of frames per second while playing resize (width: number, height: number): void // Resize the renderer and set camera aspect (if perspective) or boundaries (if orthographic) reset (): void // Reset elapsed time to 0 play (): void // Start playing pause (): void // Stop playing // Async helper methods for asset loading loadTexture (src: string, onProgress?: (event: ProgressEvent) => void): Promise loadOBJ (src: string, onProgress?: (event: ProgressEvent) => void): Promise loadGLTF (src: string, onProgress?: (event: ProgressEvent) => void): Promise loadFBX (src: string, onProgress?: (event: ProgressEvent) => void): Promise loadDRACO (src: string, onProgress?: (event: ProgressEvent) => void): Promise loadFont (src: string, onProgress?: (event: ProgressEvent) => void): Promise } ``` --- _Source: https://npm.io/package/three-playground · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._