Skip to main content

事件与交互

User Interaction(用户交互)​

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

<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')}
/>

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

例子​

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

  1. 给mesh添加了click事件
  2. 通过useState，给mesh添加了一个状态的判定逻辑
  3. 依据state来改变mesh的缩放

我们试着添加一下:

<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。

Next Steps 接下来​

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