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.
npm intall @fantasy3d/postprocessingimport { 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 );
} );