Hi guys
I am triying show text in html on screen (about rotation of an entity) and i need that text is “selectable” and “copyable” This works a bit in mozilla but not in chrome. Some ideas?
var HtmlHandler = pc.createScript('htmlHandler');
HtmlHandler.attributes.add('html', { type: 'asset', assetType: 'html' });
HtmlHandler.prototype.initialize = function() {
this.element = document.createElement('div');
this.element.classList.add('container');
document.body.appendChild(this.element);
////////////////////777 this.text = '';
////////////////////////////////// this.prevText = ''; // inicializar con cadena vacía
// hacer el texto seleccionable y copiable
this.element.style.pointerEvents = 'auto';
// Hacer texto seleccionable
this.element.style.userSelect = 'text';
// Para Chrome/Safari
this.element.style.webkitUserSelect = 'text';
// estilos comunes
this.element.style.cssText = `
font-size: 12px;
color: rgba(250, 250, 250, 1);
`;
// estilos de posicionamiento
this.element.style.cssText += `
position: fixed;
left: 0;
top: 0;
white-space: nowrap;
`;
};
HtmlHandler.prototype.template = function(asset, html) {
this.asset = asset;
this.element.innerHTML = html || '';
};
HtmlHandler.prototype.update = function(dt) {
if (this.assetId !== this.html.id) {
this.app.assets.load(this.html);
this.template(this.html, this.html.resource);
}
this.updateRotation();
};
HtmlHandler.prototype.updateRotation = function() {
var rot = this.entity.getLocalRotation();
var prevText = this.text;
this.text += 'X: ' + rot.x.toFixed(2) + ' Y: ' + rot.y.toFixed(2) + ' Z: ' + rot.z.toFixed(2) + ' ';
this.element.textContent = prevText + this.text;
}