cannon.js_使用Cannon.js和Three.js构建基于物理的3D菜单

cannon.js

View demo 查看演示 Download Source 下载源

Yeah, shaders are good but have you ever heard of physics?

是的，着色器很好，但是您听说过物理学吗？

Nowadays, modern browsers are able to run an entire game in 2D or 3D. It means we can push the boundaries of modern web experiences to a more engaging level. The recent portfolio of Bruno Simon, in which you can play a toy car, is the perfect example of that new kind of playful experience. He used Cannon.js and Three.js but there are other physics libraries like Ammo.js or Oimo.js for 3D rendering, or Matter.js for 2D. 

如今，现代浏览器能够以2D或3D模式运行整个游戏。 这意味着我们可以将现代网络体验的界限推向更高的层次。 您可以在其中玩玩具车的布鲁诺·西蒙(Bruno Simon)最近的作品集，就是这种新的游戏体验的完美范例。 他使用Cannon.js和Three.js，但还有其他物理库，例如用于3D渲染的Ammo.js或Oimo.js ，或用于2D的Matter.js 。

After months of hard but fun work, I'm glad to finally show you my new portfolio ?https://t.co/rVPv9oVMudMade with #threeJS and #canonJS pic.twitter.com/zrq8rpILq1

— Bruno (@bruno_simon)

经过几个月的艰苦而有趣的工作，我很高兴最终向您展示我的新作品集？ https://t.co/rVPv9oVMud有由#threeJS和#canonJS pic.twitter.com/zrq8rpILq1

-Bruno(@bruno_simon) October 24, 2019 2019年10月24日

In this tutorial, we’ll see how to use Cannon.js as a physics engine and render it with Three.js in a list of elements within the DOM. I’ll assume you are comfortable with Three.js and know how to set up a complete scene.

在本教程中，我们将看到如何将Cannon.js用作物理引擎，并在DOM元素列表中使用Three.js对其进行渲染。 我假设您对Three.js很满意，并且知道如何设置完整的场景。

准备DOM (Prepare the DOM)

This part is optional but I like to manage my JS with HTML or CSS. We just need the list of elements in our nav:

这部分是可选的，但是我想用HTML或CSS管理我的JS。 我们只需要导航中的元素列表：

<nav class="mainNav | visually-hidden">
    <ul>
        <li><a href="#">Watermelon</a></li>
        <li><a href="#">Banana</a></li>
        <li>&l