MeshMaterial

AMD: require(["geoscene/geometry/support/MeshMaterial"], (MeshMaterial) => { /* code goes here */ });
ESM: import MeshMaterial from "@geoscene/core/geometry/support/MeshMaterial.js";
类: geoscene/geometry/support/MeshMaterial
继承于:MeshMaterial Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.11

材质决定了 MeshComponent 的可视化方式。材质的主要特征之一是其颜色color 属性可用于为整个 MeshComponent 设置统一的颜色。使用 colorTexture 属性可将图像映射到格网组件上,使用为 Mesh.vertexAttributes 中的每个折点所指定的 uv 坐标。

材质属性支持许多方便的自动转换类型,包括十六进制颜色字符串和熟知颜色字符串 (自动转换为 Color),或表示影像 url 的字符串,HTMLImageElementsHTMLCanvasElementsHTMLVideoElementImageData (自动转换为 MeshTexture)。


// create a material that uses a color

const meshWithColor = new MeshComponent({
  // autocasts to MeshMaterial
  material: {
    color: "#ff00ff"
  }
});

// create a material that uses a texture by linking to
// an image url

const meshTextureByUrl = new MeshTexture({
  url: "./image.png"
});

const boxMesh = Mesh.createBox(location, {
  material: {
    colorTexture: meshTextureByUrl
  }
});

// create a material that uses a texture from
// a canvas element

function createLinearGradient() {
  const canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = 32;

  const ctx = canvas.getContext("2d");

  // Create the linear gradient with which to fill the canvas
  const gradient = ctx.createLinearGradient(0, 0, 0, 32);
  gradient.addColorStop(0, "#00ff00");
  gradient.addColorStop(1, "#009900");

  // Fill the canvas with the gradient pattern
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 32, 32);

  return canvas;
}

const component = new MeshComponent({
  material: {
    // Autocast canvas element to MeshTexture instance
    colorTexture: createLinearGradient()
  }
});
另请参阅

构造函数

new MeshMaterial(properties)
参数
properties Object
optional

有关可能传递给构造函数的所有属性的列表,请参见属性

属性概述

所有属性都可以设置、获取和监听。请参阅使用属性主题。
显示继承属性 隐藏继承属性
名称 类型 描述
Number

指定如何处理对象上的透明度。

更多详情
MeshMaterial
String

指定如何处理对象上的透明度。

更多详情
MeshMaterial
Color

为格网组件指定单一的统一颜色。

更多详情
MeshMaterial
MeshTexture

指定要从中获取颜色信息的纹理。

更多详情
MeshMaterial
MeshTextureTransform

用于对颜色纹理进行采样的 UV 网格坐标的变换。

更多详情
MeshMaterial
String

类的名称。

更多详情
Accessor
Boolean

指定是显示每个三角形的两边,还是仅显示正面。

更多详情
MeshMaterial
MeshTexture

指定要从中获取常规信息的纹理。

更多详情
MeshMaterial
MeshTextureTransform

用于对法线纹理进行采样的 UV 网格坐标的变换。

更多详情
MeshMaterial

属性详细信息

alphaCutoff Number

指定如何处理对象上的透明度。如果 alphaMode 设置为 maskauto,则此属性可指定掩膜发生的中断值 (即,Mesh 的对应部分被渲染为完全透明)。

默认值:0.5
alphaMode String

指定如何处理对象上的透明度。另请参阅 alphaCutoff

类型 描述
opaque Alpha 将被忽略,并且对象将渲染为完全不透明。
blend Alpha 值用于渐变透明,在对象及其背景之间混合。
mask Alpha 值用于二进制透明度,其显示对象或背景值。另请参阅 alphaCutoff
auto 该实现混合了 maskblend 设置,在 alphaCutoff 之下进行掩膜,在之上进行混合。

可能值"auto"|"blend"|"opaque"|"mask"

默认值:"auto"
自动转换自 Object|Number[]|String

为格网组件指定单一的统一颜色。这可自动使用命名字符串、十六进制字符串、rgb 或 rgba 值数组、具有 rgba 属性的对象,或 Color 对象。

colorTexture MeshTextureautocast

指定要从中获取颜色信息的纹理。使用 Mesh.vertexAttributes 中为每个折点指定的 uv 坐标访问纹理。

colorTextureTransform MeshTextureTransform
起始版本:GeoScene Maps SDK for JavaScript 4.27

用于对颜色纹理进行采样的 UV 网格坐标的变换。纹理变换可用于优化纹理的重复使用,例如,将许多影像打包到单个纹理“地图集”中,并使用纹理变换偏移和缩放对该较大纹理中的特定区域进行采样。

默认值:undefined
declaredClass Stringreadonly inherited

类的名称。声明的类名称格式化为 geoscene.folder.className

doubleSided Boolean

指定是显示每个三角形的两边,还是仅显示正面。

默认值:true
normalTexture MeshTextureautocast

指定要从中获取常规信息的纹理。使用 Mesh.vertexAttributes 中为每个折点指定的 uv 坐标访问纹理。

normalTextureTransform MeshTextureTransform
起始版本:GeoScene Maps SDK for JavaScript 4.27

用于对法线纹理进行采样的 UV 网格坐标的变换。纹理变换可用于优化纹理的重复使用,例如,将许多影像打包到单个纹理“地图集”中,并使用纹理变换偏移和缩放对该较大纹理中的特定区域进行采样。

默认值:undefined

方法概述

显示继承的方法 隐藏继承的方法
名称 返回值类值 描述

添加一个或多个与对象生命周期相关联的句柄

更多详情
Accessor
Boolean

如果存在指定的句柄组,则返回 true。

更多详情
Accessor

移除对象拥有的句柄组。

更多详情
Accessor

方法详细说明

addHandles(handleOrHandles, groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时,将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
参数
handleOrHandles WatchHandle|WatchHandle[]

对象销毁后,标记为要移除的句柄。

groupKey *
optional

标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键,则句柄将被添加到默认组。

hasHandles(groupKey){Boolean}inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组,则返回 true。

参数
groupKey *
optional

组键。

返回
类型 描述
Boolean 如果存在指定的句柄组,则返回 true
示例
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}
removeHandles(groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数
groupKey *
optional

要移除的组键或组键的数组或集合。

示例
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。