画布中的react-three-fiber变化模型功能答案

【问题标题】：react-three-fiber change model function in canvas画布中的react-three-fiber变化模型功能
【发布时间】：2021-10-02 16:53:11
【问题描述】：

我想更改画布中的模型功能。我有两个不同的模型（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 试过了，但它似乎不适用于函数。有人可以帮我举个例子吗？

【问题讨论】：

您可以尝试三元运算符根据某些变量渲染不同的模型。

标签： javascript reactjs three.js react-state react-three-fiber

【解决方案1】：

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

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>

【讨论】：