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
this.cameraEntity.camera.screenToWorld(screenPosition.x, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction);
this.ray.origin.copy(this.cameraEntity.getPosition());
this.ray.direction.sub(this.ray.origin).normalize();
// If the hotspot is clicked on, then send a event to start the 'pulse' effect
if (this.hitArea.intersectsRay(this.ray)) {
this.entity.fire("pulse:start");
this.textShow.enabled = true;
this.textHide.enabled = false;
this.hotpotShow.enabled = true;
this.hotpotHide.enabled = false;
this.fadingModel();
// this.moveCamera();
}
}
};
Hotspot.prototype.onMouseDown = function(event) {
if (event.button == pc.MOUSEBUTTON_LEFT) {
this.doRayCast(event);
}
};
Hotspot.prototype.onTouchStart = function (event) {
// On perform the raycast logic if the user has one finger on the screen
if (event.touches.length == 1) {
this.doRayCast(event.touches[0]);
// Prevent the default mouse down event from triggering
// https://www.w3.org/TR/touch-events/#h3_list-of-touchevent-types
event.event.preventDefault();
}
};
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: https://playcanvas.com/project/554057/overview/braintest - scirpt hotpot.js
Thank you for any advices.