# Ocean组件

使用Ocean组件可以创建海洋，由 @tx3d/extension 包提供。


import { DirectionalLight } from '@tx3d/core';
import { Ocean } from '@tx3d/extension';

 // 构建参数
const parameters = {

    geometryResolution: 512, // 网格分辨率

    surfaceUrl: '../assets/textures/water/WaterSurface_single.tif',
    foamBlendMaskUrl: '../assets/textures/water/DefaultFoamRamp.tif',
    foamUrl: '../assets/textures/water/WaterFoam.png',

    absorptionColor: [

        { value: 0.0, color: 'white' },
        { value: 0.007, color: 'rgb(207,255,255)' },
        { value: 0.036, color: 'rgb(34,221,221)' },
        { value: 0.258, color: 'rgb(6,125,130)' },
        { value: 0.527, color: 'rgb(0,70,112)' },
        { value: 1.0, color: 'black' }

    ],

    scatteringColor: [

        { value: 0.0, color: 'rgb(47,60,56)' },
        { value: 0.329, color: 'rgb(60,123,122)' },
        { value: 1.0, color: 'rgb(30,107,123)' }

    ],

    sunDirection: [ 1,1,1 ],
    sunColor: 0xEED8AE,
    sunIntensity: 4,
    maxDepth: 20,
    bumpScale: 0.25,
    reflectivity: 0.02,
    smoothNormalDistance: 200,
    amplitude: 0.45,
    direction: -177,
    wavelength: 5

};

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

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

提示

Ocean组件初始化参数，详见OceanParameters。

# 属性

🌏 sunDirection 太阳方向

//set
ocean.sunDirection = [1,1,1];

1
2

🌏 sunColor 太阳颜色

//set
ocean.sunColor = 0xEED8AE;

1
2

🌏 sunIntensity 太阳强度

//set
ocean.sunIntensity = 4;

1
2

🌏 smoothNormalDistance 海水扰动衰减距离

//set
ocean.smoothNormalDistance = 200;

1
2

🌏 maxDepth 可见最大水深

//set
ocean.maxDepth = 20;

1
2

🌏 bumpScale 水面扰动强度

//set
ocean.bumpScale = 0.25;

1
2

🌏 reflectivity 折射系数

//set
ocean.reflectivity = 0.02;

1
2

🌏 amplitude 波动高度

//set
ocean.amplitude = 0.45;

1
2

🌏 direction 水面方向

//set
ocean.direction = -177;

1
2

🌏 wavelength 水面波长

//set
ocean.wavelength = 5;

1
2

# 接口

🌏 showAbsorptionScatteringRamp 显示折射散射图

ocean.showAbsorptionScatteringRamp();

← MeshRenderer组件 Panel组件 →