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

[z9613...@foxmail.com]

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)"}
1. message: "Failed to load model: ./CesiumMilkTruck.gltf↵Unexpected token < in JSON at position 0"
2. name: "RuntimeError"
3. 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

[z9613...@foxmail.com]

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

<template>

  <div>

    <div id="cesiumContainer" />

  </div>

</template>

<script>

import { Viewer, Cartesian3, Color } from 'cesium/Cesium'

import 'cesium/Widgets/widgets.css'

export default {

  name: 'CesiumViewer',

  mounted () {

    this.init()

  },

  methods: {

    init () {

      window.viewer = new Viewer('cesiumContainer', {

        infoBox: false,

        selectionIndicator: false,

        shadows: true,

        shouldAnimate: true

      })

      window.viewer.entities.add({

        position: Cartesian3.fromDegrees(120.02444386482239, 30.244674682617188),

        ellipse: {

          semiMinorAxis: 25.0,

          semiMajorAxis: 40.0,

          height: 200.0,

          fill: true,

          material: '../../assets/flightcontrol/ball.png',

          outline: true, // 必须设置height，否则ouline无法显示

          outlineColor: Color.BLUE.withAlpha(0.5),

          outlineWidth: 10.0// windows系统下不能设置固定为1

        },

        model: {

          uri: './CesiumMilkTruck.gltf'

        }

      })

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

    }

  }

}

</script>

<style scoped>

#cesiumContainer {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}

</style>

 

[Omar Shehata]

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?