"Failed to load model: ./CesiumMilkTruck.gltf Unexpected token < in JSON at position 0"

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

  1. RuntimeError {name: “RuntimeError”, message: “Failed to load model: ./CesiumMilkTruck.gltf↵Unexpected token < in JSON at position 0”, stack: “Error↵ at new RuntimeError (webpack-internal://…e_modules/cesium/Source/ThirdParty/when.js:646:4)”}
  2. message: “Failed to load model: ./CesiumMilkTruck.gltf↵Unexpected token < in JSON at position 0”
  3. name: “RuntimeError”
  4. stack: “Error
    at new RuntimeError (webpack-internal:///./node_modules/cesium/Source/Core/RuntimeError.js:40:19)
    at eval (webpack-internal:///./node_modules/cesium/Source/Scene/ModelUtility.js:174:40)
    at Promise.eval [as then] (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:216:33)
    at eval (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:296:13)
    at processQueue (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:646:4)
    at _resolve (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:332:4)
    at promiseReject (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:365:11)
    at Promise.eval [as then] (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:216:33)
    at eval (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:297:7)
    at processQueue (webpack-internal:///./node_modules/cesium/Source/ThirdParty/when.js:646:4)”

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

window.viewer.entities.add({

position: Cartesian3.fromDegrees(120.02444386482239, 30.244674682617188, 1000),

model: { uri: ‘./CesiumMilkTruck.gltf’ }

})

window.viewer.zoomTo(window.viewer.entities)

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I just learned Cesium for somedays, and I want to load a 3d model to my Vue project, I copied the model to my file, and like this to add to my project, but I don’t know why I failed.

ps: my English was not so well and if I spell wrong, please not upset, and thank u for help.

4. The Cesium version you’re using, your operating system and browser.

1.64.0 win10 chrome

2

I don’t know my code is current or not, so I just put my code here

#cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
3

Where is the glTF model located? This sounds like you’re accessing it at the wrong URL. Have you checked the network tab to see if the file is correctly being loaded, or are you getting 404s?

4

i am also using cesium in vue and am having the same problem. I don’t get 404’s if I type the correct file path, but I also don’t get 404’s when I purposely type the wrong file path. It looks like the response is xml where cesium is expecting JSON. Is there any way around that?

5

@Jaxon_Willard, are you loading your model from a local filesystem? What do you see when you check the network tab and filter for the request made to your model?

If you’re looking for a way to host your 3D models I’d recommend checking out Cesium ion (https://cesium.com/ion). You can drag and drop your model there and get a code snippet for loading that into your app.

6

Yes, It looks like this

Header
Header936×679 51.5 KB

I’d prefer to load it from my local filesystem. Is there a way to be able to do that?

7

This is the response I get

Response
Response880×395 44.6 KB

8

Yup - you just need to make sure you’re running a local server to host your 3D models and other assets. If you open http://127.0.0.1:8081/GroundVehicle.glb in your browser, do you get the model file downloaded?

9

Yes, and the response is that same HTML.

Here is my code, for reference

viewer.entities.add({

  position: Cartesian3.fromDegrees(0, -75, 300000),

  model: {

    uri: './GroundVehicle.glb',

    scale: 20000.0

  }

})
10

It looks like Cesium is expecting JSON when it is getting HTML, is there a way to read it in as JSON or change what file type Cesium is expecting?
thanks

11

Were you able to solve it?

12

This means your server isn’t actually sending the 3D model. What you’re getting is basically a “404 HTML page”. You can read more about this here: How do you set up a local testing server? - Learn web development | MDN.

14

Yes, I had to find out where my server was looking for that file and put the file there