Problem with transparent model when click hotpot

Hi, I have problem with show/hide model when click hotpot. I saw the tutorial “Fading objects in and out”. But it didnt work in my project. What’s wrong with me?
Can someone check my project for me?

Hotspot.prototype.doRayCast = function (screenPosition) {

    // Only do the raycast if the sprite is showing
    if (this.sprite.enabled) { 
        // Initialise the ray and work out the direction of the ray from the a screen position, screenPosition.y,, this.ray.direction); 

        // If the hotspot is clicked on, then send a event to start the 'pulse' effect
        if (this.hitArea.intersectsRay(this.ray)) {
            this.textShow.enabled = true;
            this.textHide.enabled = false;
            this.hotpotShow.enabled = true;
            this.hotpotHide.enabled = false;

            // this.moveCamera();


Hotspot.prototype.onMouseDown = function(event) {
    if (event.button == pc.MOUSEBUTTON_LEFT) {

Hotspot.prototype.onTouchStart = function (event) {
    // On perform the raycast logic if the user has one finger on the screen
    if (event.touches.length == 1) {
        // Prevent the default mouse down event from triggering

Hotspot.prototype.fadingModel = function (dt){
    this.time += dt;
    // Loop forever

    // Loop forever
    if (this.time > this.duration) {
        this.time = this.duration;
    var duration = this.time / this.duration;
    // Ping pong the alpha transparency between 0 to 1 and back to 0 again
    var alpha = Math.abs((duration - 0.5) * 2);
    var meshInstances = this.modelBrain.model.meshInstances;
    i = this.nEntityMaterial;
     // for(var i = 0; i < meshInstances.length; ++i) 
        // WARNING: setParameter() is still a beta feature and may change in the future      
        // This is where we set how transparent we want the object to be on a value between 0 and 1
        // 0 = fully transparent
        // 1 = fully opaque
        // Note: The materials on the model MUST have alpha set on opacity -> blend type 
        // See the material 'proto_orange' as an example
        // meshInstances[i].setParameter("material_opacity", alpha);
    if (i === 1){
        meshInstances[0].setParameter("material_opacity", alpha);
        meshInstances[1].setParameter("material_opacity", 0.1);
        meshInstances[2].setParameter("material_opacity", 0.1);
        meshInstances[3].setParameter("material_opacity", 0.1);    

Link: - scirpt hotpot.js

Thank you for any advices.

You currently have a script (fading.js) that is attached to the brain model that is always setting the meshInstance[0] opacity to 1 every frame.

Apart from that, everything else seems to be working as fair as I can tell? What’s specifically not happening that you are expecting? How do you reproduce it?

Thank you for replying to my topic.
I copy code from fading-object.js to hotpot.js
I dont want fade in fade out like twiling effect.
I wanna click hotpot 1 -> fade in model 1 and fade out others

You will have to change the alpha that you are applying to each meshInstance over time. At the moment, it is just been set either at 0.1 or 0.99 as soon as you click on the hotspot.

Ideally, when a user clicks on the hotspot, the app should know which mesh instances should be fading in and which ones should be fading and do that over a period of time.

The fading script from the tutorials shows how this is done, you will need to modify and apply that logic so you can start it when a hot spot is clicked on instead of it doing it automatically and on a loop.