您现在的位置是:首页 >技术交流 >【Mars3d 学习】材质类型网站首页技术交流

【Mars3d 学习】材质类型

小小的杰茜 2023-06-03 00:00:03
简介【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)

 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。