0

I have scene created with react-three-fiber which has an EffectsComposer with a Glitch effect using react-postprocessing npm package.

I would like to toggle the active state of the Glitch effect using an html input checkbox, however, toggling the state of the active prop does not disable the effect. What's the correct way to disable effects on checkbox input?

I've set up a sandbox with the issue here https://codesandbox.io/s/tender-star-lw07h?file=/src/App.tsx:0-1488

Here's the code.

import React, {
  Suspense,
  useRef,
  useEffect,
  useState,
  createRef,
  Fragment
} from "react";
import Outline from "./components/Outline";
import { EffectComposer, Glitch, Noise } from "react-postprocessing";
import { Canvas } from "react-three-fiber";
import { OrbitControls } from "drei";
import { Mesh } from "three";
import { GlitchMode } from "postprocessing";

const Box = (props: any) => (
  <mesh {...props}>
    <meshBasicMaterial attach="material" color="red" />
    <boxGeometry args={[1, 1, 1]} attach="geometry" />
  </mesh>
);

const Composer = ({ active }: any) => {
  const ref = React.useRef();

  return (
    <EffectComposer>
      <Glitch ref={ref} active={active} mode={GlitchMode.CONSTANT_WILD} />
    </EffectComposer>
  );
};

const App = () => {
  const ref = useRef();

  const [selection, select] = useState<Mesh>();
  const [active, activate] = useState<boolean>(true);

  useEffect(() => {
    if (selection) {
      console.log(ref.current);
    }
  }, [selection]);

  return (
    <Fragment>
      <div style={{ background: "#fff" }}>
        <label htmlFor="">Active {JSON.stringify(active)}</label>
        <input
          type="checkbox"
          defaultChecked={active}
          onChange={($event) => {
            activate($event.target.checked);
          }}
        />
      </div>
      <Canvas>
        <Box onClick={(mesh) => select(mesh)} />
        <Composer active={active} />
      </Canvas>
    </Fragment>
  );
};
fitzmode
  • 1,007
  • 1
  • 18
  • 29

1 Answers1

1

Just do

const App = () => {
    ...
    <Canvas>
      <Box .../>
      {active && <Composer/>}
    </Canvas>

and

const Composer = () => {
  return (
    <EffectComposer>
      <Glitch active={true} mode={GlitchMode.CONSTANT_WILD} />
    </EffectComposer>
  );
};
user16973023
  • 11
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 22 '21 at 07:54