Hey Forum, I have a little problem…
I seem to be unable to use two scripts at the same time. When I activate them both (both are adding a button to toggle a feature) then the second is working, but the first is not. When i don’t add the second one, then the first is working just fine. I guess there is something obvious I am not seeing
For my camera, I am using a script like this:
And for my Light I am using the other script like this:
Sadly, I don’t know how to share the whole project (including the Code, not just the result). But Here are the two scripts I am using:
var Ui = pc.createScript('ui');
Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
Ui.prototype.initialize = function () {
// create STYLE element
var style = document.createElement('style');
// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';
// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
// append to body
// can be appended somewhere else
// it is recommended to have some container element
// to prevent iOS problems of overfloating elements off the screen
document.body.appendChild(this.div);
this.bindEvents();
};
Ui.prototype.bindEvents = function() {
var self = this;
// get button element by class
var button = this.div.querySelector('.button');
// if found
if (button) {
// add event listener on `click`
button.addEventListener('click', function() {
self.entity.script.ssao.enabled = !self.entity.script.ssao.enabled;
}, false);
}
};
var Ui = pc.createScript('ui_Shadow');
Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
Ui.prototype.initialize = function () {
// create STYLE element
var style = document.createElement('style');
// append to head
document.head.appendChild(style);
style.innerHTML = this.css.resource || '';
// Add the HTML
this.div = document.createElement('div');
this.div.classList.add('container');
this.div.innerHTML = this.html.resource || '';
// append to body
// can be appended somewhere else
// it is recommended to have some container element
// to prevent iOS problems of overfloating elements off the screen
document.body.appendChild(this.div);
this.bindEvents();
};
Ui.prototype.bindEvents = function() {
var self = this;
// get button element by class
var button = this.div.querySelector('.button');
// if found
if (button) {
// add event listener on `click`
button.addEventListener('click', function() {
self.entity.light.castShadows = !self.entity.light.castShadows ;
}, false);
}
};
So I am only getting one or the other button but never both:
But there are no Error showing up or anything…
Do you have any idea why this is happening?
Thank you for your time! <3