canvas 中的 react-three-fiber 变化模型函数

Question

我想更改canvas中的模型函数。我有两个不同的模型（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 code 中手动执行它，它就可以工作。但是我怎样才能通过点击按钮来做到这一点呢？我已经用 useState 试过了，但它似乎不适用于函数。有人可以帮我举个例子吗？

Answer 1

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

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

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

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

而在canvas我改变了

<Model1 onHover={onHover} />

到

{models[currentModel]}

对于按钮

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

canvas 中的 react-three-fiber 变化模型函数

react-three-fiber change model function in canvas

javascript

three.js

reactjs

react-state

react-three-fiber