Select to view content in your preferred language

3D symbol fails to load

1296
2
Jump to solution
08-09-2022 02:20 AM
NorbertByiringiro
Emerging Contributor

Hello folks, 

I am trying to load an external .glb or .gltf 3D object (stored locally) in a sceneview using href, but it is not working. Below are my codes:

 

  const map = new WebScene({
    basemap: "hybrid",
  });

  const view = new SceneView({
    map: map
    container: "viewDiv",
    camera: {
      // autocasts as new Camera()
      position: {
        // autocasts as new Point()
        x: -0.17746710975334712,
        y: 51.44543992422466,
        z: 1266.7049653716385,
      },
      heading: 0.34445102566290225,
      tilt: 82.95536300536367,
    },
  });

  const graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  const point = {
    type: "point", // autocasts as new Point()
    x: -0.178,
    y: 51.48791,
    z: 1010,
  };

  const markerSymbol = {
    type: "point-3d"
    symbolLayers: [
      {
        type: "object",

        resource: { href: " ./myObject.glb"}, 
        height: 70,
        roll: 0,
        tilt: 285,
        width: 100,
        heading: 14,
        material: { color: "red" },
       
      },
    ],
  };

  const pointGraphic = new Graphic({
    geometry: point,
    symbol: markerSymbol,
  });

  graphicsLayer.add(pointGraphic);

  
  return <div id="viewDiv"></div>;
 
 
 
 
Below is the the console error:
[esri.views.3d.layers.graphics.Graphics3DSymbolLayer] Request for resource failed: [stream-data-loader:request-error]: Failed to request resource at ' ./myObject.glb'.
 
 
Can anybody help me find what's wrong? Thanks

 

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Honored Contributor

If you look at the network traffic in browser dev tools can tell where it's trying to load the resource from? Sounds like it might be a path issue. This can vary based on how you are building your app, CDN, or NPM, and what tools you are using.

View solution in original post

0 Kudos
2 Replies
ReneRubalcava
Honored Contributor

If you look at the network traffic in browser dev tools can tell where it's trying to load the resource from? Sounds like it might be a path issue. This can vary based on how you are building your app, CDN, or NPM, and what tools you are using.

0 Kudos
NorbertByiringiro
Emerging Contributor

Thank you , I am using npm  in react js, and  I found that putting the object I want to load in the public folder was what I needed instead of putting it in the same folder as the the component in which it is called as the path above shows it.