画布中的反应三纤维变化模型功能

如何解决画布中的反应三纤维变化模型功能

我想更改画布中的模型功能。我有两个不同的模型（js 文件中的函数）（模型 1 和模型 2）。两者都具有在悬停时勾勒网格的功能。代码如下所示：

import Model1 from './Model1'
import Model2 from './Model2'

export default function Scene1() {
  const [hovered,onHover] = useState(null)
  const selected = hovered ? [hovered] : undefined
  return (
    <div className="App" style={{ position: "relative",width: 450,height: 300 }}>
      <Canvas classname="scene" camera={{ zoom: 10 }}>
        <Suspense fallback={<Loader />}>
          <color attach="background" args={["#383838"]} />
          <ambientLight intensity={0.1} />
          <spotLight intensity={0.4} angle={0.5} penumbra={1} position={[10,15,10]} castShadow />
          <Model1 onHover={onHover} />
          <EffectComposer multisampling={8} autoClear={false}>
            <Outline blur selection={selected} visibleEdgeColor="#0e3000" hiddenEdgeColor="#0e3000" edgeStrength={30} edgeThickness={10} />
          </EffectComposer>
          <OrbitControls />
        </Suspense>
      </Canvas>
      <button onClick={shoot}>change</button>
    </div>
  )
}

现在我想改变

<Model1 onHover={onHover} />

到

 <Model2 onHover={onHover} />

所以我在我的场景中加载了 Model2 而不是 Model1 了。如果我在 vs 代码中手动完成它就可以了。但是，例如单击按钮，我该怎么做？我已经用 useState 尝试过它，但它似乎不适用于函数。有人可以帮我举个例子吗？

解决方法

useStates 非常简单。我在函数中添加了以下内容以使其工作：

const [currentModel,changeModel] = useState("Model1")

var models = {
  Model1: <Model1 onHover={onHover} />
  Model2: <Model2 onHover={onHover} />
}

function change(){
changeModel("Model2")
}

在画布中我改变了

<Model1 onHover={onHover} />

到

{models[currentModel]}

对于按钮

<button onClick = {change} >
      change model
</button>