Skip to content

how to use EffectComposer/UnrealBloomPass in Aframe #4897

Closed
@JetsomMa

Description

Description:

i write the threejs code in vue + Aframe, but it`s not work and no error

mounted(){
    this.sceneElement = document.querySelector("a-scene");

    if (this.sceneElement.hasLoaded) {
      this.senceLoaded2();
    } else {
      this.sceneElement.addEventListener('loaded', this.senceLoaded2);
    }
},
method:{
    senceLoaded2 () {
      var params = {
        exposure: 1.5,
        bloomStrength: 100,
        bloomThreshold: 0,
        bloomRadius: 0.8
      }

      let renderer = this.sceneElement.renderer

      let camera = this.sceneElement.camera
      let scene = this.sceneElement.object3D

      // 添加渲染场景到渲染器
      var renderScene = new window.THREE.RenderPass(scene, camera);

      let bloomPass = new window.THREE.UnrealBloomPass(new window.THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
      bloomPass.renderToScreen = true;
      bloomPass.threshold = params.bloomThreshold;
      bloomPass.strength = params.bloomStrength;
      bloomPass.radius = params.bloomRadius;

      let composer = new window.THREE.EffectComposer(renderer);
      composer.setSize(window.innerWidth, window.innerHeight);
      composer.addPass(renderScene);
      composer.addPass(bloomPass);

      window.AFRAME.effectComposer = composer

      // 创建Bloom的Material
      let meshMaterialBloom = new window.THREE.MeshBasicMaterial({
        color: "blue",
        transparent: false,
        opacity: 1
      });

      var geometryBloom = new window.THREE.BoxGeometry(10, 10, 10);
      var cubeBloom = new window.THREE.Mesh(geometryBloom, meshMaterialBloom);
      // 设置到第二通道
      cubeBloom.layers.enable(1);
      scene.add(cubeBloom);
    },
}

i so rewrited Aframe/core/sence/a-sence.js[function render] on my location, code as

/**
     * The render loop.
     *
     * Updates animations.
     * Updates behaviors.
     * Renders with request animation frame.
     */
    render: {
      value: function (time, frame) {
        var renderer = this.renderer;

        this.frame = frame;
        this.delta = this.clock.getDelta();
        this.time = this.clock.elapsedTime * 1000;

        if (this.isPlaying) { this.tick(this.time, this.delta * 1000); }
        var savedBackground = null;
        if (this.is('ar-mode')) {
          // In AR mode, don't render the default background. Hide it, then
          // restore it again after rendering.
          savedBackground = this.object3D.background;
          this.object3D.background = null;
        }

        + if(window.AFRAME.effectComposer){
        + renderer.clear();
        +  this.camera.layers.set(window.AFRAME.BLOOM_SCENE);
        +  window.AFRAME.effectComposer.render(this.delta);
        +  renderer.clearDepth();
        +  this.camera.layers.set(window.AFRAME.ENTIRE_SCENE);
        +  renderer.render(this.object3D, this.camera);
        }
        
        -  renderer.render(this.object3D, this.camera);
        if (savedBackground) {
          this.object3D.background = savedBackground;
        }
      },
      writable: true
    }

my copy example1: https://wow.techbrood.com/fiddle/54961

my copy example2: https://blog.csdn.net/qq_39503511/article/details/111029877

need help !

  • A-Frame Version: 1.2.0
  • Platform / Device: vue/mac pro
  • Reproducible Code Snippet or URL:

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions