about UnrealBloomPass

[Developer45]

hi

when i use UnrealBloomPass, i found the background color is set to black and can not change. can you tell me how can i set the background color .

thank you very much

[vasturiano]

@Developer45 you can set the canvas background color by doing f.e.

myGraph.backgroundColor('purple');

[boostpaal]

Just a note to this. When you set background-color with myGraph.backgroundColor, the screen might flicker on startup due to React state updates. The way around this is to set the background color on the scene directly. This can be done with an effect composer.

Using Typescript:

import React, { useEffect, useRef } from 'react';
import ForceGraph3D, { ForceGraphMethods } from 'react-force-graph-3d';
import { Pass } from 'three/examples/jsm/postprocessing/Pass';
import { Scene, Color } from 'three';

class ForceEffects extends Pass {
  constructor({ scene }: { scene: Scene }) {
    super();
    scene.background = new Color('purple');
  }
}

const MyComponent: React.FC = () => {
  const forceEffects = useRef<ForceEffects>();
  const forceRef = useRef<ForceGraphMethods>();

  useEffect(() => {
    if (!forceRef.current) return;
    if (!forceEffects.current) {
      forceEffects.current = new ForceEffects({
        scene: forceRef.current.scene(),
      });
    }
    forceRef.current.postProcessingComposer().addPass(forceEffects.current);
  });

  return <ForceGraph3D ref={forceRef} />;
};

export default MyComponent;

Hope this helps.

[qcgm1978]

I've found blue background seems not work. I have to change it to other color e.g. #000003 in the example code