mirror of
https://github.com/WhitestormJS/whs.js.git
synced 2026-01-18 16:03:24 +00:00
100 lines
3.1 KiB
Markdown
100 lines
3.1 KiB
Markdown
# 3D transforms
|
|
|
|
|
|
### `.position`
|
|
|
|
> Used in: `MeshComponent`, `LightComponent`, `CameraComponent`
|
|
|
|
**position** is a 3D vector ([`THREE.Vector3`](https://threejs.org/docs/index.html#api/math/Vector3)) object that defines where mesh is located in space.
|
|
|
|
```js
|
|
ball.position.set(10, 20, 45);
|
|
|
|
ball.position.x // -> 10
|
|
ball.position.y // -> 20
|
|
ball.position.z // -> 45
|
|
```
|
|
|
|
#### Modifying values and methods
|
|
|
|
That's several examples of how you can modify positon:
|
|
|
|
- `ball.position.set( x, y, z )`
|
|
- `ball.position.setX( x )`, (`.setX()`, `.setY()`, `.setZ()` methods).
|
|
- `ball.position = new THREE.Vector3( x, y, z )`
|
|
|
|
There are a lot of other methods that `.position` handles as a `THREE.Vector3`. You may see the [list of methods](https://threejs.org/docs/index.html#api/math/Vector3.set) at Three.js documentation.
|
|
|
|
### `.rotation`
|
|
|
|
> Used in: `MeshComponent`, `LightComponent`, `CameraComponent`
|
|
|
|
**rotation** is a [`THREE.Euler`](https://threejs.org/docs/index.html#api/math/Euler) with _x, y and z_ values and has almost same methods as a `.position`. It defines a rotation regarding object position.
|
|
|
|
#### Modifying values and methods
|
|
|
|
Commonly used:
|
|
|
|
- `ball.rotation.set( x, y, z )`
|
|
- `ball.rotation.setX( x )`, (`.setX()`, `.setY()`, `.setZ()` methods).
|
|
- `ball.rotation = new THREE.Euler( x, y, z )`
|
|
|
|
See [list of THREE.Euler methods](https://threejs.org/docs/index.html#api/math/Euler.set) at Three.js documentation.
|
|
|
|
> `.rotation` will be converted to a _quaternion_ and applied to it's physics object linked to the component. (Only if you use a Physics version [Todo: add link]).
|
|
|
|
## `.quaternion`
|
|
|
|
> Used in: `MeshComponent`, `LightComponent`, `CameraComponent`
|
|
|
|
**quaternion**, [`THREE.Quaternion`](https://threejs.org/docs/#api/math/Quaternion) is another way to rotate 3D object in space. It has _x, y, z and w_ values.
|
|
|
|
```js
|
|
// Convert euler to quaternion.
|
|
ball.quaternion.setFromEuler(new THREE.Euler(Math.PI / 2, 0, 0));
|
|
// Set values.
|
|
ball.quaternion.set(10, 20, 45, 60);
|
|
|
|
ball.quaternion.x // -> 10
|
|
ball.quaternion.y // -> 20
|
|
ball.quaternion.z // -> 45
|
|
ball.quaternion.w // -> 60
|
|
```
|
|
|
|
#### Modifying values and methods
|
|
|
|
Commonly used:
|
|
|
|
- `ball.quaternion.set( x, y, z, w )`
|
|
- `ball.quaternion.setX( x )`, (`.setX()`, `.setY()`, `.setZ()`, `.setW()` methods).
|
|
- `ball.quaternion = new THREE.Quaternion( x, y, z, w )`
|
|
- `ball.quaternion.setFromEuler(new THREE.Euler( x, y, z ))`
|
|
|
|
See [list of THREE.Quaternion methods](https://threejs.org/docs/#api/math/Quaternion.set) at Three.js documentation.
|
|
|
|
## `.scale`
|
|
|
|
> Used in: `MeshComponent`
|
|
|
|
**scale**, [`THREE.Vector3`](https://threejs.org/docs/index.html#api/math/Vector3) is a vector that defines mesh scale.
|
|
|
|
```js
|
|
ball.scale.set(2, 2, 2)
|
|
|
|
ball.scale.x // -> 2
|
|
ball.scale.y // -> 2
|
|
ball.scale.z // -> 2
|
|
```
|
|
|
|
#### Modifying values and methods
|
|
|
|
Commonly used:
|
|
|
|
- `ball.scale.set( x, y, z )`
|
|
- `ball.scale.setX( x )`, (`.setX()`, `.setY()`, `.setZ()` methods).
|
|
- `ball.scale= new THREE.Vector3( x, y, z )`
|
|
|
|
See [list of THREE.Vector3 methods](https://threejs.org/docs/index.html#api/math/Vector3.set) at Three.js documentation.
|
|
|
|
[> Usage with webpack](Usage%20with%20webpack.md)
|