reactjs - 通过 props 禁用效果 react-three-fiber
问题描述
我使用npm 包创建了具有react-three-fiber
效果的场景。EffectsComposer
Glitch
react-postprocessing
我想使用 html 输入复选框来切换效果的active
状态,但是,切换道具的状态不会禁用效果。禁用复选框输入效果的正确方法是什么?Glitch
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>
);
};
解决方案
做就是了
const App = () => {
...
<Canvas>
<Box .../>
{active && <Composer/>}
</Canvas>
和
const Composer = () => {
return (
<EffectComposer>
<Glitch active={true} mode={GlitchMode.CONSTANT_WILD} />
</EffectComposer>
);
};
推荐阅读
- html - 如何用图像填充空白
- java - 如何在 Hibernate Java obj 中添加 @XmlTransient
- sql - 与行的代数表达式相比,聚合函数返回不同的结果
- python - 在熊猫中减去 timedelta
- rust - 从实现 Drop 的结构中移动值时,如何避免不必要的匹配检查或使用不安全?
- reactjs - 使用 React Hook 时如何在组件卸载时取消绑定 Pusherjs 事件?
- umbraco - 向 Umbraco 8 成员索引添加一个字段
- apache-flink - Flink CEP 未检测到最后一条记录
- html - 如何在 HTML 中获取选择方向?
- vba - VBA 使用 ahtCommonOpenFileSave 和 ahtOFN_ALLOWMULTISELECT,选择单个文件时出错