Skip to main content
N
nraichura1-Visitor
1-Visitor
January 13, 2020
Solved

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

  • January 13, 2020
  • 1 reply
  • 3869 views

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

Best answer by RolandRaytchev

Hi @nraichura ,

 

to change the appearance of component you need to have for each component an explicit definition of a model item widget. This is also currently the supported way to set component properties like a colors, opacity /transparence etc.)

So the default way is to define for each modelItem widget  a  function what will change the appearance of all  modelitems to default appearance / transparency etc./ and then set the Highlight appearance to the selected item:

For example:

 

$scope.view.wdg.['modelItem-1']['color']= "rgba(226, 126, 10,1.0)";

 

this above will  set the color of the widget modelItem-1 with no transparence (color =rgb(226, 126, 10))

but when you want to have 0.3 opacity (transparency ) you can use the alpha channel parameter of the rgba function

 

 

$scope.view.wdg.['modelItem-1']['color']= "rgba(226, 126, 10,0.3)";

 

If you do not have  an explicit definition of modelitems you can set directly the color using the function and the selection notation <ModelWeidget-Id>-<pathId>  : example:  'model-1-/0/1/23' :

 

var tartet='model-1' ; //the widget id / name of a model widget
path_id='/0/1/23'; // component path of the component
tml3dRenderer.setColor(target+'-'+path_id, color);

 

for more details you can review the following Tech Tip: 'How to select model components in a 3d model without explicit definition of model Items?'

1 reply

L
lgherman14-Alexandrite
14-Alexandrite
January 13, 2020

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

    N
    nraichura1-VisitorAuthor
    1-Visitor
    January 13, 2020

    What to wright in 

    partToBeHighlighted

     can you help me for the same.

     

    or can you give one small example. 

    L
    lgherman14-Alexandrite
    14-Alexandrite
    January 13, 2020

    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

      Terms & ConditionsCookie settingsAccessibility statement