大厂技术 高级前端 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();
到达这一步后,您就可以看到一个球体下落并在地面上弹跳的动画。
![b7626c99b1aae22ff420b147c238d16d.gif](https://i-blog.csdnimg.cn/blog_migrate/0d20204b20def5af3da88ecbca6ebf41.gif)
使用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 提供加载器、控制器、环境、真实角色、粒子引擎、地形编辑器、高级几何体、实例几何体。
![d98189595b78fc8e5877ec247a092bd3.jpeg](https://i-blog.csdnimg.cn/blog_migrate/de37e311f60478338bf970be3794d3ee.jpeg)
作者:Data_Adventure
链接:https://juejin.cn/post/7226160454795051045
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下