# River组件
使用River组件可以创建河流，由 @tx3d/extension 包提供。
创建河流需要用到流向图，可以使用FlowMapPainter软件生成流向图，也可以使用Tx3d内置函数生成流向图。
使用FlowMapPainter软件生成流向图
import { Vector4 } from 'three';
import { DirectionalLight } from '@tx3d/core';
import { River, createflowMap } from '@tx3d/extension';
// 构建参数
const parameters = {
sunDirection: scene.getComponent(DirectionalLight).position,
sunColor: 0xf0e3cc,
sunIntensity: 2,
width: 25, // 网格分辨率
height: 25,
textureWidth: 1024,
textureHeight: 1024,
foamBlendMaskUrl: '../assets/textures/water/DefaultFoamRamp.tif',
foamUrl: '../assets/textures/water/WaterFoam.png',
flowMapUrl: '../assets/textures/water/flowmap.png', // FlowMapPainter创建出来的流向图
normalUrl0: '../assets/textures/water/Water_1_M_Normal.jpg',
normalUrl1: '../assets/textures/water/Water_2_M_Normal.jpg',
color: 0xffffff,
reflectivity: 0.05,
flowScale: 47,
normalScale: 8,
flowSpeed: 0.06,
bumpScale: 0.01,
foamConfig1: new Vector4(4.0, 0.5, 2, 0.25),
foamConfig2: new Vector4(100, 1.5, 0.1, 1.0),
};
// 创建实体
const entity = engine.createEntity( { transform: { position: [ 0, 0, 0 ] } } );
// 添加水渲染组件
const river = entity.addComponent( River, 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
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
使用内置方法生成流向图
import { Vector4 } from 'three';
import { DirectionalLight } from '@tx3d/core';
import { River } from '@tx3d/extension';
const path = [
[
[ -7.342410905503164, 9.020000904982176 ],
[ -5.11294175353435, 5.550012855542032 ],
[ -1.422920017805967, 3.9291565917905635 ],
[ 1.7060426914073563, 4.907872078339285 ],
[ 4.5155372424143705, 2.490321791483012 ],
[ 3.339733806588791, -2.438663112914874 ],
[ 0.11211605104723307, -6.477211446958321 ],
[ -2.5488353982939334, -9.09040960675759 ],
[ -5.057049936311335, -10.472721119707993 ]
],
[
[ 0.11211605104723307, -6.477211446958321 ],
[ -2.6934266724833713, -4.171502886953544 ],
[ -0.8192915742131197, -1.8256858758208792 ],
[ 0.03357094514390965, 0.5326929738463128 ],
[ -4.535821292090578, 1.4028354758489452 ],
[ -8.35776189792703, 4.552835899813645 ]
]
];
const waterWidth = 25;
const waterHeight = 25;
const width = 1024;
const height = 1024;
const pathWidth = 40; // 像素宽
const divisions = 50;
// 根据自定义路径创建流向图
const flowMap = createflowMap( path, divisions, pathWidth, width, height, waterWidth, waterHeight );
// 构建参数
const parameters = {
sunDirection: scene.getComponent( DirectionalLight ).position,
sunColor: 0xf0e3cc,
sunIntensity: 2,
width: waterWidth, // 网格分辨率
height: waterHeight,
textureWidth: 1024,
textureHeight: 1024,
foamBlendMaskUrl: '../assets/textures/water/DefaultFoamRamp.tif',
foamUrl: '../assets/textures/water/WaterFoam.png',
// flowMapUrl: '../assets/textures/water/flowmap.png',
flowMap: flowMap, // 赋值流向图
normalUrl0: '../assets/textures/water/Water_1_M_Normal.jpg',
normalUrl1: '../assets/textures/water/Water_2_M_Normal.jpg',
color: 0xffffff,
reflectivity: 0.05,
flowScale: 1,
normalScale: 8,
flowSpeed: 0.06,
bumpScale: 0.01,
foamConfig1: new Vector4( 4.0, 0.5, 2, 0.25 ),
foamConfig2: new Vector4( 100, 1.5, 0.1, 1.0 ),
};
// 创建实体
const entity = engine.createEntity( { transform: { position: [ 0, 0, 0 ] } } );
// 添加河流渲染组件
const river = entity.addComponent( River, 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
提示
River组件初始化参数，详见RiverParameters。
# 属性
🌏 color 水流颜色
//set
river.color = 0xffffff;
1
2
2
🌏 reflectivity 水面折射率
//set
river.reflectivity = 0.05;
1
2
2
🌏 normalScale 水面法线图缩放
//set
river.normalScale = 1;
1
2
2
🌏 flowScale 水流图方向强度
//set
river.flowScale = 1;
1
2
2
🌏 flowSpeed 水流流动速度
//set
river.flowSpeed = 0.1;
1
2
2
🌏 bumpScale 水底扰动强度
//set
river.bumpScale = 0.25;
1
2
2
🌏 sunDirection 太阳方向
//set
river.sunDirection = [1,1,1];
1
2
2
🌏 sunColor 太阳颜色
//set
river.sunColor = 0xEED8AE;
1
2
2
🌏 sunIntensity 太阳强度
//set
river.sunIntensity = 4;
1
2
2