React-Three-Fiber 中文文档

让我们的三维元素与用户的操作发生一些化学反应

Events and Interaction 事件与交互

任何具有 raycast 方法的 Object3D 元素都可以接收大量事件，例如mesh。

User Interaction 用户交互

<mesh
  onClick={(e) => console.log('click')}
  onContextMenu={(e) => console.log('context menu')}
  onDoubleClick={(e) => console.log('double click')}
  onWheel={(e) => console.log('wheel spins')}
  onPointerUp={(e) => console.log('up')}
  onPointerDown={(e) => console.log('down')}
  onPointerOver={(e) => console.log('over')}
  onPointerOut={(e) => console.log('out')}
  onPointerEnter={(e) => console.log('enter')}
  onPointerLeave={(e) => console.log('leave')}
  onPointerMove={(e) => console.log('move')}
  onPointerMissed={() => console.log('missed')}
  onUpdate={(self) => console.log('props have been updated')}
/>

本教程假定您具有一些 React 知识，并且将基于这个starter codesandbox，所以只需 fork 它并跟随教程即可！在我们经过前面的学习后，下一步将是允许我们的三维元素对用户交互做出反应，因此在这部分中，让我们将一个点击处理程序添加到立方体上，并在单击时使其变大。

从这里我们可以看出，我们需要做的是使用我们能在任何 DOM 元素上使用的 onClick 事件来响应用户点击mesh。（但是其实对mesh起作用的click事件是另外封装的）

我们试着添加一下:

<mesh onClick={() => alert('Hellooo')} ref={myMesh}>
  <boxGeometry />
  <meshPhongMaterial color="royalblue" />
</mesh>

我们做到了！我们创建了 3D 故事中最无聊的交互，并使alert出现。现在让我们实际上让它给我们的mesh加上动画效果。

让我们首先设置一些状态来检查来判定mesh是否处于active状态:

const [active, setActive] = useState(false)

在拥有这个之后，我们可以使用三元运算符来设置比例，如下所示：

<mesh scale={active ? 1.5 : 1} onClick={() => setActive(!active)} ref={myMesh}>
  <boxGeometry />
  <meshPhongMaterial color="royalblue" />
</mesh>

如果你现在尝试去点击它，这个mesh会放大或者缩小！我们刚刚完成了我们第一个可交互的三维mesh。

这个教程中我们做了这么几件事：

—

给mesh添加了click事件

—

通过useState，给mesh添加了一个状态的判定逻辑

—

依据state来改变mesh的缩放

interaction exercise 交互练习

—

更改mesh的其他属性，如位置position甚至材质的颜色color

—

使用 onPointerOver 和 onPointerOut 来实现悬停在mesh上从而改变mesh的属性

Next Steps 接下来

我们刚刚让我们的mesh对用户交互做出了反应，但是没有任何过渡，看起来相当单调，对吧？在后面的教程中，我们可以将 react-spring 集成到我们的项目中，将其变成实际动画。

React-Three-Fiber

官方网站

JavaScript | 高手之路

全能课

Best

MasterJS

Made By