I'm forwarding this open issue from A-Frame Github page hoping that some people may know what's going on with this issue. It's still not working with A-Frame 1.0.3 and I don't really know where to search. There are two examples on the Github issue, one working with A-Frame 0.8.0 and the other one with A-Frame 0.9.0. There are absolutely no warnings or information in the javascript console so it's kinda hard to find where the issue can be.
On version 0.8.0 it used Three v90 and on 0.9.0 it used v101. So maybe something was made between these two versions on Three but I don't understand what.
Did anybody find a way to use videos with transparency on recent versions of A-Frame and/or Three.js ?
Thanks for your help :)
It seems that the assigned texture format doesn't have the alpha channel (THREE.RGBFormat, you can log and check the values here).
You can resolve the issue by changing the format of the video texture to THREE.RGBAFormat:
videoTexture.format = THREE.RGBAFormat
within a custom component containing a fix like this:
// wait until the material is ready
this.el.addEventListener('materialtextureloaded', e => {
// grab the material
let material = this.el.getObject3D("mesh").material;
// swap the format
material.map.format = THREE.RGBAFormat;
material.map.needsUpdate = true;
})
working glitch here.
Related
Anyone has a good example on how to use THREE.EffectComposer correctly in A-Frame? Especially the combination of EffectComposer and PMRemGenerator.
Used https://gist.github.com/donmccurdy/31560945d5723737e6c656a2974ab628 for now, but this method breaks a couple of things. The inspector, but more importantly the use of PMRemGenerator for example. (It also doesn't work in VR, but that's minor for my specific project)
And https://github.com/wizgrav/aframe-effects doesn't work on recent versions anymore, and doesn't seem to be maintained anymore. (And I'm too much of a newbie to try and fix that I'm afraid) (edited)
UPDATE: Edited the original question to make it clear the combination PMRemGenerator / EffectComposer is the important part. VR not so much, but that wasn't clear in the original form.
Not possible. VR post-processing depends on on-going THREE work that you can follow on this PR: https://github.com/mrdoob/three.js/pull/15840
I'm trying to reproduce example of Szenia Zadvornykh presented here https://medium.com/#Zadvorsky/webgl-masking-composition-75b82dd4cdfd
His demo is based on three.js r80, so I referenced r101 and tried to remove most of unrelated parts, and just have scene with grid and png mask on top.
Here's my code: http://jsfiddle.net/mmalex/y2kt3Lrf/
Having commented // composer.addPass(maskPass) the grid shows up. But it does not seem like uniform sampler2D tDiffuse has the output of render pass.
I expect to see the grid helper and underlying HTML content under the canvas, where mask makes canvas transparent.
UPDATE, working now, thanks to #Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf/
There is a mismatch of files in your fiddle. If I use the latest version of three.js and the respective post processing classes, your code works fine:
http://jsfiddle.net/pk24zby7/
three.js has deprecated the renderTarget and forceClear parameter from WebGLrenderer.render() with R102. When the change was done, it was necessary to change many files in the examples directory in order to avoid warnings and even breakage. So using the latest post-processing classes with an older three.js version does not work.
Since the change is listed in the release note, I suggest you read the respective PRs for more details.
I have an A-Frame scene with three gltf models in it.
I am trying to programmatically trigger animations and I'm not sure what I'm doing wrong. Probably something very obvious, I'll admit. But after hours of researching and fiddling, there must be something very basic that isn't clicking with me.
Be nice - my js isn't exactly beautiful. It's a huge work in progress.
Check out the Glitch Project for more context, but this is probably a problem because I'm using jQuery to store the entity (see below). Right? Is that why? If so, what do I do about it?
function triggerClip(model, clipToPlay, clipDirection) {
model.setAttribute('animation-mixer', {
clip: clipToPlay,
timeScale: clipDirection
});
}
EDIT: After making the changes suggested by Diego, the animations played but I was still getting warnings about timeScale not being recognized. I had to update the version of A-Frame extras to get it working as expected.
jQuery wraps native DOM elements in its own structure. You have to do the following to access it:
model[0].setAttribute('animation-mixer', {
clip: 'step' + clipToPlay,
timeScale: clipDirection
});
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
Short story:
The globe code is based (and contains) threejs v40 while the latest version in github is threejs r55 at the moment. I was wondering if anybody (more knowledgeable then me in this area) has ported globe to a newer threejs version?
Long story:
I was fiddling around with googles globe from http://www.chromeexperiments.com/globe.
I noticed that it is based on an old threejs (on github) version. Using the latest version (and getting the same results!) did not prove to be easy. Also see this question.
I changed around some function names and fumbled some parameters, no big deal. Then I turned to the shaders. That proved to be more challenging. The old version of threejs seems to have a bug when you do Mesh.flipSided = true;: the normal vectors seem to be different in the shaders between old and new version. But the shader code in globe was written towards this bug, so I had to correct the shader code.
I now have something that sort of looks the same, but combining the atmosphere and the earth is not working at all. I am suspecting this threejs bug to play a part in it, but I am not sure. Again this is a flipSided bug that might have been used by the globe authors.
Well, ehm, I am sort of stuck here. I can do what I wanted to do sticking with the old version, but that somehow feels bad.
Can anyone shed some light here?
According to the changelog at https://code.google.com/p/webgl-globe/source/browse/globe/globe.js :
"Nov 5, 2012. Updated to threejs r52 and tweenjs r7."
So, on the surface it sounds like it has been updated... which parts of the code specifically are giving you trouble?
Nowadays, instead of Mesh.flipSided = true, in the material of the mesh, you need to set side:THREE.BackSide instead.
Can you post or send a link to your code for further investigation? An updated version of the globe project sounds like a most worthy endeavor.