There are two ways for rendering UI: HTML+CSS or WebGL. I recommend HTML+CSS.
How do I make a HTML/CSS ui change the camera? I was satisfied when I realized that I still didn’t know how.
Might be worth reading this thread that talks about how to set up HTML elements and attach functionality to buttons.
But I don’t need to switch the scene, I just need to switch to an already existing camera that is in the same scene.
Basically what you need is to understand how to add click handlers to HTML buttons and then how to change cameras.
To add a click handler on a button you first need to get a reference to that button. You could set an id to that button in your HTML like so:
<button id="someId"></button>
Then in your script you can do
var button = document.getElementById('someId');
button.addEventListener('click', function () {
// do what you want here..
})
To change cameras in your scene you could have different Entities each with a camera component attached, and then enable / disable the Entity that you want depending on which camera you want activated. I assume you understand how to find Entities in the scene and enable / disable them.
Also various times we will point you to similar questions that contain information about part of the problem you are trying to solve. It is hard to find answers to such specific questions as yours - but when you face a difficulty try to break it apart in smaller problems and then fix each one . For example in this case you want to click on a button and change cameras. Do you know how to do something when a button is clicked? Solve that first. Do you know how to change cameras? If not you can ask about that. Just basically try to break problems apart in smaller problems and find info on each problem separately. Just some general advice…
1 Like
Is disable this.entity.disable and enable, this.entity.enable?
It’s this.entity.enabled = false / true
Ok. Thanks! I will start asap. What do you put in between button tags?
You can put the text that you want to have inside the button. I recommend reading up on HTML and CSS as it will definitely prove useful to you in the long run anyway:
Can I make the button an image by putting an image tag in between button tags?
Well actually you don’t need a button tag at all - that was just an example. You can use any element as a button so you can just have a single img tag as well.
1 Like
Ok, I am adding the buttons now. If I have trouble than I will tell you.
Trouble already. It says ‘null’ is not an object. No idea why.
Just a word of advice. If you just post error messages with no context, it is impossible for anybody to help you. Always be thorough when providing others the information they need to diagnose a problem you might be having. Posting a link to your scene is normally the best way to do this. Accompany that with any instructions required to reproduce the error. If you don’t, there can be a lengthy exchange where the people trying to help you try to get the information they need to figure out what’s going on.
1 Like
It says rotate1 is null, so not an object. As you are getting rotate1 with following code:
var rotate1 = document.getElementById(‘rotate1’);
it essentially means javascript can not find a dom element with id ‘rotate1’. So, there is no tag in your html which has an id of rotate1.
Also, unrelated, calling getElementById on every update is horribly inefficient, do it once on your initalize like this:
pc.script.create('Camera', function (app) {
// Creates a new Camera instance
var Camera = function (entity) {
this.entity = entity;
};
var a = 0;
Camera.prototype = {
// Called once after all resources are loaded and before the first update
initialize: function () {
var rotate1 = document.getElementById('rotate1');
if (rotate1 != null) {
rotate1.addEventListener('click', function() {
this.entity.rotate(0, a - 1, 0);
});
}
},
// Called every frame, dt is time in seconds since last update
update: function (dt) {
}
};
return Camera;
});