Vue? Mapbox ? Three.js : 3D ?? ??? ??? ??? ?? ??

? ????? vue.js ?? ????? ??? ??? 3 ?? ??? Mapbox GL JS? Three.JS? ???? ??? ??? ?? ? ??? ???? ????? ??? ???? ?? ????? ????? ??? ?? ?????. ?? ?? ?? ??? ?? 3D?? ??? ?? ????? ???? ? ?????.

3D ??? Mapbox ??? ????? ???????? ??? ??? ? ?? ??? ???? ? ?? ? ???. ??? Three.JS ?? ???? MapBox ? ?? ???? ?? ? ?? ?? ??? ????.

?? ?? ? ??? ??? ????? ?? ??? ?????. ??? render ??? 3.js ??? ????? calculatemodeltransform ?? ??? ????? ??? ?????.

 ?? : (GL, ????) => {
  const m = new Three.matrix4 (). FromArray (Matrix);
  const l = new Three.matrix4 (). maketranslation (modeltransform.translatex, modeltransform.translatey, modeltransform.translatez)
      .Scale (New Three.Vector3 (ModelTransform.Scale, -ModelTransform.Scale, ModelTransform.scale))
      .multiply (New Three.Matrix4 (). MakerOtationAxis (New Three.Vector3 (1, 0, 0), ModelTransform.RotateX))
      .multiply (New Three.Matrix4 (). MakerOtationAxis (New Three.Vector3 (0, 1, 0), ModelTransform.Rotatey))
      Multiply (New Three.Matrix4 (). MakerOtationAxis (New Three.Vector3 (0, 0, 1), ModelTransform.rotatez);
  CustomLayer.camera.proejectionmatrix = M.multiply (l);
  CustomLayer.renderer.resetstate ();
  CustomLayer.renderer.render (CustomLayer.Scene, CustomLayer.Camera);
  CustomLayer.map.triggerRepaint ();
},

calculatemodeltransform (point) {
  Const ModelAsmercatorCatorCoordinate = mapBoxGl.MercatorCatorCoordinate.fromlnglat ([point.lng, point.lat], this.modelaltitude);
  ?? {
    TranslateX : ModelAsmercatorCorordinate.x,
    Translatey : ModelAsmercatorCoordinate.y,
    Translatez : ModelAsmercatorCoordinate.z,
    rotatex : this.modelrotate [0],
    rotatey : this.modelrotate [1],
    rotatez : this.modelrotate [2],
    ??? : ModelAsmercatorCoordinate.MeterInmercatorCoordinateUnits ()
  };
}

?? ??? ??? translateZ ? ??? ?? ? ? ?? ??? ????. ??? ? ??? ??? ????? ??? ??? ?????????.

???:

1. ?? ?? ?? : 3.js ??? ?? ? ?? ??? ???? ??? ? ?? (????? y = 0)? ??? ?? ?? (y ?)? ??????.

 // ?? ?? ??, ??? ?? ?? Const Geometry = New Three.BoxGeoMetry (20, ??, 20)???.
const ?? = ??? 3.meshstandardMaterial ({??, ?? : True, ???? : 0.8});
const cube = new Three.Mesh (?????, ??);

// ? ?? : ??? ????? ??? ?????. ?? ?? .y = ?? / 2;

2. render ?? ?? : render ???? ?? ??? ?? translateZ ?? ???? ??? ??? ?? ? ??? ?????????.

 const l = new Three.matrix4 (). maketranslation (modeltransform.translatex, modeltransform.translatey, modeltransform.translatez -Altitude / 2)
  .Scale (New Three.Vector3 (ModelTransform.Scale, -ModelTransform.Scale, ModelTransform.scale))
  // ... ?? ?? ????

?? ??? ?? ??? ??? ?? ???? 3 ?? ??? ??? ? ??? ???? ????? ?? ??? ?????. altitude ??? ??? ??? ???? ????? ??????. ??? ?? ??? ?? ??? ?? ?? ??? ??? ?? ??? ? ????.

? ??? ? ??? ???? ??? 3D ??? ??? ???? ???, vue?? 3.js? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!