logo

G

  • Tutorials
  • API
  • Examples
  • Plugins
  • Productsantv logo arrow
  • 6.1.26
  • Canvas
    • Introduction
    • Options
    • Built-in objects
    • Coordinate system
    • Scenegraph & Lifecycle
    • Event
    • OffscreenCanvas & Server-side Rendering
    • CustomElementRegistry
    • Frequently Asked Questions
  • Renderer
    • Introduction
    • Canvas Renderer
    • Canvaskit Renderer
    • SVG Renderer
    • WebGL Renderer
    • WebGPU Renderer
    • Custom Renderer
  • Camera
    • Introduction
    • Camera Parameters
    • Camera action
    • Camera animation
  • Event
    • Introduction
    • Event Object
    • Gesture & Drag'n'Drop
    • Frequently Asked Questions
  • Animation
    • Web Animations API
    • Lottie
  • Basic Shapes
    • Basic Concepts
    • DisplayObject
    • Group
    • Text
    • Circle
    • Ellipse
    • Rect
    • Image
    • Line
    • Polygon
    • Polyline
    • Path
    • HTML
  • Style System
    • Introduction
    • CSS Typed OM
    • Inheritance
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 3D
    • 材质
    • 几何
    • Mesh
    • 光源
    • 雾
    • 交互
  • Built-in Objects
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • Utils
  • GPGPU
    • Introduction
    • Programming Model
    • Kernel API
    • Principles of classical GPGPU implementation
    • webgpu-graph
  • Declarative programming
    • 使用 Web Components
  • Devtools
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

Mesh

Previous
几何
Next
光源

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在 3D 场景中 Mesh 的描述能力是最强大的,需要配合 Geometry 和 Material 使用。

import {
MeshPhongMaterial,
SphereGeometry,
DirectionalLight,
Mesh,
Plugin as Plugin3D,
} from '@antv/g-plugin-3d';
const sphereGeometry = new SphereGeometry();
const material = new MeshPhongMaterial({
map: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*npAsSLPX4A4AAAAAAAAAAAAAARQnAQ',
// 省略其他参数,
});
// 创建一个 Mesh
const sphere = new Mesh({
style: {
x: 300, // 设置局部坐标系下的位置
y: 250,
z: 0, // z 轴坐标
fill: '#1890FF',
opacity: 1,
radius: 200,
geometry: sphereGeometry,
material,
},
});
// 添加到画布
canvas.appendChild(sphere);

基础样式属性

我们复用 2D 图形的部分样式属性名。

fill

填充色

opacity

透明度

z

局部坐标系下 Z 轴坐标

变换操作

和 2D 图形一样,简单推广到 3D 即可。例如平移、缩放、旋转:

mesh.translate(0, 0, 0);
mesh.setPosition(0, 0, 0);
mesh.translateLocal(0, 0, 0);
mesh.setLocalPosition(0, 0, 0);
mesh.scale(1, 1, 1);
mesh.scaleLocal(1, 1, 1);
mesh.setLocalScale(1, 1, 1);
// 绕 Y 轴逆时针方向旋转
mesh.rotate(0, 0.1, 0);

包围盒

轴对齐包围盒也从 2D 的矩形推广到 3D 中的立方体:

const bounds = mesh.getBounds();
// { center: [0, 0, 0], halfExtents: [100, 100, 100] }