Mapbox3DLayer

Thư viện hiển thị và tương tác mô hình 3D trên Mapbox GL JS.

Cài đặt

npm install @hhtrong/threelayer mapbox-gl

Sử dụng

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

import { Mapbox3DLayer } from "@hhtrong/threelayer";

mapboxgl.accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  center: [107.59939, 16.459356],
  zoom: 16,
  pitch: 60,
  bearing: 0,
  antialias: true,
});

const threelayer = new Mapbox3DLayer(undefined, {
  defaultLights: true,
  customLights: [],
  realSunlight: false,
  realSunlightHelper: false,
  passiveRendering: false,
  preserveDrawingBuffer: false,
  enableSelectingFeatures: false,
  enableSelectingObjects: true,
  enableDraggingObjects: false,
  enableRotatingObjects: false,
  enableTooltips: false,
  enableHelpTooltips: false,
  enableClippingPlanes: true,
  clippingPlane: false,
  clippingGround: 0,
  multiLayer: false,
  orthographic: false,
  fov: 45,
  sky: false,
  terrain: false,
  slot: "middle",
});

threelayer.addLayerTo(map);

await threelayer.ready();

threelayer.addModelToLayer({
  type: "ifc",
  obj: "../models/onecad.ifc",
  units: "meters",
  scale: 20,
  rotation: { x: 90, y: 0, z: 0 },
  position: [107.59939, 16.459356, 0],
  anchor: "bottom-center",
  bbox: true,
  groupId: "building",
  enableSelectFragment: true,
  enableHighlightFragment: true,
});

Constructor

new Mapbox3DLayer(layerId?, options)

| Tham số | Kiểu | Mô tả | | --------- | --------------------- | --------------------------------------------------------------------------- | | layerId | string \| undefined | ID của Mapbox layer. Không truyền hoặc truyền undefined sẽ tự động tạo ID | | options | DefaultThreeOptions | Cấu hình cho 3D layer |

Ví dụ:

const layer = new Mapbox3DLayer("building-layer", options);

Hoặc để thư viện tự tạo ID:

const layer = new Mapbox3DLayer(undefined, options);

Options

| Option | Kiểu | Mô tả | | ------------------------- | ----------------------------- | ------------------------------------- | | defaultLights | boolean | Sử dụng ánh sáng mặc định | | customLights | Array<{ color, intensity }> | Cấu hình ánh sáng tùy chỉnh | | realSunlight | boolean | Sử dụng ánh sáng mặt trời thực | | realSunlightHelper | boolean | Hiển thị helper của ánh sáng mặt trời | | passiveRendering | boolean | Bật passive rendering | | preserveDrawingBuffer | boolean | Giữ lại WebGL drawing buffer | | enableSelectingFeatures | boolean | Cho phép chọn feature trên bản đồ | | enableSelectingObjects | boolean | Cho phép chọn model 3D | | enableDraggingObjects | boolean | Cho phép di chuyển model 3D | | enableRotatingObjects | boolean | Cho phép xoay model 3D | | enableTooltips | boolean | Bật tooltip | | enableHelpTooltips | boolean | Bật tooltip label | | enableClippingPlanes | boolean | Bật clipping planes | | clippingPlane | boolean | Ẩn phần mô hình dưới giá trị mặt đất | | clippingGround | number | Giá trị mặt đất dùng cho clipping | | multiLayer | boolean | Bật chế độ multi-layer | | orthographic | boolean | Sử dụng orthographic camera | | fov | number | Field of View của camera | | sky | boolean | Bật Sky | | terrain | boolean | Bật Terrain | | slot | LayerSlot | Slot của Mapbox layer | | wasmPath | string | Đường dẫn tới WASM, không bắt buộc |

API

addLayerTo(map)

Thêm Mapbox3DLayer vào Mapbox:

threelayer.addLayerTo(map);

ready()

Chờ 3D layer khởi tạo hoàn tất:

await threelayer.ready();

Nên gọi trước khi thêm model.

addListener(event, callback)

Đăng ký event:

threelayer.addListener("added", () => {
  console.log("layer added");
});

addModelToLayer(options)

Thêm model vào 3D layer:

threelayer.addModelToLayer({
  type: "ifc",
  obj: "../models/onecad.ifc",
  units: "meters",
  scale: 20,
  rotation: { x: 90, y: 0, z: 0 },
  position: [107.59939, 16.459356, 0],
  anchor: "bottom-center",
  bbox: true,
  groupId: "building",
  enableSelectFragment: true,
  enableHighlightFragment: true,
});

Model options

| Option | Mô tả | | ------------------------- | ---------------------------------------- | | type | Loại model | | obj | Đường dẫn tới model | | units | Đơn vị của model | | scale | Tỷ lệ model | | rotation | Xoay theo x, y, z | | position | Vị trí [longitude, latitude, altitude] | | anchor | Điểm neo của model | | bbox | Hiển thị bounding box | | groupId | ID của group | | enableSelectFragment | Cho phép chọn Fragment IFC | | enableHighlightFragment | Cho phép highlight Fragment IFC |