My .skp to .dae to .gitf converted model is rotated 90 degrees X

CesiumJS
1

PLEASE DO NOT refer me to another thread !

PLEASE DO NOT tell me that this has already been answered, IT HAS NOT BEEN ANSWERED !

Please read though this and understand that I am not a newbie or an idiot and I have crawled all over the github and here to TRY to find a cogent answer before posting this.

I have spent MANY hours trying to figure this out before posting here, believe me.

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

There are multiple individual models with CORRECT AXES ORIENTATION that are placed together into a .skp for testing, then exported to cesium format.

Please see the attached .jpg, the models are rotated 90 degrees X axis, look really stupid.

I use Sketchup export to .dae, then zip the .dae and the textures folder together into a .zip

I convert that to gitf using the online converter which outputs a .glb

I upload the model to the SandCastle that I have running on my web site

the models are rotated 90 degrees X axis, which looks really REALLY stupid !

I am not using a CZML, I am using the Sandcastle to (TRY!) to vizualize this model on this location.

I have modified the Sandcastle to reflect the correct location.

I understand that there was a change to the Cesium display axes for purposes of displaying moving objects

These models do mot move, but they need to appear correctly oriented.

PLEASE DO NOT refer me to github or this forum previous answers, THEY DO NOT DO ANYTHING

It’s just a bunch of babble such as:

" * Apply a -90 degree rotation to the model’s heading. This can be done by setting the model’s orientation using the Entity API or from within CZML.’

WHAT CSML ? I am putting a .glb into a folder

" To fix models that are oriented incorrectly after this change, apply a +X to +Z rotation [0,0,1,0,0,1,0,0,-1,0,0,0,0,0,0,1] to the root node of the glTF. [#6632]"

THIS IS MEANINGLESS BABBLE !

WHAT is the CODE and WHERE DOES IT GO ?

PLEASE folks, this is a goofy problem with CRYPTIC ANSWERS !

PLEASE tell me in plain english HOW TO FIX THE STUPID ROTATION ?

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

using the SandCastle to display a .glb, what is the big deal ?

I do not write code, I use the toolset available.

This toolset is BLOWING MY MIND iT"S SO COMPLEX ! ! ! ! ! !

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

The guy that I am working with wants to display these very large models of a proposed power substation in place in Wales so that he can show how ugly it will be as proposed.

We are still trying to figure out how to depict the terrain properly.

I am using the SandCastle on my web site because I have not been able to get all the pathing correct to use a simpler cesium implementation with sandcastle.

We want to use ANY 3d display method that will place the models on the terrain in a browser, so the viewing user can do a tour or rotate around it.

I thought Cesium woud be a good environment to work in BUT MY GOD you guys make it SO PICKY AND KLUDGY !

WOW I thought I was pretty good at this mapping and 3D stuff until I started with Cesium. WOW !

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

Go look at the Sandcastle that I stole and we are using

Cesium v 1.5 installed fresh from the site.

it’s the vanguard model in the 3d models demo

It’s on a CentOS server at Lunarpages and I use Chrome

Thank You !

Kent Morrison

Google Certified Geo3D developer

Google Certified KML Developer

Trimble Certified Content Developer

OCT_16_versions_001.glb (1.2 MB)

Image3.jpg
Image3.jpg1684×1004 256 KB

1 Like
2

Is this how it’s supposed to look like?

vangaurd.png
vangaurd.png1172×447 238 KB

If so, all you need to do is apply a 90 degree pitch rotation. So, in your Sandcastle link, instead of:

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

``

I did:

var heading = 0;

var pitch = Cesium.Math.toRadians(90);

var roll = 0;

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

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

``

The other way to fix this which you’ve stumbled upon already is to edit the glTF file itself, to add that matrix (that list of 0’s and 1’s) which does this rotation in the model itself. I haven’t used SketchUp personally but it looks like there’s a glTF export extension (https://extensions.sketchup.com/en/content/gltf-exporter) so you can export glTF instead of glb and edit the file.

But if changing the orientation in your Cesium app works for you then I would just do that.

Let me know if that helps!

1 Like
3

Omar,
BLESSINGS of the Creator upon you my brother !

This is Excellent !

  1. The gltf exporter for Sketchup may have fixed several problems:

a. it allows direct export to gltf, no conversion is then needed.

b. it preserves the textures and does not require them to be exported to their own folder or to be zipped into an archive

c. it preserves the individual location of each part in the model, instead of glomming them into a common zero point.

d. it preserves the CORRECT axes of orientation of all parts

e. it replaces four steps that I was using before !

  1. As you can see, the orientation issue is now resolved without any further modification. No edit to the gltf, no edit to the sandbox code (once I got the file name correct)

Thank you SO MUCH, that is amazing.

Top notch support forum response, you NAILED it !

Please let me know if there is anything that I can do for you ?

Warmest Regards,
Kent Morrison

4

Awesome, I’m glad to hear that worked better than I expected!

I’d actually appreciate it a lot if you have any more suggestions to making Cesium easier to use. For example, you mentioned having trouble getting a simple Cesium demo running on your website? Have you seen the “Hello World.html” file that comes with the library? Does that example help at all?

Any feedback like this, whether now or as you get further in your app, is always helpful. I definitely want to make sure Cesium is easy to use for everyone.

Good luck with the power substation proposal!

5

Omar,

I would be very glad to provide such ease of use feedback as you have requested.

Is it appropriate to do so in this thread?

OR would it be better to have some other thread (already existing or new) to do that in ?

Generally, I am working in the Joomla CMS web dev environment, so I am trying to make the “Hello World” work properly in that setting.

Joomla provides an extremely stable and very secure CMS toolset, and supports TONS of free and commercial extensions for other things such as e-commerce, community, etc.

I do all of my web stuff within Joomla.

I am using an extension called “Sourcerer” by Regular Labs - https://www.regularlabs.com/extensions/sourcerer

to place the “Hello World” code into a Joomla article.

This preserves the security and ability to add other elements to this page once the mapping/3D model display is working properly.

Simply iframing a Cesium “hello world” html works, but it is not secure enough to use on client sites, etc.

SO FAR, here is the level of success (?) that I am struggling with, and this is the reason that I used the stolen SandCastle.

http://steamboat3d.com/index.php/e

As you can see, it is displayed within a stripped down Joomla template (to remove all of the distractions and extraneous formating)

I have been unable to get the bottom of the Cesium viewer to be visible.

Any suggestions would be very welcome, particularly with how to display Julian’s Vanguard (power plant) models on actual terrain that shows the soft hills in that locale.

One possible future development of this might be a Cesium display extension for Joomla, which would be VERY welcome to that large community of web developers.

If I could give that to the Joomla community, you would see many of them using Cesium for all sorts of web mapping and web 3D applications

HERE is the code in my “hello world” article that displays in this “e” version test at the URL http://steamboat3d.com/index.php/e

begin cited code

6

Thanks for your feedback Kent! I’ll definitely reference it when we’re building new learning materials. Sounds like writing some plugins for the popular CMS’s might benefit a lot of people.

For your case, I would remove this part of the style:

html, body, #cesiumContainer {

     width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

 }

``

This assumes that the Cesium container is the only thing on the page. If you remove this block you’ll be able to at least scroll and see the whole cesium viewer.

After that, I would style it so it has the dimensions you want. For example, you could set it to 100% width and a fixed height:

#cesiumContainer {
width: 100%;
height:600px;
}

``

7

Hi @omar, good answer,
work in Cesuim with glb is really have little described and mysterious - for example, auto-rotate meshes or the ability to rotate them - that’s still understandable - BUT why can’t I rotate nodes (for example, Empty from Blender are converted into nodes) from a .glb file?
As example I created them to get the exact positions of labels. They don’t want to turn in any way - perhaps you know the solution for this as well?