WebGlRenderer, UnrealBloomPass and CSS3DRenderer in the same file

Questions
, ,
1

Hello. I am trying to have WebGlRenderer, UnrealBloomPass and CSS3DRenderer in the same file. However, I can’t really seem to make it work, or find any tutorials online. The way I have set it up either the UnrealBloom does not work or the CSS3DRenderer does not work. Maybe you have some input or tutorials to recommend.

Here is the renderer code:

import * as THREE from "three"
import Experience from "./experience.js";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"
import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

export default class Renderer {
  constructor() {
    this.experience = new Experience()
    this.sizes = this.experience.sizes
    this.scene = this.experience.scene
    this.canvas = this.experience.canvas
    this.camera = this.experience.camera

    this.setRenderer()

   this.controls = new OrbitControls(this.camera.perspectiveCamera, this.renderer.domElement)
  }

  setRenderer() {
    THREE.ColorManagement.enabled = false

    //WebGLRenderer
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.physicallyCorrectLight = true
    this.renderer.outputColorSpace = THREE.SRGBColorSpace
    this.renderer.toneMapping = THREE.ReinhardToneMapping
    this.renderer.toneMappingExposure = 1
    this.renderer.shadowMap.enabled = true
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
    this.renderer.setClearColor( 0x000000, 0 )
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)
    document.querySelector('.experince-canvas').appendChild( this.renderer.domElement )

    //CSS3DRenderer
    this.css3DRenderer = new CSS3DRenderer();
    this.css3DRenderer.setSize( this.sizes.width, this.sizes.height );
    this.css3DRenderer.domElement.style.position = 'absolute';
    this.css3DRenderer.domElement.style.top = '0px';
    this.css3DRenderer.domElement.zIndex = 1001;
    
    document.querySelector('.html-canvas').appendChild( this.css3DRenderer.domElement );

    //Unreal Bloom
    this.target = new THREE.WebGLRenderTarget(this.sizes.width, this.sizes.height, {
      type: THREE.HalfFloatType,
      format: THREE.RGBAFormat,
      colorSpace: THREE.SRGBColorSpace,
    })
    this.target.samples = 8

    this.renderScene = new RenderPass(this.scene, this.camera.perspectiveCamera)
    this.bloomPass = new UnrealBloomPass( new THREE.Vector2(this.sizes.width, this.sizes.height), 1, 1.5, 1 )
    this.bloomPass.renderToScreen = true
    this.composer = new EffectComposer(this.renderer, this.target)

    this.composer.setSize(this.sizes.width, this.sizes.height)
    this.composer.addPass( this.renderScene )
    this.composer.addPass( this.bloomPass)
  }

  resize() {
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.css3DRenderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)

    this.composer.setSize(this.sizes.width, this.sizes.height)
  }

  update() {
    this.composer.render()
    this.css3DRenderer.render(this.scene, this.camera.perspectiveCamera)
    // this.renderer.render(this.scene, this.camera.perspectiveCamera)
  }
}
1 Like