Mesh
上一篇
光源
下一篇
雾
Loading...
在 3D 场景中 Mesh 的描述能力是最强大的,需要配合 Geometry 和 Material 使用。
import {MeshPhongMaterial,SphereGeometry,DirectionalLight,Mesh,Plugin as Plugin3D,} from '@antv/g-plugin-3d';const sphereGeometry = new SphereGeometry(device, {radius: 200,});const material = new MeshPhongMaterial(device, {map: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*npAsSLPX4A4AAAAAAAAAAAAAARQnAQ',// 省略其他参数,});// 创建一个 Meshconst sphere = new Mesh({style: {x: 300, // 设置局部坐标系下的位置y: 250,z: 0, // z 轴坐标fill: '#1890FF',opacity: 1,geometry: sphereGeometry,material,},});// 添加到画布canvas.appendChild(sphere);
我们复用 2D 图形的部分样式属性名。
填充色
透明度
局部坐标系下 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] }