Error rendering 3D models (Runtime Error) Failed to load model: [object Object]↵Unexpected token

CesiumJS
1

Hello, hope you can help me… After struggling so much trying to integrate vue, webpack and cesium I got it thanks to this tutorial https://www.jianshu.com/p/fb237c7eb48c. Thought it was fine because I actually can consume an api and show circles from it but when i try to render the 3D model it got broke… (RuntimeError {name: “RuntimeError”, message: “Failed to load model: [object Object]↵Unexpected token < in JSON at position 0”, stack: “Error↵ at new RuntimeError (webpack-internal://…e_modules/cesium/Source/ThirdParty/when.js:647:4)”})

I’m using this function I got it from the

createModel (url, height) {

// this.viewer.entities.removeAll();

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);

var heading = Cesium.Math.toRadians(135);

var pitch = 0;

var roll = 0;

var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

var entity = this.viewer.entities.add({

name : url,

position : position,

orientation : orientation,

model : {

uri : url,

minimumPixelSize : 128,

maximumScale : 20000

}

});

this.viewer.trackedEntity = entity;

}

this.createModel(’…/…/SampleData/models/CesiumAir/Cesium_Air.glb’, 5000.0);

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

I want to load 3D buildings on the map, I have tried to load a tile just trying the code from an sandbox example and another error as weird as this was showed so I decided to start by one 3D model. I could say that the error is the webpack configuration because the code it is from the examples but so far I have no idea what else to do or probably the location of the sampleData folder but I actually have placed it in many ways… nothing works

Even I updated the packages, node, npm

“axios”: “^0.18.0”,

“cesium”: “^1.46.1”,

“vue”: “^2.5.2”,

“vue-router”: “^3.0.1”

and I’m using opera as well as chrome on windows 10

Thank you for your help

Capture.PNG

2

Hi there,

It sound like in your webpack configuration, you’re loading .glb files as JSON, when they are binary files. There’s probably a webpack loader that will handle loading binary files.

Thanks,

Gabby

3

Thanks Gabby,

I’ve been looking any help about what you mention but nothing works… by the way I got this Warning

Webpack-internal:///./node_modules/webpack-dev-server/client/index.js?http://localhost:8080:153 ./node_modules/cesium/Source/ThirdParty/draco_decoder.wasm

Module parse failed: Unexpected character ’

./node_modules/cesium/Source/ThirdParty/Shaders/FXAA3_11.glsl

Module parse failed: Unexpected character ‘#’ (87:0)

You may need an appropriate loader to handle this file type.

#if (FXAA_QUALITY_PRESET == 10)

#define FXAA_QUALITY_PS 3

#define FXAA_QUALITY_P0 1.5

@ ./node_modules/cesium/Source/ThirdParty ^./.*$

@ ./node_modules/cesium/Source/ThirdParty/xss.js

@ ./node_modules/cesium/Source/Core/Credit.js

@ ./node_modules/cesium/Source/Cesium.js

@ ./src/main.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I think this warning is the reason 'cuz whne i call the 3D model it is triggered… Have you any idea how to solve it

Thanks

4

This is a different error, the Draco module is a web assembly binary file, and should be loaded with an appropriate loader. After a quick search, I found this loader, but haven’t tested it myself.

Thanks for bringing these errors up, I have opened an issue in the Cesium recommended webpack repo to add these configurations to the config file and the tutorial.