欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

Three.js 物理引擎 Oimo.js

最编程 2024-04-11 21:43:10
...

Oimo.js

Oimo.js和three.js是两个广泛使用的JavaScript库，用于在Web上创建3D场景，特别是游戏。Oimo.js提供了一个功能强大的物理引擎，可模拟现实世界中的物理规律，例如重力和碰撞等。而three.js则负责进入模型、渲染画面并添加用户交互等。

为了使用这两个库，首先需要将它们嵌入到HTML文档中。以下代码段展示了如何使用本地链接来引用这些库：

<!DOCTYPE html>
<html>
<head>
  <title>Oimo.js and Three.js Example</title>
  <meta charset="utf-8">
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>
</head>
<body>
  <script src="three.min.js"></script>
  <script src="oimo.min.js"></script>

  <script>
    // 在此处定义我们的代码
  </script>
</body>
</html>

接下来，我们需要创建一个Three.js场景，并设置相机和渲染器。以下代码片段展示了如何进行这些设置：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 15);

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

现在，我们需要创建一个物理引擎世界，并添加一些物体。以下代码片段演示了如何创建这样的世界：

var world = new OIMO.World({ 
  timestep: 1/60,
  iterations: 8,
  broadphase: 2,
  worldscale: 1,
  random: true,
  info: false,
});

const groundBody = world.add({
  type: 'box',
  size: [10000, 1, 10000],
  pos: [0, 0, 0],
  rot: [0, 0, 0],
  move: false, // 是否可移动
  density: 1, // 密度
  friction: 1, // 摩擦力
  restitution: 0.3, // 弹性
  belongsTo: 1, 
});

const body = world.add({
  type: 'sphere',
  size: [3], // 半径
  pos: [0, 10, 0], // 位置
  rot: [0, 0, 0], // 旋转
  move: true, // 是否可移动
  density: 10, // 密度
  friction: 0.2, // 摩擦力
  restitution: 2, // 弹性
  belongsTo: 1, 
  collidesWith: 0xffffffff, // 0xffffffff
});

以上代码将创建一个地面和一个球体。下一步是将这些物体转换为Three.js中的物体，以便渲染它们。以下代码片段演示了如何在Three.js中创建这些物体：

var geometry = new THREE.SphereGeometry(1, 32, 32);
var sphereMaterial = new THREE.MeshStandardMaterial({
  color: 0xff0000,
  roughness: 0.5,
  metalness: 0.5
});
var sphere = new THREE.Mesh(geometry, sphereMaterial);
sphere.position.copy(body.getPosition());
scene.add(sphere);

var planeGeometry = new THREE.PlaneGeometry(10000, 10000, 1, 1);
var planeMaterial = new THREE.MeshStandardMaterial({
  color: 0x44aa88,
  roughness: 0.5,
  metalness: 0.5
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

最后，我们需要在渲染循环中更新物理引擎并绘制Three.js场景。以下代码片段演示了如何实现这一点：

function render() {
  requestAnimationFrame(render);

  world.step();

  sphere.position.copy(body.getPosition());
  sphere.quaternion.copy(body.getQuaternion());

  renderer.render(scene, camera);
}
render();

到达这一步后，您就可以看到一个球体下落并在地面上弹跳的动画。

image.png

使用Oimo.js和three.js可以让Web应用程序创建更加逼真的3D场景。Oimo.js提供了一个易于使用的物理引擎，可以模拟各种不同类型的物理对象之间的相互作用。而Three.js则提供了一个强大的3D渲染引擎，可以将这些物理对象呈现为具有逼真外观和行为的3D场景。这使得开发人员能够创建出更加生动、逼真的Web应用程序。

除了上述示例中展示的一些基本功能之外，这两个库还提供了许多其他功能，例如灯光、阴影、纹理等。此外，Oimo.js还提供了多种形状，如球体、盒子、圆柱体、锥形等，并且支持更高级的功能，例如关节、约束等。这使得开发者能够创建尽可能逼真的3D场景。

总的来说，Oimo.js和Three.js是非常有用的JavaScript库，用于创建令人印象深刻的3D场景和游戏。它们提供了各种功能，使开发人员可以轻松地在Web上创建逼真的3D应用程序，同时提供了强大的工具，使他们能够定制和控制所创建的3D场景。如果你对3D编程有兴趣，那么学习这些库将会是很好的选择。

Phy

Oimo.js 短小精悍。 这里接着推荐： github.com/lo-th/phy

Phy 项目是一种基本语言，用于简化 three.js 项目上物理引擎的创建和控制。Phy 在工人或直接从三到物理学架起桥梁。这是我在 javascript 中所有物理工作的汇编。

Phy 在物理引擎上提供相同的命令。每个引擎都有自己的特点。

OIMO 轻便、稳定、速度快，适用于简单的项目。 撒哈拉制造 AMMO 是 Bullet 引擎的 wasm 端口，功能强大且具有柔软的机身。用于复杂的模拟。 由克里普肯建造 PHYSX 是 Nvidia Physx 引擎的 wasm 端口，是最新的和最强大的。它是最快的并且具有非常稳定的机器人关节。 由 Fabmax 建造 HAVOK 是 Havok 引擎的 wasm 端口，是大多数游戏中使用的行业标准。 Rapier 和 Cannon 也在测试中……

特征 Phy build 提供加载器、控制器、环境、真实角色、粒子引擎、地形编辑器、高级几何体、实例几何体。

image.png

上一篇： 主要视觉技术竞赛获奖者和最佳解决方案集（持续更新）

下一篇： LeetCode 两数之和 | 刷卡打卡

推荐阅读