Rotate the highlight box

To whom may concern,

Recently, I’ve been looking into the classification function displayed in Cesium Ion:

However, when I try to rotate the highlighted box by changing the code:


It still didn’t move.
I’m not sure if I’m looking into the right sentence.
Any suggestions would be appreciated.

Regards
Andy

@AndyGuo

For a quick sanity check, I printed the values of modelMatrix out to the terminal before and after the line

Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

Clearly, the value of modelMatrix is being updated.

Old values:

(0.9685679805246331, -0.16002090567426402, 0.19044520694840888, 1216389.3637977627)
(0.24874900422400484, 0.6230823955824613, -0.741547207676482, -4736323.641980423)
(0, 0.7656119369905421, 0.6433026985312517, 4081321.7428341154)
(0, 0, 0, 1)

New values:

(-0.7598734968458267, 0.6215487848444989, 0.19044520694840888, 1216388.9829073488)
(-0.5262429747133412, -0.4161442903033351, -0.741547207676482, -4736322.158886007)
(-0.38165508034893125, -0.6637025219978154, 0.6433026985312517, 4081320.456228718)
(0, 0, 0, 1)

Do the new matrix values look appropriate to you? I am wondering if they are somehow an invalid input to modelMatrix. Looking forward to learning more!

-Sam

Hi Sam,

Thanks you so much! It is working now!

Can I please ask you another question? Just wondering if it is possible to add our company logo at the bottom of the window? If possible, could you please give me a hint?
Any suggestions would be really appreciated!

Best Regards
Andy

@AndyGuo

I am glad to hear that you got your application working! It is possible to add your logo to the bottom of the window. Check out the following thread.

Let me know if you have any other questions!

-Sam

@sam.rothstein
Hi Sam,

Thanks for your help!
Sorry that I don’t have much coding experience. It might be a stupid question, but could you please explain how to source the image? Is it from local disk or I need to upload it to cesium ion asset manager? I tried uploading it but failed for not having geoinformation.
Any further information would be appreciated!

Best Regards
Andy

1 Like

@AndyGuo

There are no “stupid” questions on the community forum :grinning: We really appreciate that you are posting questions and engaging with the CesiumJS community. It looks like @Farook_M is using a .gif file that is stored in the images folder of his local directory.

var credit = new Cesium.Credit('Title', '../images/farook.gif', '[http://www.cesiumjs.org](http://www.cesiumjs.org/)');

I recommend using the same technique for your HTML implementation.

-Sam

@sam.rothstein
Thank you so much for your patience and timely reply!
I’ve tried the way you proposed. However it still didn’t work. I’m wondering there might be something wrong with the local path. And I’ve tried different image format as well
Here is the code I pasted, please have a look:

