cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

how to highlight the part with creating hotspot in vuforia studio ?

Garnet

how to highlight the part with creating hotspot in vuforia studio ?

unnamed (1).jpgCan any one guide for the same with sample example? 

Tags (1)
10 REPLIES 10

Re: how to highlight the part with creating hotspot in vuforia studio ?

Hi nraichura,


I think that one way to do this is by first adding a "Model Item" type of widget on the parts of the model that you want to highlight. This will allow you to change the color of one specific part of the model.

 

Then, you can add a "3D Image" type of widget in front of each of this parts (this will represent the orange circles from your screenshot) and set the resource to the appropriate image. By clicking on one of this images, the coresponding part of the model will change its color to yellow.

 

In order to do this, you need to add one function for each of this 3D Images (in the Javascript box that can be found next to the Click Event in the 3D IMAGE - DETAILS tab). Then, you need to write the body of the function in the javascript file of the experience. It should look like this:

 

$scope.app.highlightPart = function () {
     $scope.view.wdg.partToBeHighlighted.color = "rgb(226, 226, 0)";
}

 


Kind regards,
Lorena

Highlighted

Re: how to highlight the part with creating hotspot in vuforia studio ?

What to wright in 

partToBeHighlighted

 can you help me for the same.

 

or can you give one small example. 

Re: how to highlight the part with creating hotspot in vuforia studio ?

Hi nraichura,


After you drag the "Model Item" augmentation on your 3D model, you can rename the model item by going to the "Studio ID" field that can be found in the MODEL ITEM - DETAILS tab.

 

By clicking the green pen next to the current name (that should be something like "modelItem-1"), you can type the name that you want for the model item.

 

For example, if your model is a motorcycle, you can add a model item on the engine and set its Studio ID to "engine". Keep in mind that this names need to be unique.

 

In the code snippet that I showed you, the Studio ID of my model item was "partToBeHighlighted".


Kind regards,
Lorena

Re: how to highlight the part with creating hotspot in vuforia studio ?

hi,

 

i have define the script as follows 

 

$scope.app.highlightPart = function () {
$scope.view.wdg.body.color = "rgb(226, 226, 0)";
}

 

than i have mentioned the function highlightpart(); in to click event of 3d image. 

 

but it is not working as per given instruction. 

 

Re: how to highlight the part with creating hotspot in vuforia studio ?

Hi,

 

 

Try calling the function as app.highlightpart(); instead of highlightpart();.

 

If the model item's Studio ID is indeed "body", it should work.

 

 

Lorena

Re: how to highlight the part with creating hotspot in vuforia studio ?

nraichura_0-1578914595734.png

Capture.PNG

 

Re: how to highlight the part with creating hotspot in vuforia studio ?

nraichura_0-1578914819757.png

Now it's working but once click function is used through our experience this highlighted color remains same and not returning to the original color. 

How to transparent all other components can you help me?

 

Re: how to highlight the part with creating hotspot in vuforia studio ?

Hi,

 

In order to reset the color, you need to set it back to null, like this:

$scope.app.resetHighlightedPart= function () {
    $scope.view.wdg.body.color = null;
}

In order to make the model transparent, you need to set the "Opacity" field, that can be found in the MODEL - DETAILS tab to a value between 0 and 1. Setting it as 0.5 should produce the desired result.

 

Best regards,

Lorena

Re: how to highlight the part with creating hotspot in vuforia studio ?

how can i transparent whole other component and highlight only one component through JavaScript?

 

Announcements
Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection