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
});
Related
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.
I'm trying to control (start/stop) gtlf animations onmouseover. I found a good example but it relies on the model being in .json format:
Example: https://rexraptor08.github.io/animation-controls/
Source: https://github.com/rexraptor08/animation-controls
Problem is I'm not longer able export .json format from blender as the addon has been removed: https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender
Anyone know how to achieve this?
You can use glTF animations using the animation-mixer component.
First of all, you need to export your model with Kupoman's exporter. I've used the Khronos group one, but it has trouble with exporting models with multiple animations.
Once you have the model exported, just include aframe-extras, so you can use the animation loader.
Then you can use it like this:
<a-entity gltf-model="url(model.gltf)"
animation-mixer="clip: DoStuff;"></a-entity>
If you want to start an animation with any event, just create a component, which will set up the animation-mixer:
this.el.addEventListener("click", (e)=> {
this.el.setAttribute("animation-mixer", "clip", "DoStuff")
})
Also be sure to check out Don McCurdys guide.
In Three.js, Calling action.play() makes objects just vanish, without any error or warning on the console.
I use THREE.ObjectLoader to load a JSON file created in blender. The srt (position/scale/quaternion) animation is in the generated file. As are the morphtargets. To optimise filesize I animated the srt as a series of null objects. The morphtargets tracks are in the main object, which I clone 5 times to build the characters (balloons to be exact).
I previously did extensive testing to introduce shape/morph animation. After being succesfull I finalised all the animations. Only to be trumped by the disappearing models. The srt (position/scale/quaternion) animation was working fine before. But after refactoring the code, to be less spagettied, upon calling action.play(). The objects just vanish, exactly then. Echoeing the mixers and the array containing the clips, everything looks correct (ie I see the tracks, the names are right etc). Also examining the newly generated JSON, it seems the same and correct (also I have not changed the SRT animations, only introduced shapeanimation)
So I am lost, and think this looks more and more like a bug. From previous experience I do know it works (or has worked).
I created a jsfiddle: https://jsfiddle.net/oompol/3ya6sqed/
[edit] I turned on the action.play and call the function from the link in the div [/edit] please note I commented out calling action.play(). So you see the load and init work. See the function listed below
function playScene(scene) {
for (parentName in srtMixers) {
var clpName = "balloon1_fly";
var clp = THREE.AnimationClip.findByName(animLib, clpName);
var action = srtMixers[parentName].clipAction(clp);
action.clampWhenFinished = true;
console.log("playScene:", clpName, clp, parentName, srtMixers);
//this is when the problem happens
action.play();
}
}
This is the JSON I am loading:
https://rawgit.com/bakajin/2e3d2f6a722103ed4aefd76f6250ec08/raw/28cad35c20060d478499c0cd40a2753611993720/oomp-scene_balloons-oomp-6.9.4.json
Ok,
there was something very wrong with the scaling indeed.
The io_three JSON exporter for Blender (r87 dev) writes incorrect matrix transformation data in the geometry object (really tiny scaling values). The animation track with the scaling keys were correctly written as 1,1,1. So all the objects just scaled out of view immediately.
Hard to see because the geometry has no separate scaling value but a matrix. Seems to happen when you set "Scene" to true on export.
Worked around the problem by entering the scaling value in the keyframe tracks. But this will only work if you have no scaling animation (so the keys are all one).
Meanwhile I have extensively edited the JSON by hand. Because this is not the only incorrect data. The formatting of the animation object is also wrong. The durations for the morphTargetInfluence Keys is also incorrect. The formatting of these keys is also not always correct.
Hope this helps some other ppl
I have been able to get almost everything I need into the editor, But cannot figure out how to get a collada model that was imported to play it's keyframes.
Since I am not doing loader.load (collada) blah blah like in the examples. I cannot figure out how to get the animations. Animations is always undefined, but I know keyframes exist. Any ideas?
as far as i know, animations in the editor are not fully implemented yet.
the corresponding code in the viewport is commented out (line564+)
i think your best shot is to modify the editor (and eventually create a PR) or go back to coding everything.
the editor in its current form only shows the basic functions but the code is quite well structured to allow implementing custom features.
A quick update that animations in the Three.js Editor are now supported. Below is a gif from the linked PR demonstrating usage.
Basically I am downloading a zip file and extracting a collada file to load in the browser. This works freaking awesome in chrome but is REALLY slow with model movement from the mouse in Firefox. I cant seem to figure this out or if there's a setting I'm missing to speed up Firefox or what. The file is loaded up here
http://moneybagsnetwork.com/3d/test.htm
Its using jsunzip and three.js to load everything. I've bypassed the jsunzip and that's not the issue. I've also dumbed down the model to not use any event listeners and no lights and that didn't help one bit. Completely stumped here and the model really isn't that big :/
Here is a link to a zip of the files I'm using
http://moneybagsnetwork.com/3d/good.zip
Sorry about the multiple commented lines. I might turn things back on if this gets fixed.
I have noticed that Chrome is usually way faster and more responsive with Three.js applications than Firefox. The difference is not so much on the WebGL side, but at the plain Javascript supporting code.
Looking at your code, it seems you do some very heavy javascript stuff on your onmousemove function. This could very well cause much of the performance gap between the browsers. Mousemove is executed many many times during each and every mousemovement, so it quickly adds up to slow performance. It could also be that Firefox actually creates more mousemove events for similat cursor movements (not sure).
You could either move most of the raycasting and other stuff from mousemove to mouseclick. Alternatively, you could implement a delayed mousemove so that the function is called only maximum of X times per second, or only when the mouse has stopped. Something like this (untested but should work):
var mousemovetimer = null;
function onmousemove(event){
if (mousemovetimer) {
window.clearTimeout(mousemovetimer);
}
mousemovetimer = window.setTimeout(delayedmousemove, 100);
}
function delayedmousemove(event) {
// your original mousemove code here
}
Maybe your graphics card is in our blacklist. There is usually a note about this towards the bottom of about:support.
Cards can be blacklisted for various reasons, missing drivers / features, occasional crashes ... see:
http://www.sitepoint.com/firefox-enable-webgl-blacklisted-graphics-card/
To enable WebGL, set webgl.force-enabled to true.
To enable Layers Acceleration, set layers.acceleration.force-enabled to true
To enable Direct2D in Windows Vista/7, set gfx.direct2d.force-enabled to true