# Heatmap3D组件
使用Heatmap3D组件可以为实体添加三维热力图。
import { MathUtils } from 'three';
import { Heatmap3D } from '@tx3d/core';
// 构建参数
const parameters = {
featurePoints: [],
valueColor: [
{ value: 0.0, color: 'rgba(0, 0, 0, 0)' },
{ value: 0.1, color: '#92cdff' },
{ value: 0.5, color: '#2c7bb6' },
{ value: 0.65, color: '#abd9e9' },
{ value: 0.7, color: '#ffffbf' },
{ value: 0.9, color: '#fde468' },
{ value: 1.0, color: '#d7191c' }
],
radius: 200, // 数据代表的半径
maxHeight: 80, // 数据代表的最大高度
resolution: 1, // 渲染的质量
};
// 随机生成特征点
for (let i = 0; i < 1000; i++) {
const x = MathUtils.randFloat(-1000.0, 1000.0);
const z = MathUtils.randFloat(-1000.0, 1000.0);
const v = MathUtils.randFloat(0.0, 1.0);
parameters.featurePoints.push( { point: [ x, z ], value: v } );
};
// 创建实体
const entity = engine.createEntity( { transform: { position: [ 0, 0, 0 ] } } );
// 添加热力图渲染组件
const Heatmap3D = entity.addComponent( Heatmap3D, 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
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
提示
Heatmap3D组件初始化参数，详见Heatmap3DParameters。
# 属性
🌏 opacity 透明度
// 设置透明度
Heatmap3D.opacity = 0.75;
1
2
2
🌏 radius 数据代表的范围
// 设置范围
Heatmap3D.radius = 100;
1
2
2
🌏 maxHeight 数据代表的最大高度
// 设置最大高度
Heatmap3D.maxHeight = 100;
1
2
2