您现在的位置是:首页 >技术交流 >【Mars3d 学习】材质类型网站首页技术交流
【Mars3d 学习】材质类型
简介【Mars3d 学习】材质类型
材质会让我们的业务需求变的简单,比如一条虚线,一条发光线,一张图片面,以及棋盘格,波纹扩散等等;
1、创建的对象支不支持材质呢?
需要查看API --- PointEntity - Mars3D API文档 这里我以point点对象为例,很明显,Api里没有写材质,说明点不支持材质的设置;
PolylineEntity - Mars3D API文档 这个是线对象,标明了materialType,说明是支持材质类型的;
2、要怎么知道mars3d中的材质对象
具体的可以查看API -- MaterialType - Mars3D API文档 这样我们就能找到我们所需要的类型,如果没有的话,或者效果达不到预期,那么久需要自定义材质了;
3、如何绘制带有材质的对象?
这里就以线对象为例,写个流动图片:
const graphic = new mars3d.graphic.PolylineEntity({
positions: [
[117.169646, 31.769171],
[117.194579, 31.806466]
],
style: {
width: 5,
materialType: mars3d.MaterialType.LineFlow,
materialOptions: {
color: "#00ff00",
image: "img/textures/line-pulse.png",
speed: 3
}
}
})
graphicLayer.addGraphic(graphic)
graphic.flyTo() // 定位到矢量对象
4、现有的材质不能满足需求,如何自定义材质呢?
这个就需要懂一些额外的知识了,或者付费让他们开发
// 注册自定义材质
const LineSpriteType = "LineSprite"
mars3d.MaterialUtil.register(LineSpriteType, {
fabric: {
uniforms: {
image: Cesium.Material.DefaultImageId,
speed: 20,
globalAlpha: 1.0
},
source: `czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 colorImage = texture(image, vec2(fract(st.s - speed*czm_frameNumber/1000.0), st.t));
material.alpha = colorImage.a * globalAlpha;
material.diffuse = colorImage.rgb * 1.5 ;
return material;
}`
},
translucent: true
})
const graphic = new mars3d.graphic.PolylinePrimitive({
positions: [
[117.261209, 31.919032, 20.7],
[117.279865, 31.893017, 15.3],
[117.26716, 31.874204, 19.3]
],
style: {
width: 1.7,
// 使用自定义材质
materialType: LineSpriteType,
materialOptions: {
image: "./img/textures/line-sprite.png",
speed: 10
}
}
})
graphicLayer.addGraphic(graphic)
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。