本文详细介绍了如何在Web应用中结合Oimo.js（物理引擎）和three.js（3D渲染库）创建3D场景，包括库的嵌入、场景设置、物体创建以及物理互动。Phy项目也作为简化物理引擎管理的工具被提及。
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群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();到达这一步后，您就可以看到一个球体下落并在地面上弹跳的动画。
使用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 短小精悍。这里接着推荐：https://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 提供加载器、控制器、环境、真实角色、粒子引擎、地形编辑器、高级几何体、实例几何体。
作者：Data_Adventure
链接：https://juejin.cn/post/7226160454795051045
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
