JSAPI Three API Reference
    正在准备搜索索引...

    类 WaterMaterial

    水体材质,用于模拟真实的水面效果。

    支持水下折射、岸边泡沫、菲涅耳反射、水体深度渐变、焦散等复杂水面光照效果。

    const waterMaterial = new mapvthree.WaterMaterial({
    waterColor: [0.1, 0.3, 0.8],
    foamSpeed: 0.05,
    depthSoftness: 5,
    });

    层级

    • CommonShaderMaterial
      • WaterMaterial
    索引

    构造函数

    • 构造函数

      参数

      • parameters: {
            crestFoam?: number;
            crestFoamColor?: number[];
            depthSoftness?: number;
            foamDepthSoftness?: number;
            foamScale?: number;
            foamSoftness?: number;
            foamSpeed?: number;
            offsetScale?: number;
            specularStrength?: number;
            timeScaleFactor?: number;
            useEnvMap?: boolean;
            uvScale?: number;
            waterColor?: number[];
        } = {}

        材质参数

        • 可选crestFoam?: number

          波峰泡沫判断阈值,范围0-1,默认为0.70

        • 可选crestFoamColor?: number[]

          波峰泡沫颜色,默认为[0.3, 0.3, 0.6]

        • 可选depthSoftness?: number

          水深渐变过渡,默认为5

        • 可选foamDepthSoftness?: number

          泡沫在水深维度上的衰减程度,默认为1

        • 可选foamScale?: number

          泡沫贴图缩放比例,默认为100

        • 可选foamSoftness?: number

          泡沫边缘模糊程度,默认为3

        • 可选foamSpeed?: number

          泡沫流动速度,默认为0.050

        • 可选offsetScale?: number

          波浪扰动高度偏移,默认为1

        • 可选specularStrength?: number

          高光闪耀强度,默认为1.5

        • 可选timeScaleFactor?: number

          时间缩放因子,默认为0.001

        • 可选useEnvMap?: boolean

          是否使用环境贴图,默认为true

        • 可选uvScale?: number

          UV缩放比例,默认为1000.0

        • 可选waterColor?: number[]

          水体的主颜色(深水区域颜色),默认为[1/255, 46/255, 120/255]

      返回 WaterMaterial

    属性

    allowOverride: boolean

    Whether it's possible to override the material with Scene#overrideMaterial or not.

    true
    
    alphaHash: boolean

    Enables alpha hashed transparency, an alternative to Material#transparent or Material#alphaTest. The material will not be rendered if opacity is lower than a random threshold. Randomization introduces some grain or noise, but approximates alpha blending without the associated problems of sorting. Using TAA can reduce the resulting noise.

    false
    
    alphaToCoverage: boolean

    Whether alpha to coverage should be enabled or not. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true). Enabling this will smooth aliasing on clip plane edges and alphaTest-clipped edges.

    false
    
    blendAlpha: number

    Represents the alpha value of the constant blend color.

    This property has only an effect when using custom blending with ConstantAlpha or OneMinusConstantAlpha.

    0
    
    blendColor: Color

    Represents the RGB values of the constant blend color.

    This property has only an effect when using custom blending with ConstantColor or OneMinusConstantColor.

    (0,0,0)
    
    blendDst: BlendingDstFactor

    Defines the blending destination factor.

    OneMinusSrcAlphaFactor
    
    blendDstAlpha: BlendingDstFactor

    Defines the blending destination alpha factor.

    null
    
    blendEquation: BlendingEquation

    Defines the blending equation.

    AddEquation
    
    blendEquationAlpha: BlendingEquation

    Defines the blending equation of the alpha channel.

    null
    
    blending: Blending

    Defines the blending type of the material.

    It must be set to CustomBlending if custom blending properties like Material#blendSrc, Material#blendDst or Material#blendEquation should have any effect.

    NormalBlending
    
    blendSrc: BlendingSrcFactor

    Defines the blending source factor.

    SrcAlphaFactor
    
    blendSrcAlpha: BlendingSrcFactor

    Defines the blending source alpha factor.

    null
    
    clipIntersection: boolean

    Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.

    false
    
    clipping: boolean

    Defines whether this material supports clipping; true to let the renderer pass the clippingPlanes uniform.

    false
    
    clippingPlanes: Plane[]

    User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose signed distance to the plane is negative are clipped (not rendered). This requires WebGLRenderer#localClippingEnabled to be true.

    null
    
    clipShadows: boolean

    Defines whether to clip shadows according to the clipping planes specified on this material.

    false
    
    colorWrite: boolean

    Whether to render the material's color.

    This can be used in conjunction with Object3D#renderOder to create invisible objects that occlude other objects.

    true
    
    defaultAttributeValues: {
        color: [number, number, number];
        uv: [number, number];
        uv1: [number, number];
    }

    When the rendered geometry doesn't include these attributes but the material does, these default values will be passed to the shaders. This avoids errors when buffer data is missing.

    • color: [ 1, 1, 1 ]
    • uv: [ 0, 0 ]
    • uv1: [ 0, 0 ]
    depthFunc: DepthModes

    Defines the depth function.

    LessEqualDepth
    
    depthTest: boolean

    Whether to have depth test enabled when rendering this material. When the depth test is disabled, the depth write will also be implicitly disabled.

    true
    
    depthWrite: boolean

    Whether rendering this material has any effect on the depth buffer.

    When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.

    true
    
    dithering: boolean

    Whether to apply dithering to the color to remove the appearance of banding.

    false
    
    extensions: { clipCullDistance: boolean; multiDraw: boolean }

    This object allows to enable certain WebGL 2 extensions.

    • clipCullDistance: set to true to use vertex shader clipping
    • multiDraw: set to true to use vertex shader multi_draw / enable gl_DrawID
    forceSinglePass: boolean

    Whether double-sided, transparent objects should be rendered with a single pass or not.

    The engine renders double-sided, transparent objects with two draw calls (back faces first, then front faces) to mitigate transparency artifacts. There are scenarios however where this approach produces no quality gains but still doubles draw calls e.g. when rendering flat vegetation like grass sprites. In these cases, set the forceSinglePass flag to true to disable the two pass rendering to avoid performance issues.

    false
    
    glslVersion: GLSLVersion

    Defines the GLSL version of custom shader code.

    null
    
    index0AttributeName: string

    If set, this calls [gl.bindAttribLocation]https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindAttribLocation to bind a generic vertex index to an attribute variable.

    undefined
    
    isMaterial: boolean

    This flag can be used for type testing.

    true
    
    isShaderMaterial: boolean

    This flag can be used for type testing.

    true
    
    linewidth: number

    Controls line thickness or lines.

    WebGL and WebGPU ignore this setting and always render line primitives with a width of one pixel.

    1
    
    name: string

    The name of the material.

    opacity: number

    Defines how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

    If the Material#transparent is not set to true, the material will remain fully opaque and this value will only affect its color.

    1
    
    polygonOffset: boolean

    Whether to use polygon offset or not. When enabled, each fragment's depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The offset is added before the depth test is performed and before the value is written into the depth buffer.

    Can be useful for rendering hidden-line images, for applying decals to surfaces, and for rendering solids with highlighted edges.

    false
    
    polygonOffsetFactor: number

    Specifies a scale factor that is used to create a variable depth offset for each polygon.

    0
    
    polygonOffsetUnits: number

    Is multiplied by an implementation-specific value to create a constant depth offset.

    0
    
    precision: "highp" | "mediump" | "lowp"

    Override the renderer's default precision for this material.

    null
    
    premultipliedAlpha: boolean

    Whether to premultiply the alpha (transparency) value.

    false
    
    shadowSide: Side

    Defines which side of faces cast shadows. If null, the side casting shadows is determined as follows:

    • When Material#side is set to FrontSide, the back side cast shadows.
    • When Material#side is set to BackSide, the front side cast shadows.
    • When Material#side is set to DoubleSide, both sides cast shadows.
    null
    
    side: Side

    Defines which side of faces will be rendered - front, back or both.

    FrontSide
    
    stencilFail: StencilOp

    Which stencil operation to perform when the comparison function returns false.

    KeepStencilOp
    
    stencilFunc: StencilFunc

    The stencil comparison function to use.

    AlwaysStencilFunc
    
    stencilFuncMask: number

    The bit mask to use when comparing against the stencil buffer.

    0xff
    
    stencilRef: number

    The value to use when performing stencil comparisons or stencil operations.

    0
    
    stencilWrite: boolean

    Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be true.

    false
    
    stencilWriteMask: number

    The bit mask to use when writing to the stencil buffer.

    0xff
    
    stencilZFail: StencilOp

    Which stencil operation to perform when the comparison function returns true but the depth test fails.

    KeepStencilOp
    
    stencilZPass: StencilOp

    Which stencil operation to perform when the comparison function returns true and the depth test passes.

    KeepStencilOp
    
    toneMapped: boolean

    Defines whether this material is tone mapped according to the renderer's tone mapping setting.

    It is ignored when rendering to a render target or using post processing or when using WebGPURenderer. In all these cases, all materials are honored by tone mapping.

    true
    
    uniforms: { [uniform: string]: IUniform<any> }

    An object of the form:

    {
    "uniform1": { value: 1.0 },
    "uniform2": { value: 2 }
    }

    specifying the uniforms to be passed to the shader code; keys are uniform names, values are definitions of the form

    {
    value: 1.0
    }

    where value is the value of the uniform. Names must match the name of the uniform, as defined in the GLSL code. Note that uniforms are refreshed on every frame, so updating the value of the uniform will immediately update the value available to the GLSL code.

    uniformsGroups: UniformsGroup[]

    An array holding uniforms groups for configuring UBOs.

    uniformsNeedUpdate: boolean

    Can be used to force a uniform update while changing uniforms in Object3D#onBeforeRender.

    false
    
    userData: Record<string, any>

    An object that can be used to store custom data about the Material. It should not hold references to functions as these will not be cloned.

    uuid: string

    The UUID of the material.

    version: number

    This starts at 0 and counts how many times Material#needsUpdate is set to true.

    0
    
    vertexColors: boolean

    If set to true, vertex colors should be used.

    The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or four (RGBA) component color buffer attribute is used.

    false
    
    visible: boolean

    Defines whether 3D objects using this material are visible.

    true
    
    wireframe: boolean

    Renders the geometry as a wireframe.

    false
    
    wireframeLinewidth: number

    Controls the thickness of the wireframe.

    WebGL and WebGPU ignore this property and always render 1 pixel wide lines.

    1
    

    方法

    • Adds a listener to an event type.

      类型参数

      • T extends "dispose"

      参数

      • type: T

        The type of event to listen to.

      • listener: EventListener<{ dispose: {} }[T], T, WaterMaterial>

        The function that gets called when the event is fired.

      返回 void

    • Returns a new material with copied values from this instance.

      返回 this

      A clone of this instance.

    • Copies the values of the given material to this instance.

      参数

      • source: Material

        The material to copy.

      返回 this

      A reference to this instance.

    • In case Material#onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile(), so three.js can reuse a cached shader or recompile the shader for this material as needed.

      This method can only be used when rendering with WebGLRenderer.

      返回 string

      The custom program cache key.

    • Fire an event type.

      类型参数

      • T extends "dispose"

      参数

      • event: BaseEvent<T> & { dispose: {} }[T]

        The event that gets fired.

      返回 void

    • 释放资源 清理所有纹理和缓存

      返回 void

    • Checks if listener is added to an event type.

      类型参数

      • T extends "dispose"

      参数

      • type: T

        The type of event to listen to.

      • listener: EventListener<{ dispose: {} }[T], T, WaterMaterial>

        The function that gets called when the event is fired.

      返回 boolean

    • An optional callback that is executed immediately before the shader program is compiled. This function is called with the shader source code as a parameter. Useful for the modification of built-in materials.

      This method can only be used when rendering with WebGLRenderer. The recommended approach when customizing materials is to use WebGPURenderer with the new Node Material system and [TSL]https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language.

      参数

      • parameters: WebGLProgramParametersWithUniforms
      • renderer: WebGLRenderer

        A reference to the renderer.

      返回 void

    • Removes a listener from an event type.

      类型参数

      • T extends "dispose"

      参数

      • type: T

        The type of the listener that gets removed.

      • listener: EventListener<{ dispose: {} }[T], T, WaterMaterial>

        The listener function that gets removed.

      返回 void

    • This method can be used to set default values from parameter objects. It is a generic implementation so it can be used with different types of materials.

      参数

      • 可选values: MaterialParameters

        The material values to set.

      返回 void

    • Serializes the material into JSON.

      参数

      • 可选meta: JSONMeta

        An optional value holding meta information about the serialization.

      返回 ShaderMaterialJSON

      A JSON object representing the serialized material.

      ObjectLoader#parse

    访问器

    • get alphaTest(): number

      Sets the alpha value to be used when running an alpha test. The material will not be rendered if the opacity is lower than this value.

      返回 number

      0
      
    • get crestFoam(): number

      控制波峰泡沫的判断阈值,1最大,默认0.7

      返回 number

    • set crestFoam(value: number): void

      设置波峰泡沫的判断阈值

      参数

      • value: number

        波峰泡沫阈值,范围0-1

      返回 void

    • get crestFoamColor(): number[]

      波峰泡沫颜色

      返回 number[]

    • set crestFoamColor(value: number[]): void

      设置波峰泡沫颜色

      参数

      • value: number[]

        RGB颜色数组,范围0-1

      返回 void

    • get depthSoftness(): number

      控制水深渐变过渡,默认为5

      返回 number

    • set depthSoftness(value: number): void

      设置水深渐变过渡

      参数

      • value: number

        水深渐变过渡值

      返回 void

    • get foamDepthSoftness(): number

      控制泡沫在水深维度上的衰减程度,泡沫从深度为0到foamDepthSoftness范围衰减,默认为1

      返回 number

    • set foamDepthSoftness(value: number): void

      设置泡沫在水深维度上的衰减程度

      参数

      • value: number

        泡沫深度衰减值

      返回 void

    • get foamScale(): number

      控制泡沫贴图缩放比例,默认为100

      返回 number

    • set foamScale(value: number): void

      设置泡沫贴图缩放比例

      参数

      • value: number

        泡沫贴图缩放比例

      返回 void

    • get foamSoftness(): number

      控制泡沫边缘模糊的程度

      返回 number

    • set foamSoftness(value: number): void

      设置泡沫边缘模糊的程度

      参数

      • value: number

        泡沫边缘模糊值

      返回 void

    • get foamSpeed(): number

      控制泡沫的流动速度(用于 tFoamNoise 采样偏移)

      返回 number

    • set foamSpeed(value: number): void

      设置泡沫的流动速度

      参数

      • value: number

        泡沫流动速度

      返回 void

    • get offsetScale(): number

      控制波浪扰动高度偏移,默认为1

      返回 number

    • set offsetScale(value: number): void

      设置波浪扰动高度偏移

      参数

      • value: number

        波浪扰动高度偏移

      返回 void

    • get specularStrength(): number

      高光闪耀强度

      返回 number

    • set specularStrength(value: number): void

      设置高光闪耀强度

      参数

      • value: number

        高光强度值

      返回 void

    • get style(): string

      水体样式

      返回 string

    • set style(style: "river" | "lake" | "ocean"): void

      设置水系样式,默认为lake

      参数

      • style: "river" | "lake" | "ocean"

        样式名称,只接受'river', 'lake', 'ocean'

      返回 void

    • get timeScaleFactor(): number

      时间缩放因子

      返回 number

    • set timeScaleFactor(value: number): void

      设置时间缩放因子

      参数

      • value: number

        时间缩放因子

      返回 void

    • get useEnvMap(): boolean

      是否使用环境贴图

      返回 boolean

    • set useEnvMap(value: boolean): void

      设置是否使用环境贴图

      参数

      • value: boolean

        是否启用环境贴图

      返回 void

    • get uvScale(): number

      UV缩放比例

      返回 number

    • set uvScale(value: number): void

      设置UV缩放比例

      参数

      • value: number

        UV缩放比例

      返回 void

    • get waterColor(): number[]

      水体的主颜色(深水区域颜色)

      返回 number[]

    • set waterColor(value: number[]): void

      设置水体的主颜色(深水区域颜色)

      参数

      • value: number[]

        RGB颜色数组,范围0-1

      返回 void