# Sky组件
Sky组件用于创建动态天空，由 @tx3d/extension 包提供。
提示
动态天空是指,随着时间和地理位置的变化而变化的天空系统。
import { Color, Vector2, Vector4 } from 'three';
import { AmbientLight, DirectionalLight } from '@tx3d/core';
import { Sky } from '@tx3d/extension';
// 创建场景实体
const scene = engine.createScene();
// 为场景添加一个环境光组件
const ambientLight = scene.addComponent( AmbientLight, {
color: '#ffffff',
intensity: 0.5
} );
// 为场景添加一个方向光组件
const directionalLight = scene.addComponent( DirectionalLight, {
position: [ 100, 100, 100 ],
color: '#ffffff',
intensity: 1.0
} );
// 设置激活场景
engine.setActiveScene( scene );
// 创建实体
const entity = engine.createEntity( { transform: { position: [ 0, 0, 0 ] } } );
const options = {
radius: 10000.0, // 天空穹半径
currentTime: new Date("January 1, 2023 8:00:00"),
sunriseTime: 5.0, // 日出时间
sunsetTime: 19.0, // 日落时间
// lng: 116, // 北京lng: 116, lat: 39, // 海口lng: 110, lat: 19,
// lat: 39,
ambientLight: ambientLight,
directionalLight: directionalLight,
weather: 'sunny', // 天气类型 如果是custom 则使用下面参数 可以自由修改数值 如果是其他类型天气 则根据配置文件 目前只有sunny
/**----------------------------------------下面是 custom类型 自定义参数------------------------------------------*/
// weather: 'custom',
topColor: new Color('rgb(0,118,212)'),
middleColor: new Color('rgb(102,172,244)'),
bottomColor: new Color('rgb(120,198,234)'),
middleHeight: 0.423,
horizonHeight: 0.7,
sunSize: 9,
sunColor: new Color(4, 4, 4),
sunGlowColor: new Color(2, 2, 2),
sunIntensity: 1.0,
sunGlowRadius: 0.2,
moonSize: 9,
moonTex: '../assets/textures/skyDome/moon.tga',
moonColor: new Color('rgb(255,255,255)'),
moonGlowColor: new Color('rgb(15,175,255)'),
moonGlowRadius: 0,
moonIntensity: 1,
starTex: '../assets/textures/skyDome/star.tga',
starTexST: new Vector4(6, 3, 0, 0),
starIntensity: 0,
starReduceValue: 0.2,
// 云参数
cloudSpeed: new Vector2(0.003, 0.003),
cloudColor: new Color('rgb(156,223,254)'),
cloudSize: 1.0,
cloudDetailSize: 12.0,
cloudDetailIntensityFew: 3.0,
cloudDetailIntensity: 0.15,
cloudEdgeSoftUnevenTexSize: 2.0,
cloudEdgeSoftMin: 0.01,
cloudEdgeSoftMax: 0.1,
cloudFillMin: -0.5,
cloudFillMax: 0,
cloudFill: 0.3,
cloudRimEdgeSoft: 0.3,
cloudRimColor: new Color(1.414214, 1.414214, 1.414214),
cloudLightColor: new Color(2, 2, 2),
cloudLightUVOffset: 0.025,
cloudLightRadius: 1.0,
cloudLightRadiusIntensity: 1.0,
cloudLightIntensity: 1.0,
cloudSSSRadius: 0.1,
cloudSSSIntensity: 1.0,
cloudHorizonSoft: 0.3,
};
// 添加天空穹顶组件, 经纬度：北纬正，南纬负，东经正，西经负
const skydome = entity.addComponent(Sky, options);
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
提示
Sky组件初始化参数，详见SkyParameters。
# 关键参数设置
# 日出日落时间设置
1️⃣ 通过" sunriseTime "和" sunsetTime "参数指定
{
sunriseTime: 5.0, // 5点日出
sunsetTime: 19.0 // 19点日落
}
1
2
3
4
2
3
4
2️⃣ 通过指定经纬度坐标结合当前时间自动计算日出和日落时间
// 北京经纬度坐标
{
lng: 116.0,
lat: 39.0
}
1
2
3
4
5
2
3
4
5
注意
如果同时设置日出日落时间和经纬度坐标，会优先使用经纬度坐标计算日出日落时间。
# 天气效果设置
{
ambientLight: ambientLight, // 环境光（可选）
directionalLight: directionalLight, // 方向光（用于表示太阳光和月光）
weather: 'sunny' // 天气类型
}
1
2
3
4
5
2
3
4
5
提示
1️⃣天空组件会根据当前时间动态调整环境光和方向光的强度和颜色。
2️⃣ weather 表示当前天气情况，可以使用内置的配置（目前只有"sunny"一个配置，后续会扩充），可以自定义配置（即设置为"custom"），如下所示：
{
weather: 'custom',
topColor: new Color('rgb(0,118,212)'),
middleColor: new Color('rgb(102,172,244)'),
bottomColor: new Color('rgb(120,198,234)'),
middleHeight: 0.423,
horizonHeight: 0.7,
sunSize: 9,
sunColor: new Color(4, 4, 4),
sunGlowColor: new Color(2, 2, 2),
sunIntensity: 1.0,
sunGlowRadius: 0.2,
moonSize: 9,
moonTex: '../assets/textures/skyDome/moon.tga',
moonColor: new Color('rgb(255,255,255)'),
moonGlowColor: new Color('rgb(15,175,255)'),
moonGlowRadius: 0,
moonIntensity: 1,
starTex: '../assets/textures/skyDome/star.tga',
starTexST: new Vector4(6, 3, 0, 0),
starIntensity: 0,
starReduceValue: 0.2,
// 云参数
cloudSpeed: new Vector2(0.003, 0.003),
cloudColor: new Color('rgb(156,223,254)'),
cloudSize: 1.0,
cloudDetailSize: 12.0,
cloudDetailIntensityFew: 3.0,
cloudDetailIntensity: 0.15,
cloudEdgeSoftUnevenTexSize: 2.0,
cloudEdgeSoftMin: 0.01,
cloudEdgeSoftMax: 0.1,
cloudFillMin: -0.5,
cloudFillMax: 0,
cloudFill: 0.3,
cloudRimEdgeSoft: 0.3,
cloudRimColor: new Color(1.414214, 1.414214, 1.414214),
cloudLightColor: new Color(2, 2, 2),
cloudLightUVOffset: 0.025,
cloudLightRadius: 1.0,
cloudLightRadiusIntensity: 1.0,
cloudLightIntensity: 1.0,
cloudSSSRadius: 0.1,
cloudSSSIntensity: 1.0,
cloudHorizonSoft: 0.3,
};
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
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
# 属性
🌏currentTime 设置当前时间
// 获取天空穹顶当前时间
const currentTime = skydome.currentTime;
// 设置天空穹顶当前时间
skydome.currentTime = new Date( "August 1, 2020 11:00:00" );
1
2
3
4
5
2
3
4
5