# WaterPolygon组件

使用WaterPolygon组件可以创建多边形表面水块，由 @tx3d/extension 包提供。

import { Shape } from 'three';
import { WaterPolygon } from '@tx3d/extension';

let x = 0, y = 0;
const heartShape = new Shape()
    .moveTo(x + 2.5, y + 2.5)
    .bezierCurveTo(x + 2.5, y + 2.5, x + 2.0, y, x, y)
    .bezierCurveTo(x - 3.0, y, x - 3.0, y + 3.5, x - 3.0, y + 3.5)
    .bezierCurveTo(x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5)
    .bezierCurveTo(x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5)
    .bezierCurveTo(x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y)
    .bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

let polygonPoints = heartShape.extractPoints(50).shape;

 // 构建参数
const parameters = {

    polygonPoints: polygonPoints,
    resolutionScale: 10, // 网格精细度

    height: 2,  // 高度 Y轴方向
    usePoint: true, //是否启用水面点 默认值是ture
    pointShapeUrl: "./assets/textures/water/point.png",
    pointDensity: 4,
    pointColor: 0x51BBE4,

    topColorContrast: 0.85,
    topColor: 0x0d5c97,
    sideTopColor: 0x0d5c97,
    sideBottomColor: 0x3C7693,
    topOpacity: 0.6,
    sideOpacity: 0.5,

    timeSpeed: 0.5,
    amplitude: 0.45,
    direction: -177,
    wavelength: 5,
    wavepeak: 0,
    wavecount: 8,
    isRenderBottom: false

};
     
// 创建实体
const entity = engine.createEntity({ transform: { position: [0.0, 0, 15.0] } });

// 添加水柱渲染组件
const water = entity.addComponent(WaterPolygon, 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

提示

WaterPolygon组件初始化参数，详见WaterPolygonParameters。

# 属性

🌏 height 水面高度
代表从0点坐标向上的距离负值代表向下

water.height = 1;

🌏 pointDensity 水面点密度

water.pointDensity = 4;

🌏 pointColor 水面点颜色

water.pointColor = 0xfe9090;

🌏 topColorContrast 水面颜色对比度

water.topColorContrast = 0.85;

🌏 topColor 水面颜色

water.topColor = 0xbe4341;

🌏 sideTopColor 侧面顶部颜色

water.sideTopColor = 0xbe4341;

🌏 sideBottomColor 侧面底部颜色

water.sideBottomColor = 0x1487b8;

🌏 topOpacity 水面透明度

water.topOpacity = 0.6;

🌏 sideOpacity 侧面透明度

water.sideOpacity = 0.5;

🌏 timeSpeed 水波波动速度

water.timeSpeed = 0.5;

🌏 amplitude 水波高度

water.amplitude = 0.45;

🌏 direction 水波方向

water.direction = -177;

🌏 wavelength 水波波长

water.wavelength = 5;

🌏 wavepeak 水波尖锐度

water.wavepeak = 1.5;

1
2

🌏 wavecount 水波叠加数量

water.wavecount = 8;

← WaterCylinder组件 WaterFlowEffect组件 →