The code regarding the creation of the composer:
this.composer = new EffectComposer( this.renderer );
const renderPass = new RenderPass( this.scene, this.camera );
this.composer.addPass( renderPass );
const unrealBloomPass = new UnrealBloomPass(new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.5, 0.4, 0.85);
this.composer.addPass( unrealBloomPass );
const outputPass = new OutputPass();
this.composer.addPass( outputPass );
Now the animation function:
function animate() {
requestAnimationFrame(animate);
sceneHandler.orbit.update();
sceneHandler.composer.render()
rayCaster.raycaster.setFromCamera( rayCaster.pointer, sceneHandler.camera );
rayCaster.intersectObjectBbox()
}
Stars creation:
function randomValues(values: string[]) {
return values[Math.floor(Math.random() * values.length)]
}
function createStar() {
const geometry = new THREE.SphereGeometry(randomBetweenTwo(0.1, 5));
const material = new THREE.MeshBasicMaterial({color: randomValues(['#fff891', 'rgb(33, 56, 255)', '#f8fdff'])});
const sphere = new THREE.Mesh(geometry, material);
return sphere;
}
Text creation:
function createText(text: string, font: Font) {
const geometry = new TextGeometry(text, {
font,
size: 20,
height: 5,
});
const materials = [
new THREE.MeshStandardMaterial({ color: '#fff', flatShading: true, emissive: '#70f5ff', emissiveIntensity: 0 }),
new THREE.MeshPhongMaterial({ color: '#fff', flatShading: true, emissive: '#0e35d3', emissiveIntensity: 0 })
];
const mesh = new THREE.Mesh(geometry, materials);
const mesh2 = new THREE.Mesh(geometry, materials);
const group = new THREE.Group()
//Caixa do texto
const { x } = bbox(mesh).getSize(new THREE.Vector3(0,0,0))
const planeGeo = new THREE.BoxGeometry( x + 10, 30, 5 );
const planeMat1 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const planeMat3 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const planeMat4 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const planeMat2 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const planeMat5 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const planeMat6 = new THREE.MeshStandardMaterial( {color: '#0c3d59', side: THREE.DoubleSide, emissive: '#70f5ff', emissiveIntensity: 0} );
const plane = new THREE.Mesh( planeGeo, [planeMat1,planeMat2,planeMat3,planeMat4,planeMat5,planeMat6] );
//Reposiciona todos os textos no centro
mesh2.rotation.y = degreesToRadians(-180)
reCenterText(mesh2)
reCenterText(mesh)
//Um para a frente e outro para trás
mesh2.position.z -= 5
mesh.position.z += 5
group.add(mesh)
group.add(mesh2)
group.add(plane)
return group;
}
Original without composer:
The result:
.
