@rapidajs/three
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

@rapidajs/three

@rapidajs/three is a javascript package that provides some utilities for three.js

  • [x] Simple API for handling multiple views within renderers
  • [x] Post processing effects
  • [x] Loaders for assets

rapida is under active alpha development and is not yet battle-tested and stable. We don't recommend using rapida in production just yet, but watch this space!

Installation

To get started install @rapidajs/three and three.

> yarn add @rapidajs/three three

@rapidajs/three currently cannot be used without a bundler. A basic example of using @rapidajs/three with parcel can be found here: https://gitlab.com/rapidajs/rapida-typescript-parcel/-/blob/main/package.json

Visit the rapidajs website for documentation and examples.

Example Usage

Let's use @rapidajs/three to create a view with postprocessing effects.

  1. Gather necessary imports
import { Effects, WebGLRenderer } from '@rapidajs/three';
import { Scene, PerspectiveCamera } from 'three';
  1. Create a @rapidajs/three webgl renderer and append it to the dom
const renderer = new WebGLRenderer();
document.getElementById('app').appendChild(renderer.domElement);
  1. Create a scene
const scene = new Scene();
  1. Create a camera and a view
const camera = new PerspectiveCamera();
const view = renderer.create.view({
  scene,
  camera,
  useEffectComposer: true, // make sure to include `useEffectComposer: true`
});
  1. Add a post processing effect with Effects
view.composer.add.effects(Effects.bloom({ ... bloom effect params ... }));
  1. Render your scene
renderer.render(timeElapsed);

Readme

Keywords

none

Package Sidebar

Install

npm i @rapidajs/three

Weekly Downloads

4

Version

0.5.0

License

MIT

Unpacked Size

442 kB

Total Files

82

Last publish

Collaborators

  • isaacmason