맵 박스를 사용하여 맵에서 3D 객체의 하단이 고정되어 있는지, vue에서 3.js를 사용하는 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!