I'm learning to put 3D models into a Cesium scene. For this purpose, I took a model of a building from
https://3dwarehouse.sketchup.com/model.html?id=ub3f5afd0-bfa7-43e1-98b3-373ef986b311 ,
converted its STL file to COLLADA using an online converter ( http://www.greentoken.de/onlineconv/ ) and tried to
feed the resulting DAE file to the Cesium COLLADA -> gITF converter tool ( https://cesiumjs.org/convertmodel.html ) as recommended in the tutorial ( https://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/ ).
I got an error. You can see the screenshot with the place in the code, where the error occurs at http://bit.ly/1MmpTk3 . The DAE file I tried to import is also available at that URL.
Please tell me how I can fix the error (if there is something wrong with the DAE file).
If you know any Cesium-compatible 3D models, which I can play with for free, please tell me.
Thanks in advance
Dmitri Pisarenko
Hello Jerrold!
Thanks for your answer.
I tried to create 2 simple models and convert them using the Cesium tool.
First one is a simple house (cube with an extruded triangle for a roof - see http://i.imgur.com/EhKBF0J.png ) and the second one is a cube. Both were created with OpenSCAD ( http://www.openscad.org/ ) in the following way:
1) I write a script in OpenSCAD.
2) I export the model as STL from in OpenSCAD.
3) I create a Blender file, import the STL into it and create a DAE file from it.
4) Then I try to upload the DAE file to https://cesiumjs.org/convertmodel.html .
Unfortunately, both the house model and the cube couldn't be uploaded due to "internal server error".
I don't think that those models had any textures in them.
All files are available here: http://bit.ly/1eSMTw2
My question: How can I either
a) modify them in order for the converter to work or
b) create a super-simple model for import into Cesium the right way?
Right now I don't need any textures, a solid block will do.
Thanks in advance
Dmitri Pisarenko
Hi,
Could you give me a link to the .dae file, or attach it? Maybe I might spot something.
Hi,
Hello!
Thanks for converting the models.
> Do these give you what you expected?
No.
I tried to insert these models and the cathedral model into the viewer using following code:
function addBuilding() {
console.log("addBuilding, mode: " + mode);
if (mode == 'nothing') {
mode = 'addingBuilding';
}
var position = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116, 0);
//createModel("http://localhost:8080/models/building2/building2.gltf", position);
createModel("http://localhost:8080/models/cathedral/cathedral.gltf", position);
}
function createModel(url, position) {
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position, heading, pitch, roll);
var entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
scale : 10.,
// minimumPixelSize : 128
}
});
viewer.trackedEntity = entity;
viewer.selectedEntity = entity;
}
But when I add it, it doesn't appear, where it should.
Please look at the image
http://i.imgur.com/x6birC9.jpg
The green rectangle marks the place, where the inserted model should appear. It's empty, even, if you zoom in.
Since the problem occurs both with my models (building2 and cube) and the right one (the cathedral model, which you sent me in one of the previous e-mails) I assume that the problem is with my code.
The URL of the model (http://localhost:8080/models/cathedral/cathedral.gltf) is correct - when I type it into the browser, I see some JSON-like output.
> The only issue I saw is that XML (.dae) document's do not seem to have a closing </xml> tag.
I don't think this is a problem. I never saw a file, where the <?xml...> tag at the top is closed. I think it's a different kind of tag.
Best regards
Dmitri
Hello!
Thanks for your help.
I tried to use your model as well as Cesium_Air.bgltf from the Sandcastle demo. It doesn't work in my application, but I don't get any errors in the console.
So I suppose that the reason lies either in
a) how I set up the viewer and/or
b) how I add the model.
I set up the viewer like shown below.
VIEWER SETUP CODE (START)
<div id="cesiumContainer"></div>
<div class="toolbar-left">
<button onclick="deleteBuilding();">Delete</button>
<button onclick="addBuilding();">Add building</button>
</div>
<script>
var mode = 'nothing';
var viewer = new Cesium.Viewer('cesiumContainer',
{
timeline: false,
animation: false,
sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
});
var center = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(-40.0);
var range = 1000.0;
var promise = Cesium.GeoJsonDataSource.load('http://localhost:8080/geojson');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
if (entity.id.startsWith('b')) {
processBuilding(entity);
} else if (entity.id.startsWith('r')) {
processRoad(entity);
}
}
}).otherwise(function(error){
console.log("alert " + error);
});
viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
</script>
</div>
VIEWER SETUP CODE (END)
I tried to add the model in the addBuilding button event handler in two ways:
ADDING MODEL VARIANT 1 (START)
function addBuilding() {
var position = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116, 0.);
createModel('http://localhost:8080/models/building_textures/building_textures.gltf', position);
}
function createModel(url, position) {
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position, heading, pitch, roll);
var entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url
// scale : 10.,
// minimumPixelSize : 128
}
});
console.log("entity.model = " + entity.model);
viewer.trackedEntity = entity;
viewer.selectedEntity = entity;
}
ADDING MODEL VARIANT 1 (END)
ADDING MODEL VARIANT 2 (START)
function addBuilding() {
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(132.159633, 43.350116, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : 'http://localhost:8080/models/Cesium_Air.bgltf',
modelMatrix : modelMatrix,
scale : 200.0
}));
}
ADDING MODEL VARIANT 2 (END)
If you see any potential defects in that code, please tell me.
Best regards
Dmitri
I had some luck with the following:
Where can I look up, how the viewer is created in the Sandcastle demo?
Thanks in advance
Dmitri
Hi Dmitri, The one thing that sticks out a bit is the use of an absolute URL. Cesium, at the moment, seems to want server relative URL s '/geojson' . In fact, I had started a recent Topic about this "textures and .gltf files." Could you send me the various files in your application. Maybe I could see the problem? Jerry
Hello!
> The one thing that sticks out a bit is the use of an absolute URL.
I changed all URL to local ones, but the problem persists.
> Could you send me the various files in your application.
Sure. See attachment the 13 MB Zip file at http://bit.ly/1CHksMs . Inside you'll find:
1) geojson - that's what /geojson (http://localhost:8080/geojson) returns.
2) resources/static/models - models, which I tried to insert into the scene.
3) resources/static/js/myapp.js - Code for inserting the buildings.
Best regards
Dmitri Pisarenko
Hi Dmitri, The one thing that sticks out a bit is the use of an absolute URL. Cesium, at the moment, seems to want server relative URL s '/geojson' . In fact, I had started a recent Topic about this "textures and .gltf files." Could you send me the various files in your application. Maybe I could see the problem? Jerry
--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/dz9-thbE1p4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
FYI:
I've created a Win32 binary of the COLLADA -> glTF converter.
You can download it at http://altruix.cc/sources/32-bit-windows-binary-of-the-khronosgroup-gltf-converter/ .
Best regards
Dmitri Pisarenko
I noticed that during loading of the page with the Cesium viewer an uncaught exception is caught, see
http://i.imgur.com/4Idixsy.png
DOMException: Failed to execute 'querySelectorAll' on 'Element: *,:x' is not a valid selector.
Can this be the cause why my model is not displayed?
Thanks
Dmitri Pisarenko
P. S.: If someone can help me fix this problem for a small fee, please visit http://bit.ly/1CWzaiV .