viewer = new Cesium.Viewer(‘cesiumContainer’);
var credit = new Cesium.Credit(‘Title’, ‘file:///C:/Users/ANDY/Documents/270821/1.jpg’, ‘http://www.cesiumjs.org’);

Another thing is for the highlight box.
I successfully rotated the red box in the classification model.
However, when I tried in my own model, it still failed for some reason. Could you please have a look for my code as well?
Here is the link:

BTW I tried in the sandcastle example again and found when I change the hpr parameters, all highlighted were rotated. Is that possible to rotate them separately?

Thanks!
Andy

@AndyGuo

It seems likely that you are not using the correct local path. I currently use VS Code as my development environment. With VS Code, you can right-click on a file to find the correct path.

I believe that a similar feature exists on other editors. You can use this to ensure that you have the correct file path.

Thank you for sending over your sandcastle demo. I love the tunnel asset that you are using! :brick: I am seeing the red highlight box transposed on your model. I also see an orange circle near the entrance to the tunnel.

As for rotating the highlight box, have you verified that modelMatrix is being updated correctly? Does the final value look reasonable? I am seeing the following value for modelMatrix

(-0.660926180883697, -0.20065005564543648, -0.7231294065324503, -4617151.747693626)
(-0.6381833780679423, 0.657259151078979, 0.4009144351114457, 2559821.8483390966)
(0.39483991614359387, 0.7264640139004981, -0.5624513108948157, -3567187.4580973783)
(0, 0, 0, 1)

I am curious to hear your thoughts and looking forward to learning more!

-Sam

@sam.rothstein
Thank you so much for the timely support.
As you proposed, I downloaded the VS Code and copied the path.
image
However, it is still not working in the Cesium.


I’m just wondering if you could give it a go to see if the logo will appear on your window.

For the rotation, sorry I don’t quite understand the meaning of the value for modelMatrix. Could you please give a further explanation.

Thanks again for providing timely help!

Best Regards
Andy

@AndyGuo

Regarding your issue with the file paths, it is difficult for me to provide further support given that I do not have access to your personal development environment. Luckily, this issue is not necessarily related to CesiumJS, so there is a huge variety of resources online that can help you out.

With regards to modelMatrix, this variable dictates how much the red highlight box is rotated. The concept of a rotation matrix is outlined at a high level in this article.

I am wondering if the value of modelMatrix looks correct to you - should it rotate the highlight box the way that you want? From here, we can then ensure that modelMatrix is actually updating the orientation of the highlight box correctly.

-Sam

@sam.rothstein
Hi Sam,

Thanks a lot for the information! I’ll look into the path issue.
As for the rotation, I’m not sure if it is correct. At this stage, I’ll be very happy as long as it could be rotated.

Best Regards
Andy

1 Like

@AndyGuo

I understand. If I recall correctly, you were able to implement this behavior on a previous sandcastle demo - is this correct? Do you have any indication of how your new implementation differs? From a high level, it seems like they should be the same. We are transposing a highlight box on a 3D Tileset.

-Sam

@sam.rothstein
Hi Sam,
Yes, I could rotate the highlight box by changing the numbers as shown below.


While changing the same parameters didn’t rotate the box:

And for the red highlight box in my model, I copied the code from the classification template.
If possible, could you please if there is anything wrong with the code in my model?

Best Regards,
Andy

@sam.rothstein
Sorry Sam, could you please check if there is anything wrong with the hprRotation codein my model if possible?

Regards
Andy

@AndyGuo

I apologize for the late response! As you know, we have been getting a lot of community inbound and I took labor day off yesterday. I really appreciate that you posted an update that asks a more specific question.

The hprRotation code in your current implementation does not look quite right. Here is a better way to update hprRotation. I added comments to the code which explain each of the steps.

//Define heading, pitch, and roll matrix
var hprRotation = new Cesium.Matrix3;
//Define the headingPitchRoll that we are going to use.
var temp = new Cesium.HeadingPitchRoll(1.0, 1.0, 1.0);
//set hprRotation as the object in which the result will be stored, if undefined a new instance will be created.
Cesium.Matrix3.fromHeadingPitchRoll(temp, hprRotation);

Here is the documentation that I referenced to find this information.

https://cesium.com/learn/cesiumjs/ref-doc/Matrix3.html?classFilter=matrix

I would recommend going through your code and ensuring that each variable is being updated correctly. One simple way to check this is to print the variable to the console before and after updating it. Also, make sure that the highlights are being updated with the new rotation variables that you create. Let me know if you have any other questions or concerns! I would love to see your progress in the form of a sandcastle demo when you’ve implemented these changes :grinning:

-Sam

@sam.rothstein
Hi Sam,

Thanks for the information!
When rotating the highlight area of the building in the sandcastle, I found the other highlight areas of trees were changed as well. Just wondering if the highlight area could be rotated separately?
The other thing is for the logo path. We’ve tried several times but still didn’t work out. An idea brought by my colleague is that if wee need to host the model on our own severer so that the logo could be displayed?

Best Regards,
Andy

@AndyGuo

I would recommend using a unique rotation variable for each object that you wish to rotate. This will prevent confusion moving forwards and ensure that multiple objects are not being rotated using the same variable.

Could you please elaborate a little bit more here? I am not sure exactly what you are getting at.

Looking forward to learning more!

-Sam

@sam.rothstein
Hi Sam,

Thanks for the help!
Sorry for the typo. What I was trying to say is that I’m wondering if we need to host the model on our own server to display the logo?

Best Regards
Andy

@AndyGuo

I would not expect you to need to host the model on your own server to display the logo.

-Sam