HI Guys,
I am trying to have a list of materials and change the msterial on the obejct through buttons created in CSS.
My Code is as such for the UI scipt which i am attaching to the Model in the editor.
pc.script.attribute('environment', 'asset', [ ], { type: 'texture' });
pc.script.attribute('materials', 'asset', [], { type: 'material'});
pc.script.create('ui', function (context) {
var Ui = function (entity) {
this.entity = entity;
};
Ui.prototype = {
initialize: function () {
this.ChangeMaterial = context.assets.getAssetById(this.materials[0]).resource;
console.log(this.ChangeMaterial);
var css = [
"body {",
" -webkit-touch-callout: none;",
" -webkit-user-select: none;",
" -khtml-user-select: none;",
" -moz-user-select: none;",
" -ms-user-select: none;",
" user-select: none;",
" outline-style:none;",
"}",
"a {",
" color: #fff;",
"}",
".ui-buttons {",
" position: absolute;",
" top: 0;",
" right: 0;",
" margin: 12px;",
" display: flex;",
" flex-wrap: wrap;",
" flex-direction: row-reverse;",
" width: 240px;",
"}",
".ui-button {",
" width: 96px;",
" height: 96px;",
" display: block;",
" margin: 12px;",
" box-shadow: 0px 0px 8px rgba(0,0,0,.3);",
" transform: scale(1, 1);",
" border-radius: 64px;",
" cursor: pointer;",
" transition: box-shadow 200ms, transform 200ms;",
" outline: 0 !important;",
" -webkit-tap-highlight-color: rgba(255, 255, 255, 0); !important",
" -webkit-tap-highlight-color: transparent; !important",
"}",
".ui-button:hover {",
" box-shadow: 0px 0px 12px rgba(0,0,0,.6);",
" transform: scale(1.05, 1.05);",
"}",
".ui-button.active {",
" box-shadow: 0px 0px 16px rgba(0,0,0,1);",
" transform: scale(1.1, 1.1);",
"}",
"*:focus {",
" outline: 0 !important;",
" -webkit-tap-highlight-color: rgba(255, 255, 255, 0); !important",
" -webkit-tap-highlight-color: transparent; !important",
"}",
".author {",
" position: absolute;",
" left: 8px;",
" bottom: 8px;",
"}",
".author > img, .website > img {",
" display: block;",
"}",
".website {",
" position: absolute;",
" right: 8px;",
" bottom: 8px;",
"}",
".music {",
" position: absolute;",
" top: 16px;",
" left: 16px;",
" width: 32px;",
" height: 32px;",
" cursor: pointer;",
" transition: opacity 200ms;",
"}",
".music.off {",
" opacity: 0.3;",
"}",
"@media screen and (max-width: 640px), screen and (max-height: 480px) {",
" .ui-buttons {",
" margin: 6px;",
" width: 120px;",
" }",
" .ui-button {",
" width: 48px;",
" height: 48px;",
" margin: 6px;",
" border-radius: 24px;",
" }",
" .ui-element.author {",
" left: 0;",
" bottom: 0;",
" }",
" .ui-element.author > img {",
" width: 128px;",
" }",
" .ui-element.website {",
" right: 0;",
" bottom: 0;",
" }",
" .ui-element.website > img {",
" width: 128px;",
" }",
"}"
].join('\n');
var style = document.createElement('style');
style.innerHTML = css;
document.querySelector('head').appendChild(style);
var self = this;
this.windowFocused = true;
window.onfocus = function() {
self.windowFocused = true;
};
window.onblur = function() {
self.windowFocused = false;
};
window.addEventListener('click', function() {
self.windowFocused = true;
}, false);
window.addEventListener('touchstart', function() {
self.windowFocused = true;
}, false);
if (this.environment) {
var buttons = document.createElement('div');
buttons.classList.add('ui-buttons');
document.body.appendChild(buttons);
var asset_01 = this.materials[1];
console.log(asset_01);
for(var i = 0; i < this.environment.length; i++) {
var asset = context.assets.get(this.environment[i]);
var button = asset.resource._levels[0];
button.classList.add('ui-button', 'ui-element');
button.addEventListener('click', function(evt) {
console.log("Pressed");
//modelEntity.update();
});
button.addEventListener('touchstart', function(evt) {
});
buttons.appendChild(button);
}
}
var stopMousePropagation = function(evt) {
evt.preventDefault();
evt.stopPropagation();
};
var elements = document.querySelectorAll('.ui-element');
for(var j = 0; j < elements.length; j++) {
elements[j].addEventListener('mousedown', stopMousePropagation, false);
elements[j].addEventListener('mouseup', stopMousePropagation, false);
}
},
update: function (dt) {
//
// this.entity.model.model.meshInstances[0].material = this.materials[1].resource;
//this.ChangeMaterial.update();
}
};
return Ui;
});
My FBX which i am using has 3 seperate meshes in them. do i need to do something specific to target a specific mesh?
kindly help me out as i am not able to get the material to change on the object.
regards,
Sharat