As I have tried to incorporate a plane with a youtube-video - as seen here:
https://developer.playcanvas.com/en/tutorials/youtube-in-3d-scenes/
- I continuously get some sort of rendering error, where the plane looks emissive?
https://playcanvas.com/editor/scene/1155193
Within the update-material code, I have tried to alter the blendtype amongst other things:
YoutubePlane.prototype.onYoutubeApiReady = function () {
var self = this;
var element = null;
var youTubeWrapper = document.createElement('div');
youTubeWrapper.id = this.entity.getGuid();
youTubeWrapper.style.border = '0px';
if (this.videoId) {
element = document.createElement('div');
element.style.border = '0px';
element.appendChild(youTubeWrapper);
}
this._css3Plane = new pc.Css3Plane(element, this.entity, this.pixelsPerUnit);
if (this.videoId) {
this._player = new YT.Player(this.entity.getGuid(), {
height: '100%',
width: '100%',
events: {
'onReady': function() {
self.entity.fire('youtubeready', self._player);
}
}
});
// Workaround to get iOS to play videos inline and Android to play videos unmuted
var iframe = document.getElementById(self.entity.getGuid());
iframe.src = 'https://www.youtube.com/embed/' + this.videoId + '?enablejsapi=1&controls=0&playsinline=1&origin=' + encodeURI(window.location.origin);
}
var material = new pc.StandardMaterial();
material.depthWrite = true;
material.redWrite = false;
material.greenWrite = false;
material.blueWrite = false;
material.alphaWrite = false;
material.blendType = pc.BLEND_NONE; // have tried to alter this line many times
// Extra tries as well without any luck:
material.useLighting = false;
material.useSkybox = false; material.twoSidedLighting = false; material.useGammaTonemap = false; material.useFog = false;
material.opacity = 0;
material.reflectivity =0;
material.update();
this.entity.model.material = material;
this.on('destroy', function() {
this._css3Plane.disable();
}, this);
this.on('enable', function() {
this._css3Plane.enable();
}, this);
this.on('disable', function() {
this._css3Plane.disable();
}, this);
};
