Hi I am struck by little somthing
I have a scroll bar that rotates a 3D entity,other than main entity in scene and when I move the scroll bar I use the script which disables orbit camera script on camera , what I am doing is copying position of camera before or after the scroll click as the camera was jumping (as camera was following drag cursor)
but it’s not working anyone check what I might be doing wrong
here is the script
var Dc = pc.createScript('dc');
Dc.attributes.add("scrolll", { type: 'entity' });
Dc.attributes.add("cameraa", { type: 'entity' });
Dc.attributes.add("cameraEnabled", { type: 'boolean', default: true });
var savedCameraPosition = new pc.Vec3();
var savedCameraRotation = new pc.Quat();
// initialize code called once per entity
Dc.prototype.initialize = function () {
savedCameraPosition.copy(this.cameraa.getPosition());
savedCameraRotation.copy(this.cameraa.getRotation());
// Add a mousedown event listener to the scroll bar entity
this.scrolll.element.on('mousedown', function (event) {
if (this.cameraEnabled) {
var orbitCameraScript = this.cameraa.script.orbitCamera;
console.log("scroll is clikced");
// Disable the orbit camera script
orbitCameraScript.enabled = false;
// Prevent further propagation of the event (to stop camera interaction)
event.event.stopPropagation();
}
}.bind(this));
// Add a mousedown event listener to the document (outside the scroll bar)
document.addEventListener('mousedown', function (event) {
// Check if the event target is not the scroll bar or its descendants
var isOutsideScrollBar = !this.isDescendantOf(this.scrolll.element, event.target);
if (isOutsideScrollBar) {
// Re-enable the orbit camera script
this.cameraa.script.orbitCamera.enabled = true;
console.log("scroll is unclikced");
// Set the camera position and rotation to the saved values
this.cameraa.setPosition(savedCameraPosition);
this.cameraa.setRotation(savedCameraRotation);
}
}.bind(this));
};
// Utility function to check if an element is a descendant of another element
Dc.prototype.isDescendantOf = function (parent, child) {
while (child !== null) {
if (child === parent) {
return true;
}
child = child.parentElement;
}
return false;
};
Hi @Nofil_khan!
I wonder why the statue on the cabinet starts rotating?
Could it be that you have assigned the wrong entity somewhere?
Hi @Albertos this is done on purpose as I want to rotate the statue position with a scroll and overall orbit camera around the model, the problem is as soon i click the scroll then camera the camera position is changed whih i dont want
Do I understand correctly that line 44 and 45 is executed when you don’t want this?
I don’t understand the need of the extra event listener, because if you know when the scrollbar element is clicked you also know that you can enable the camera orbit as soon the mouse button is released?
@Albertos sorry most of the code is from chatGPT,so I don’t understand it fully , I want camera to be same before scroll bar is clicked and released
In that case I think you just can disable the camera orbit when the scrollbar is clicked (like you already do) and enable it with a mouseup event. I’m not sure what’s in the initialize function of the camera orbit, but I think you can give it a try first.
thanks, great idea but @Alberto’s issue is when the mouse is lifted the camera changes it position as orbit is based upon mouse drag on screen
At which moment in your video the issue is visible? If it is the moment when you click the scrollbar, I guess it is because of line 44 and 45 of the script above.
In video from 00:17 onwards you can see when I click the scroll, after I am orbiting camera then go back to the orbiting camera the position of cam is changed
In. Short what I wanted to do is have same camera position/angle before and after clicking scroll bar
Alright, I think I finally have seen the issue.
Is it correct that you want to use the same camera with two different field of views? One field of view for the orbit and one field of view for the scrollbar? If that’s the case, I expect you save the field of view of the orbit before you change the field of view to the scrollbar, but I don’t see that in your script.
you are right @Albertos to make it more clear and remove all confusion here I have reorganized the script
var Dc = pc.createScript('dc');
Dc.attributes.add("scrolll", { type: 'entity' });
Dc.attributes.add("cameraa", { type: 'entity' });
Dc.attributes.add("cameraEnabled", { type: 'boolean', default: true });
// initialize code called once per entity
Dc.prototype.initialize = function() {
// Add a mousedown event listener to the scroll bar entity
this.scrolll.element.on('mousedown', function(event) {
if (this.cameraEnabled) {
var orbitCameraScript = this.cameraa.script.orbitCamera;
// Disable the orbit camera script
orbitCameraScript.enabled = false;
// Prevent further propagation of the event (to stop camera interaction)
event.event.stopPropagation();
}
}.bind(this));
// Add a mousedown event listener to the document (outside the scroll bar)
document.addEventListener('mousedown', function(event) {
// Check if the event target is not the scroll bar or its descendants
var isOutsideScrollBar = !this.isDescendantOf(this.scrolll.element, event.target);
if (isOutsideScrollBar) {
this.cameraEnabled = true;
var orbitCameraScript = this.cameraa.script.orbitCamera;
// Re-enable the orbit camera script
orbitCameraScript.enabled = true;
}
}.bind(this));
};
// Utility function to check if an element is a descendant of another element
Dc.prototype.isDescendantOf = function(parent, child) {
while (child !== null) {
if (child === parent) {
return true;
}
child = child.parentElement;
}
return false;
};
Here is the video again, Now you see how its working
Can you share the editor link of your project please?
If your project is private, please create a sample project.
Hi @Albertos thanks for help man ,here I created the same problem i am facing here
https://playcanvas.com/project/1148662/overview/scrollclicking
Hi @Nofil_khan!
Thanks for the sample project.
I’ve forked the project and applied some changes. Instead of disabling the entire camera orbit, I check at some points if the scrollbar is active, to prevent the camera orbit is working at the same time.
I have also applied my suggestions above, so your script doesn’t become unnecessarily complicated.
I think with this changes I have solved the problem I have seen in your sample project.
Please let me know if this indeed solved your problem.
https://playcanvas.com/project/1148799/overview/scrollclicking-fork
@Albertos that’s wonderful and working like charm !!
Thanks for help!
1 Like
