@fantasy3d/postprocessing

A postprocessing wrapper for Fantasy 3D.

> Fantasy 3D is a web-first real-time interactive 3d visualization framework base on three.js. Use ECS(Entity-Component-System) design and easy to use and light weight.Can be used to develop digital twins, digital city, digital factory, 3D GIS, ect.

Installation

``bash
npm intall @fantasy3d/postprocessing
`

Usage

`ts
import { Vector3 } from 'three';
import { AmbientLight, Engine, GLTFParser, Scene } from '@fantasy3d/core';
import { OrbitController } from '@fantasy3d/addons';
import { BloomEffect, EffectRenderer } from '@fantasy3d/postprocessing';

// Create engine
const engine = new Engine( {

// WebGL options
gl: {

viewport: document.getElementById( 'viewport' ),
clearColor: 'rgb( 36, 44, 49 )',
powerPreference: "high-performance",
antialias: false,
stencil: false,
depth: false

}

} );

// Create effect renderer
const effectRenderer = new EffectRenderer( engine, { multisampling: 4, enableNormalPass: true } );

// Create bloom effect
const bloom = new BloomEffect( {

mipmapBlur: true,
intensity: 1.75,
luminanceThreshold: 0.15,
luminanceSmoothing: 0

} );

// Add bloom effect
effectRenderer.addEffect( bloom );

// Create scene
const scene = new Scene( engine );

// Set scene renderer
scene.sceneRenderer = effectRenderer;

// Active scene
scene.isActive = true;

// Create a perspective camera
const camera = scene.createPerspectiveCamera( {

transform: {

position: new Vector3( 0, 5, 5 ),
lookAt: new Vector3( 0, 0, 0 )
},
camera: { near: 0.1, far: 200.0 }

} );

// Add Orbitcontroller
camera.addComponent( OrbitController, { damping: true } );

// Add AmbientLight
const { rootEntity } = scene;
rootEntity.addComponent( AmbientLight, { intensity: Math.PI } );

// Load glb model
engine.resourceManager.loadGLTF( './assets/models/PrimaryIonDrive.glb' ).then( ( resource ) => {

// Parse gltf resource
const entity = GLTFParser.parse( resource );

// Add to scene
rootEntity.addChild( entity );

} );
``

Links

- Official Site
- Examples
- Guide
- API
- Three.js
- Postprocessing