Package Exports
- @fantasy3d/postprocessing
- @fantasy3d/postprocessing/dist/fantasy.postprocessing.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fantasy3d/postprocessing) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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
npm intall @fantasy3d/postprocessingUsage
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 );
} );