通过道具反应三根纤维来禁用效果

Question

我使用react-three-fiber创建了场景，该场景具有EffectsComposer，并使用react-postprocessingnpm包实现Glitch效果。

我想使用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>
);
};