通过道具react-three-fiber禁用效果

Question

我有用react-three-fiber创建的场景，其中有一个使用react-postprocessing npm包的具有Glitch效果的EffectsComposer。

我想使用html输入复选框来切换Glitch效果的active状态，然而，切换active属性的状态并不会禁用该效果。禁用复选框输入效果的正确方法是什么？

我在这里设置了一个沙箱，问题是https://codesandbox.io/s/tender-star-lw07h?file=/src/App.tsx:0-1488

这是代码。

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>
  );
};

Answer 1

只要做就行了

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

和

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