3D model conversion problem

CesiumJS
1

Hello!

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

2

Hi,

The one issue that we have been unable to work through is housing the textures on servers away from the .gltf. In any case, here are some sites the are doing what we hoped they would:

http://vcities.umsl.edu/tours/Blocks.html

In terms of an example to play with:

http://vcities.ite-stl.org/Cesium/Apps/Sandcastle/gallery/Old_Cathedral.html

might be useful. I zipped everything at:

http://vcities.ite-stl.org/Cesium/Apps/SampleData/Cathedral/Old_Cathedral.zip

including the original .dae. It is also where I put the .gltf and textures.

Jerry

3

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

4

Hi,
Could you give me a link to the .dae file, or attach it? Maybe I might spot something.

5

Hello!

Could you give me a link to the .dae file, or attach it? Maybe I might spot something.

Sure - see attachments.

BTW, if you are familiar with the other DAE → glTF conversion tool ( https://github.com/KhronosGroup/glTF ) and can create its binary for 32-bit Windows for a small fee, here’s the Elance project - https://www.elance.com/j/create-bit-windows-binary-of-project-khronosgroup-gltf/75553354/ .

Best regards

Dmitri

cube.dae (6.43 KB)

building2.dae (6.63 KB)

6

Hi,
I built the attached using the 64 bit binary converter that I had downloaded and have been using. I also did it with my Linux build on our project server. Do these give you what you expected? The only issue I saw is that XML (.dae) document’s do not seem to have a closing tag.

building.gltf (478 Bytes)

cube.gltf (470 Bytes)

7

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 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

8

Hi,

I got something to work.

I used your building in my Old_Cathedral setting and got the attached error ( Image1.jpg. )

I then opened the .dae in SketchUp and added some random textures to the roof and sides, saved and converted it, and got Image2.jpg.

The URL is http://vcities.ite-stl.org/Cesium/Apps/Sandcastle/gallery/TestIt.html.

Image1.jpg
Image1.jpg872×207 48.1 KB

Image2.jpg

building_textures.dae (14.7 KB)

building_textures.gltf (79.8 KB)

9

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)

Delete Add building

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

10

Hi,

I had some luck with the following:

In SandCastle ->3D Models, I replaced the “Ground vehicle” function with

onselect : function() {

createModel(‘…/…/SampleData/building_textures.gltf’,0);

}

When I click on “Ground vehicle” I saw the building.

I went to a practice server. The SandCastle I used is

http://vcities.umsl.edu/tours/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases

11

Hello Jerrold!

Thanks for your help.

I looked at the Sandcastle demo. If it works there, but doesn’t work in my application, then there is probably a problem in the code, which initializes the viewer.

In my application, I have this:

    <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>

Where can I look up, how the viewer is created in the Sandcastle demo?

Thanks in advance

Dmitri
12 
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
13

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 CesiumJS, adding buildings . 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

14

Hi Dmitri,
I was not able to login so I could not really play with it but one thing you might try is to change the relative URL to

‘…/…/geojson’ . From the zip file it seems to be two directories above home.html.

Best regards,

Jerry

15

Hi Jerry,

The geojson is generated dynamically by Java web service, it’s not a static file. I put it there to show you the contents, which the viewer gets from http://localhost:8080/geojson.

If I wanted to find out the cause of the problem by debugging, what tool can you recommend for that (apart from Chrome’s debugger) ?

Thanks

Dmitri

16

Hi Dmitri,
This is truly a matter of personal preference but I almost always use, and had the most success with, Firefox/Firebug.

Jerry

17

Hello!

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

18

Hello!

I've put together a small example, which demonstrates my problem with adding buildings:

http://bit.ly/1RN7UKq

I'd appreciate, if you looked at it and told me, what can possibly wrong with my JavaScript and/or HTML code.

You can reproduce the error in the following way:

1) Download myapp-0.0.1-SNAPSHOT.jar from http://bit.ly/1RN7UKq .

2) Open a command line prompt in the same directory.

3) Run "java -jar myapp-0.0.1-SNAPSHOT.jar" from the command line.

4) Open http://localhost:8080 in your browser.

5) Click on the "Login" link.

6) Enter user name and password guest in the form (login and password are the same).

7) A page with a Cesium viewer will appear. You will see some red extruded polygons (buildings) and gray lines (roads).

8) Press the "Add building" button.

8.1) Expected result: Some model is displayed and selected in the center of the screen.
8.2) Actual result: The selection marker is visible, but there is no model inside of it.

You can see it in this video: http://youtu.be/EGGSFf7ThWM

Source code of the example is also available at http://bit.ly/1RN7UKq (archive 2015_07_21_buildingsProblem.zip). You can build from source and launch the project using "mvn spring-boot:run".

Thanks in advance

Dmitri Pisarenko

19

Hello!

I noticed that during loading of the page with the Cesium viewer an uncaught exception is caught, see

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 .