Mapbox Standard layer doesn't work with three.js

20 Views Asked by At

I'm using threebox + Mapbox GL 3 my 3d models perfectly load when im using layer styles like outdoor-12 but when I change style to mapbox://styles/mapbox/standard my models get disappear.
is it still not supported in mapbox standard? there is another vay to use threebox lighting graphics and threejs

this is how I add my models :

export function addModel({ model, layerId, store }) {
  let options = {
    type: "gltf",
    obj: model.obj,
    units: "meters",
    scale: model.scale,
    rotation: model.rotation,
    anchor: "center",
  };
  window.tb.loadObj(options, function (modelObj) {
    modelObj.setCoords(model.origin);
    window.tb.add(modelObj, layerId);
    store.getState().setModel(modelObj);
  });
}

export function addMultiModels({ models, layerId, store }) {
  models.forEach((model) => {
    let options = {
      type: "gltf",
      obj: model.obj,
      units: "meters",
      scale: model.scale,
      rotation: model.rotation,
      anchor: "center",
    };
    window.tb.loadObj(options, function (modelObj) {
      modelObj.setCoords(model.origin);
      window.tb.add(modelObj, layerId);
      store.getState().addModel(modelObj);
    });
  });
}
export const addCarLayer = () => {
  const { mapRef } = useMapboxContext();
  useEffect(() => {
    if (mapRef.current) {
      const map = mapRef.current;
      map.on("load", function () {
        const z = 0;
        const layerId = "3dCarLayer";
        if (!map.getLayer(layerId)) {
          map.addLayer(
            createCustomLayer({
              model: {
                obj: "./models/car/scene.gltf",
                origin: CAR_COORDINATE,
                scale: 0.5,
                rotation: { x: 90, y: 0, z: 0 },
              },
              layerId: layerId,
              store: useCarStore,
            }),
            "waterway-label"
          );
        }
      });
    }
  }, [mapRef]);
};
0

There are 0 best solutions below