# Sky组件
Sky组件用于创建动态天空，由 @tx3d/extension 包提供。
提示
动态天空是指,随着时间和地理位置的变化而变化的天空系统。
import { Color, Vector2, Vector4 } from 'three';
import { AmbientLight, DirectionalLight } from '@tx3d/core';
import { Sky, SkyController } from '@tx3d/extension';
// 创建场景实体
const scene = engine.createScene();
// 为场景添加一个环境光组件
const ambientLight = scene.addComponent( AmbientLight, {
color: '#ffffff',
intensity: 0.5
} );
// 为场景添加一个方向光组件
const sunLight = scene.addComponent( DirectionalLight, {
position: [ 100, 100, 100 ],
color: '#ffffff',
intensity: 1.0
} );
const moonEntity = engine.createEntity();
// 月光
const moonLight = moonEntity.addComponent(DirectionalLight, {
position: [100, 100, 100],
color: '#ffffff',
intensity: 0.0 * Math.PI
});
// 设置激活场景
engine.setActiveScene( scene );
// 开始时间
let simulatedDate = new Date("2023/08/01 11:00:00");
// 天空控制器（用于提供计算太阳、月亮等天体位置方向颜色以及同步场景中光源所需参数）
// 创建控制器
const skyController = new SkyController();
// 根据时间和经纬度获取该时刻太阳位置
const sunPos = skyController.getSunPosition( simulatedDate, longitude, latitude );
// 根据时间和经纬度获取该时刻太阳方向
const sunDirection = skyController.getSunlightDirection( simulatedDate, longitude, latitude );
// // 根据时间和经纬度获取该时刻太月光方向
const moonDirection = skyController.getMoonlightDirection( simulatedDate, longitude, latitude );
// 根据时间获取云彩相关参数
const { cloudColor, cloudRimColor, cloudLightColor, cloudLightIntensity, cloudLightRadiusIntensity, cloudSSSRadius } = skyController.getCloudParamters( simulatedDate );
// 根据太阳方向获取太阳光强度、颜色参数
const sunResults = skyController.getSunlightColorAndIntensity( sunDirection );
// 根据太阳方向获取环境光强度、颜色参数
const ambientResults = skyController.getAmbientlightColorAndIntensity( sunDirection );
// 根据时间和经纬度获取月亮位置
const moonPos = skyController.getMoonPosition( simulatedDate, longitude, latitude );
// 根据月光方向获取月亮光强度、颜色参数
const moonResults = skyController.getMoonlightColorAndIntensity( moonDirection );
// 更新场景光源
// 环境光
ambientLight.color = ambientResults.color;
ambientLight.intensity = ambientResults.intensity;
// 太阳光
sunLight.color = sunResults.color;
sunLight.intensity = sunResults.intensity;
sunLight.position = sunPos;
//月光
moonLight.color = moonResults.color;
moonLight.intensity = moonResults.intensity;
moonLight.position = moonPos;
// 添加天空组件
const skyOptions = {
// 太阳相关参数
sunOptions: {
sunlightDirection: sunDirection,
sunPosition: sunPos
},
// 月亮相关参数
moonOptions: {
moonMap: './assets/textures/skyDome/New/moon.png',
moonlightDirection: moonDirection,
moonSize: 20,
moonGlowMaxRadius: 150.0,
moonGlowMinRadius: 10.0,
moonGlowRadiusScale: 0.4,
},
// 星空相关参数
starOptions: {
starMap: './assets/textures/skyDome/New/PixelStars.png',
twinkleMap: './assets/textures/skyDome/New/NLstarsHighlight.png',
twinkleMaskMap: './assets/textures/skyDome/New/PixelStarsTwinkleMask.png'
},
// 云彩相关参数
cloudOptions: {
cloudNoiseTex1: './assets/textures/skyDome/CloudNoise01.BMP',
cloudNoiseTex2: './assets/textures/skyDome/CloudNoise02.BMP',
cloudColor,
cloudRimColor,
cloudLightColor,
cloudLightIntensity,
cloudLightRadiusIntensity,
cloudSSSRadius
},
// 眩光相关参数
flareOptions: {
flareTex1: './assets/textures/skyDome/flare000.jpg',
flareTex2: './assets/textures/skyDome/flare004.jpg',
}
};
// 创建天空
const sky = entity.addComponent(Sky, skyOptions);
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
提示
Sky组件初始化参数，详见SkyParameters。
:::
# 接口
🌏setProperties 批量更新天空属性
// 获取天空穹顶当前时间
sky.setProperties(
{
// 更新太阳信息
sunOptions: {
sunPosition: sunPos,
sunlightDirection: sunDirection
},
// 更新月亮信息
moonOptions: {
moonlightDirection: moonDirection
},
// 更新云彩信息
cloudOptions: {
cloudColor,
cloudRimColor,
cloudLightColor,
cloudLightIntensity,
cloudLightRadiusIntensity,
cloudSSSRadius
}
} )
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
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
提示
批量更新接口（setProperties）参数与初始化参数相同详见SkyParameters。