# PoolWater组件
使用PoolWater组件可以创建水面，由 @tx3d/extension 包提供。
import { Vector3, Vector4 } from 'three';
import { DirectionalLight } from '@tx3d/core';
import { PoolWater } from '@tx3d/extension';
// 构建参数
const parameters = {
sunDirection: scene.getComponent( DirectionalLight ).position,
sunColor: 0xf0e3cc,
sunIntensity: 2,
textureWidth: 1024,
textureHeight: 1024,
foamBlendMaskUrl: '../assets/textures/water/DefaultFoamRamp.tif',
foamUrl: '../assets/textures/water/WaterFoam.png',
color: 0xffffff,
reflectivity: 0.05,
bumpScale: 0.015,
flowX: 1,
flowY: 1,
waterSpeed: 0.028,
waterSize: 0.396,
waterHeight: 0.53,
waterResolution: 3.47,
waterDensity: 0.47,
waterWaveCount: 9,
foamConfig1: new Vector4(7.8, 0.5, 2, 0.68),
foamConfig2: new Vector4(100, 5.6, 0.1, 1.0),
};
parameters.areaPath = [
new Vector3(-8.327271929657218, 0, -4.759671355105253),
new Vector3(-0.21421572192493255, 0, -4.754308313260217),
new Vector3(0.04063103124651213, 0, -4.357360460927474),
new Vector3(-0.04105150203214819, 0, -1.4313994290459977),
new Vector3(9.940295954868187, 0, 0.13580920154550358),
new Vector3(9.406910089957066, 0, 3.001552198927969),
new Vector3(-0.25466454549992623, 0, 1.4686807018405719),
new Vector3(-8.197516425047223, 0, 1.3927670199174744),
new Vector3(-8.50183701128626, 0, 1.2448881684000122),
new Vector3(-8.408970527618354, 0, -4.684544230540713),
new Vector3(-8.255202417340097, 0, -4.927224364659167)
];
// 创建实体
const entity = engine.createEntity( { transform: { position: [0, 0, 0] } } );
// 添加水渲染组件
const pool = entity.addComponent( PoolWater, parameters );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
提示
PoolWater组件初始化参数，详见PoolWaterParameters。
# 属性
🌏 color 水面颜色
// 获取水面颜色
const color = pool.color;
// 设置水面颜色
pool.color = 0xffffff;
1
2
3
4
5
2
3
4
5
🌏 reflectivity 水面折射率
// 获取水面折射率
const reflectivity = pool.reflectivity;
// 设置水面折射率
pool.reflectivity = 0.05;
1
2
3
4
5
2
3
4
5
🌏 bumpScale 水底扰动强度
// 获取水底扰动强度
const bumpScale = pool.bumpScale;
// 设置水底扰动强度
pool.bumpScale = 0.25;
1
2
3
4
5
2
3
4
5
🌏 sunDirection 太阳方向
// 设置太阳方向
pool.sunDirection = [ 1, 1, 1 ];
1
2
2
🌏 sunColor 太阳颜色
// 获取太阳颜色
const sunColor = pool.sunColor;
// 设置太阳颜色
pool.sunColor = 0xEED8AE;
1
2
3
4
5
2
3
4
5
🌏 sunIntensity 太阳强度
// 获取太阳强度
const sunIntensity = pool.sunIntensity;
// 设置太阳强度
pool.sunIntensity = 4;
1
2
3
4
5
2
3
4
5
🌏 flowX 水面X流向
// 设置水面X方向
pool.flowX = 1;
1
2
2
🌏 flowY 水面Y流向
// 设置水面Y流向
pool.flowY = 1;
1
2
2
🌏 waterSpeed 水面水波流速
// 设置水面水波流速
pool.waterSpeed = 0.028;
1
2
2
🌏 waterSize 水波大小
// 设置水波大小
pool.waterSize = 0.396;
1
2
2
🌏 waterHeight 水波高度
// 设置水波高度
pool.waterHeight = 0.53;
1
2
2
🌏 waterResolution 水波分辨率
// 设置水波分
pool.waterResolution = 3.47;
1
2
2
🌏 waterDensity 水波密度
// 设置水波密度
pool.waterDensity = 0.47;
1
2
2
🌏 waterWaveCount 水波叠加数量
// 设置水波叠加数量
pool.waterWaveCount = 9;
1
2
2