Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

En fix1 #154

Merged
merged 18 commits into from
May 18, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
doc: translate_physics
  • Loading branch information
rongbin-wang committed Apr 15, 2023
commit 24417950cefef250fdaa948e80dd1bcd16cfb188
58 changes: 29 additions & 29 deletions docs/guide/physics/Readme.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# 物理总览
物理系统是对真实世界的模拟,使场景中的模型对象可以像真实环境中的物体一样,拥有质量并正确响应重力及各种碰撞。引擎以插件的形式提供了物理引擎支持(基于[ammo.js](https://github.com/kripken/ammo.js)),并封装了常用的组件,可以帮助用户在项目中模拟物理系统。
# Overview of Physics
The physics system is a simulation of the real world, allowing the modeled objects in the scene to behave like physical objects with mass, respond correctly to gravity and various collisions, just like in the real environment. The engine provides physics engine support (based on[ammo.js](https://github.com/kripken/ammo.js))in the form of plugins and encapsulates commonly used components to help users simulate the physical system in their projects.

跟引擎安装方法一致,我们可以通过 `NPM` `CDN` 链接两种方式来引入物理插件:
Similar to the engine installation method, we can introduce the physics plugin in two ways through `NPM` and `CDN` links:
```bash
npm install @orillusion/core --save
npm install @orillusion/physics --save
```
引入模块
Import modules:
```ts
import { Engine3D } from "@orillusion/core"
import { Physics } from "@orillusion/physics"
```
或全局加载 `<script>`,在全局 `Orillusion` 变量中获取 `Physics` 模块:
Or load globally using `<script>`, obtain the `Physics` module from the global `Orillusion` variable:
```html
<script src="https://cdn.orillusion.com/orillusion.umd.js"></script>
<script src="https://cdn.orillusion.com/physics.umd.js"></script>
Expand All @@ -20,18 +20,18 @@ import { Physics } from "@orillusion/physics"
const { Engine3D, Physics } = Orillusion
```

目前 [Physics](/physics/classes/Physics) 支持的参数及方法如下表所示:
Currently, the parameters and methods supported by [Physics](/physics/classes/Physics) are shown in the following table:

| API | 描述 |
| API | Description |
| --- | --- |
| init(): void | 初始化物理引擎 |
| update(): void | 更新物理系统,需要在 loop 主体中调用 |
| gravity: Vecter3 | 重力参数 |
| isStop: boolean | 控制物理世界是否暂停运行 |
| world: Ammo.btDiscreteDynamicsWorld | ammo.js 原生物理世界 |

## 物理环境的运行
我们可以初始化Physics来开启物理系统,并通过在主循环中调用 `Physics.update()` 实现物理世界的运行:
| init(): void | Initialize the physics engine |
| update(): void | Update the physical system, needs to be called in the loop body |
| gravity: Vecter3 | Gravity parameter |
| isStop: boolean | Control whether the physical world is running or paused |
| world: Ammo.btDiscreteDynamicsWorld | Native physical world in ammo.js |

## Running the Physics Environment
We can initialize the Physics to start the physical system, and run the physical world by calling `Physics.update()` in the main loop:
```ts
import { Engine3D } from '@orillusion/core'
import { Physics } from '@orillusion/physics'
Expand All @@ -47,37 +47,37 @@ loop() {
}
}
```
通过以上方法开启并运行物理系统后,引擎会在每一帧渲染时,根据设定的参数计算并更新物体模型对物理世界的实际响应。
After opening and running the physical system with the above method, the engine will calculate and update the actual response of the object model to the physical world based on the set parameters for rendering each frame.

在一些项目中通常会有暂停物理世界模拟的需求,因此我们提供了一个参数可以暂停&恢复物理世界的运行:
In some projects, there is usually a need to pause the physical world simulation, so we provide a parameter to pause and resume the physical world operation:
```ts
Physics.isStop = !Physics.isStop;
```

## 重力环境模拟
目前引擎中默认的重力参数为 `Vector3(0, -9.8, 0)`,模拟的是地球的重力。如果需要自定义重力参数的话,只需更改 `Physics.gravity` 属性即可,不过切记需要在初始化之前更改,否则无法生效。
## Gravity Simulation
Currently, the default gravity parameter in the engine is `Vector3(0, -9.8, 0)`, simulating the gravity of the earth. If you need to customize the gravity parameter, simply change the `Physics.gravity` property, but remember to change it before initialization, otherwise it will not take effect.

例如,如果需要模拟太空中的无重力环境,则在初始化前更改 `gravity` 参数为:
For example, if you want to simulate zero gravity in space, change the `gravity` parameter before initialization:
```ts
Physics.gravity = new Vector3(0,0,0);
await Physics.init();
```
即可。请注意,需要在物理系统初始化前更改才能生效。
Please note that it needs to be changed before the initialization of the physical system to take effect.

## 扩展
此外,用户可以通过以下代码来获取 `ammo.js`原生的物理世界,通过 `ammo.js` 自身提供的api 实现更多自定化需求:
## Extension
In addition, users can use the following code to obtain the native physical world of `ammo.js`and implement more customization requirements through the api provided by `ammo.js` itself:
```bash
let world: Ammo.btDiscreteDynamicsWorld = Physics.world;
```

## 物体落地的简单示例
这里我们通过模拟一个正方体掉落在地上的过程,看一下物理系统具体可以提供哪下效果。
## Simple Example of Object Landing
Here, we simulate the process of a cube falling on the ground to see what specific effects the physics system can provide.

<Demo src="/demos/physics/demo1.ts"></Demo>

<<< @/public/demos/physics/demo1.ts

依照前面章节所介绍的流程,我们首先将场景、相机、环境贴图、光照等基础组件初始化并设定好参数。
Following the process described in the previous chapters, we first initialize and set the parameters for basic components such as the scene, camera, environment map, and lighting.
```ts
let scene3D = new Scene3D();
let cameraObj = new Object3D();
Expand All @@ -97,7 +97,7 @@ component.intensity = 0.1;
scene3D.addChild(light);
```

接下来,我们创建一个立方体,并为其添加刚体与碰撞体组件,使之拥有质量并能正确响应重力与碰撞。
Next, we create a cube and add rigid body and collider components to it, so that it has mass and can correctly respond to gravity and collisions.
```ts
const obj = new Object3D();
let mr = obj.addComponent(MeshRenderer);
Expand All @@ -113,7 +113,7 @@ collider.shape.size = new Vector3(5, 5, 5);
scene3D.addChild(obj);
```

之后,我们在正方体下方创建一个平面,作为地面,同样为其添加刚体与碰撞体组件。由于地面是静止的,所以我们设置其质量为0。
Then, we create a plane below the cube as the ground and also add rigid body and collider components to it. Since the ground is stationary, we set its mass to 0.
```ts
const obj = new Object3D();
let mr = obj.addComponent(MeshRenderer);
Expand All @@ -129,4 +129,4 @@ collider.shape.size = new Vector3(size.x, 0.1, size.y);
scene.addChild(obj);
```

物理系统启动后,引擎立即根据物体质量响应其重力感应,所以我们将看到立方体从空中掉落的画面。由于我们设置了碰撞体组件,当立方体和地面的碰撞体形状产生交集时,即响应碰撞。在示例中我们可以看到真实的物体落地碰撞效果。
Once the physics system is started, the engine immediately responds to the object's gravity based on its mass. Therefore, we will see the cube falling from the air. Since we have set up collider components, the collision is detected when the cube and ground collider shapes intersect. In the example, we can see the realistic collision effect when the cube hits the ground.
34 changes: 17 additions & 17 deletions docs/guide/physics/collider.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# 碰撞体
碰撞体定义物体响应碰撞的实际物理性状,通常在渲染层是不可见的。通过碰撞体组件的设定,物理系统可以判定两个物体是否相交,从而产生碰撞效果。
# Collider
Collider defines the actual physical characteristics of an object's response to collisions, which is typically invisible at the rendering layer. By setting the Collider component, the physical system can determine whether two objects intersect, resulting in a collision effect.

## 碰撞体组件概览
我们封装了以下几个常见的碰撞体形状类型,方便用户使用:
## Overview of Collider Components
We have encapsulated the following common types of collider shapes for user convenience:

1. 盒型碰撞体
1. Box Collider

![Box Collider](/images/cube.webp)

Expand All @@ -17,11 +17,11 @@ collider.shape = new BoxColliderShape();
// set shape parameters...
collider.shape.size = new Vector3(2, 2, 2);
```
| 参数 | 类型 | 描述 |
| Parameter | Type | Description |
| --- | --- | --- |
| size | Vecter3 | 盒型碰撞体的大小。默认以物体中心为长方体中心,通过新建Vecter3实例分别指定长方体沿x、y、z坐标轴的长度大小 |
| size | Vecter3 | The size of the box collider. By default, the center of the box is at the object's center, and the length of the box is specified by creating a new instance of Vector3 and setting the length along the x, y, and z axes respectively. |

2. 球形碰撞体
2. Sphere Collider

![Sphere Collider](/images/sphere.webp)

Expand All @@ -34,11 +34,11 @@ collider.shape = new SphereColliderShape();
// set shape parameters...
collider.radius = 5;
```
| 参数 | 类型 | 描述 |
| Parameter | Type | Description |
| --- | --- | --- |
| radius | number | 球形碰撞体的半径。默认以物体中心为球体中心 |
| radius | number | The radius of the sphere collider. By default, the center of the sphere is at the object's center. |

3. 胶囊碰撞体
3. Capsule Collider

![Capsule Collider](/images/capsule.webp)

Expand All @@ -52,14 +52,14 @@ collider.shape = new CapsuleColliderShape();
collider.radius = 2.5;
collider.height = 10;
```
| 参数 | 类型 | 描述 |
| Parameter | Type | Description |
| --- | --- | --- |
| radius | number | 胶囊碰撞体上下半球体的半径 |
| height | number | 胶囊碰撞体的高度,默认以物体中心为胶囊体中心 |
| radius | number | The radius of the upper or lower half-sphere of the capsule collider. |
| height | number | The height of the capsule collider. By default, the center of the capsule is at the object's center. |


## 碰撞体组件应用示例
在为对象添加了刚体组件后,我们再为它添加一个碰撞体,并指定碰撞体的形状类型,便可以让该对象响应碰撞了:
## Example of Applying Collider Components
After adding a Rigidbody component to an object, we can add a collider and specify the shape type of the collider to make the object respond to collisions:
```ts
import { Vecter3D, Object3D } from '@orillusion/core'
import { BoxColliderShape, Rigidbody } from '@orillusion/physics'
Expand All @@ -71,7 +71,7 @@ collider.shape = new BoxColliderShape();
collider.shape.size = new Vector3(2, 2, 2);
```

利用碰撞组件,我们可以模拟出逼真的物理效果,下面我们通过展示一个更复杂的示例,进一步了解物理系统可以实现的效果。
By using collider components, we can simulate realistic physical effects. The following example demonstrates a more complex scenario to further understand the effects that can be achieved through the physical system.

<Demo src="/demos/physics/demo2.ts"></Demo>

Expand Down
14 changes: 7 additions & 7 deletions docs/guide/physics/rigidbody.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# 刚体
刚体是指在受到外力后自身形变可以忽略的物体。尽管理想刚体不可能真实存在,但在速度远小于光速的条件下,许多硬质物体通常都可以假定为完美刚体。根据刚体的特性,引擎物理系统可以模拟真实世界中物体的运动、碰撞逻辑,使之产生逼真的动画效果。
# Rigid Body
A rigid body is an object whose own deformation can be neglected after being subjected to external forces. Although ideal rigid bodies cannot exist in reality, many hard objects can be assumed to be perfect rigid bodies under the condition of speeds much smaller than the speed of light. Based on the characteristics of rigid bodies, the physics system of the engine can simulate the motion and collision logic of objects in the real world, creating realistic animation effects.

刚体是引擎物理系统中的重要组件,连接刚体后,我们即可以使模型对象像真实世界的物体一样,拥有质量,并响应重力。为了方便用户使用,我们封装了刚体组件 [Rigidbody](/physics/classes/Rigidbody),通过添加组件的方式,即可为对象添加刚体:
The rigid body is an important component in the engine's physics system. After connecting a rigid body, we can make the model object have mass and respond to gravity like a real-world object. For user convenience, we have encapsulated the rigid body component [Rigidbody](/physics/classes/Rigidbody). By adding the component, the rigid body can be added to the object:
```ts
import { Object3D } from '@orillusion/core'
import { Rigidbody } from '@orillusion/physics'
Expand All @@ -10,20 +10,20 @@ let object = new Object3D();
let rigidbody = object.addComponent(Rigidbody);
```

为刚体设置质量(单位:kg):
Set the mass (unit: kg) for the rigid body:
```ts
rigidbody.mass = 50;
```

如果需要静态刚体,则设置mass为0即可实现:
If a static rigid body is required, set the mass to 0:

```ts
rigidbody.mass = 0;
```

如果想要操作原生的ammo.js的刚体,可以通过下面方式来获取:
If you want to manipulate the native ammo.js rigid body, you can get it through the following method:
```ts
let bt = rigidbody.btRigidbody;
```

添加刚体后,需要为继续物体添加碰撞体,才能使物体正确响应重力与碰撞。碰撞体组件 [Collider](/guide/physics/collider) 详细内容将会在下一节为大家介绍。
After adding the rigid body, you need to add a collider to the object to enable the object to respond to gravity and collisions correctly. The details of the collider component [Collider](/guide/physics/collider) will be introduced in the next section.