i am working on a project and i got stuck on this one thing, i got a bvh file with an animation which i put on a biped in 3dsmax then i export every frame in to a json file with the thee.js json exporter and then when it gets played i remove the old mesh and add a new one. This causes the model to upload multiple times, which ofcourse is not what i want.
I use the jsonloader and i wondered if there was a way to update only the geometry every frame? Also i made those seperate files because i dont use a skin and i dont have morphtargets because i use a bvh file in 3dsmax.
It would be awesome if someone could help me with this
Example: http://www.deschaatssport.nl/3dsportsvisualiser/versie3/?p=3# (press the play button)
Mathijs Jansen
Assuming your JSON exporter keeps the number and order of faces/vertices intact, you could do something like this:
Load the initial model as you do now
Set geometry.dynamic = true;
Load the rest of the JSON files with plain old AJAX (alternatively you could combine the frame JSON files to one file, whatever so you have access to all of them through your own code)
For each frame, loop the new frame vertex position array (found in the JSON for each frame) and overwrite the coordinates of your existing geometry vertices (geometry.vertices[i].x = myframevertices[i][0]; etc...)
Set geometry.verticesNeedUpdate = true; and render the frame.
Again I'm just assuming that each JSON file has the same amount and order of faces/vertices, and only the vertex positions change in each frame. I'm not completely sure if it works like that.
There has also been some (experimental?) work on BVH support with Three.js. You might have success searching around, I don't know if there is anything usable though. One related effort here: https://github.com/akjava/BVH-Motion-Creator
Related
I've been using Tiled to create .tmx maps for one of my projects, maps that I export to JSON before using with Phaser.js.
Problem is, a few months ago I mistakenly deleted the .tmx file for the game first map. It's still working fine but now I can't change anything on the first map layout with Tiled because I only have the JSON for it.
I've been looking for an answer with no success so far, but is there a way to convert a .json Tiled map exported from a .tmx file, back to its original format ?
You should be able to simply open the JSON exported map in Tiled, and save it again as a TMX file. To be able to select the file, you may need to change the file type in the Open File dialog.
Btw, you should consider committing your project to a version control system (Git is a popular one), so that such mistakes will not generally lead to loss of data. You don't always get lucky.
I downloaded a 3D mesh from Archive3D, I then convert it to .obj in 3DS MAX using these settings and finally I convert the .obj to .js using Three.js editor.
Then I create the scene and add the model, as shown here.
These are the errors that I get in the console:
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 fly.html:1
WebGL: too many errors, no more errors will be reported to the console for this context.
What is the problem, is maybe the problem in the .js and how can I fix it?
It most likely means there's an error in the data. Many converters don't validate the data is actually correct.
The error means the one or more of the indices in your data is out of range for the data given. In other words lets say you had a 3 vertices. That means you can only have indices in the range of 0 to 2. If you had an index greater than 2 you'd get that error.
Whether the error is in the original data, in the converter to .obj, in the converter from .obj to .js we can't know without debugging through each of those steps.
You could write code to walk through the data when you load it and check that none of the indices are out of range. What to do if they are is up to you. You could try to remove them. You'd need to remove them in groups of 3 assuming you're drawing triangles. In other words, figure out what the smallest buffer in the data is (positions, normals, texcoords) then walk the indices 3 at a time. If any of the 3 indices is out of range, delete those 3 indices.
Did the file display when you loaded it into the Three.js editor? If that's the case when either there is a bug in the Three.js editor when exporting, or else the data some how got corrupted some other way.
You also mentioned code from this page That page has nothing whatsoever to do with three.js. The format for data on that page with that code is unrelated to three.js AFAIK. Data exported with the Three.js editor is only for using in Three.js
I made an editor that allows to create some custom space ships for game I'm making.
This editor is meant for the player and his ships are saved in SharedObject without a problem.
What i would like to do is to use the editor to create some ships for enemies and use them later when designing levels.
I was thinking about writing the Ship object to ByteArray and than tracing them so i can copy and paste them to code and read them back to object but this does not seem to work since what i get from tracing a ByteArray is only class name and few undefined symbols that i can't even paste here.
The standard trace panel in flash is text based, therefore no bytes can be output properly (ByteArray).
I'm not pretty sure what are the types of objects you need to store, but you can do two things:
Save ByteArray to UTF8 external file; then read it back to ByteArray, and you're on the road again
if you need to trace them out, Base64 encode them (simple but powerful class here: https://gist.github.com/burakkirkil/4051420)
Using Three.js r64 I'd like to import from Blender an animated object with its smoothing groups, the file is exported as JSON through Three.js Blender exporter.
The animation part is working fine.
In Blender, the model looks fine (there is a small smoothing group around the central part).
Picture: http://www.defresne.fr/demo/so/three/smooth_shading/gears.png
I can achive to get the same result when exporting in OBJ with 'Smooth Groups' and 'Include Normals' options checked. However I can't get it working correctly while exporting a JSON file (with normals). Next are pictures of the scene, with a live demo.
Picture: (append next link with) three_gears.png
Live demo: http://www.defresne.fr/demo/so/three/smooth_shading/
I did intense lookup all over the web and couldn't find correct informations. Best is another question on SO which is a bit old (r55) and never got any accepted answer.
I did try to compute the object's normals with
geometry.computeFaceNormals();
geometry.computeVertexNormals();
but, obviously, it computes the whole object normals and result in a completly smoothed object.
So, what should be a correct approach to make JSON smoothing groups work in three.js ? Wait for a built-in function ? build it myself ? Modify the exporter ?
As three.js seems to load correctly OBJ and Collada models with smoothing groups, maybe I could borrow some of the code in these loaders to get the logic ?
Thanks for your help
[EDIT]
I just found something great !
In Blender, produce 2 exports of the model: first a JSON file, second an OBJ file. Load the second one with three.js online editor then convert it to get the geometry JSON...
I can collect the vertices, normals and faces of this freshly exported geometry and copy it to the first exported file.
It works fine ! I got nice shading groups. Even skinning works fine.
But it's a tedious way of processing and I wish I could save myself some extra conversions.
So does that mean there is a problem while exporting geometry from Blender ? Any idea why ?
Any help would be greatly appreciated !
Ok, I finally found what happens.
The r64 Three.js Blender exporter doesn't export smoothing groups so if you need to preserve these, there is no other solution than export the geometry to an OBJ file, then convert it with the python script 'convert_obj_three.py' avaible within Three.js repository. Converted file will have correct normals. (don't forget to check normal option while exporting the OBJ file)
I have a couple of short mp3 files that the user can reorganize on a timeline. After that, I want to save the result as one mp3 file, combining six short ones.
In other projects I have done microphone recording, compressing to mp3 using the alchemy ShineMP3Encoder, and saving that as a file.
I see at least two approaches:
Extracting all ByteArray data from the loaded Sound objects,
concatenating that in a new ByteArray and compressing that with
Shine. However the ByteArray from Sound.extract doesn't seem to be
compatible with the encoder, telling me "Error : Input not a
MS-RIFF file"
Somehow combining the raw MP3 files without the need of decoding
and encoding. But that would mean having to strip off file header info
and such.
If impossible or very inefficient in Flash, I would consider a server side solution in PHP. So if that would be easy, please let me know.
Thanks!
Do these need to be physically combined into a single file; ie does the Flash need to actually generate a single MP3? Or just played back to the user as if they were one long file?
Flash does not have any built-in capacity to encode MP3s, though various I believe Flash Media Servers have that capacity (Red5, etc.). Actually, on exploration, here is a link to a guy who claims he has technology that will allow you to record an MP3 client-side, though it appears to be more for audio recordings from a built-in mic:
http://fms.denniehoopingarner.com/
Perhaps you could work with him to alter the code to work with existing sound files and generate a new one. Otherwise, you will probably need to do it with some fancy server-side footwork.
It turns out it is in fact easy to combine multiple mp3 files. You can just concatenate their raw data and save it out as a new mp3 file. A few conditions apply:
Make sure all compression settings are identical and non-dynamic. Bitrate, frequency, stereo/mono, etc.
The end result's length indicated by your OS or an mp3 player might be wrong, and show the length of the first segment only. This is header-data. Most players, including Flash, will just play the whole file though, so in most situations this might not be a problem.
In this example I'm using Greensock's LoaderMax library. DataLoader is the specific loader type you want to use (should be binary by default). *Note that I'm using the url as the name to identify the loader later, and some *_variables* need to be declared as class members*
Of course you could use the native way or a different library to load your files too.
for each ( var mp3FileURL : String in _mp3FileURLs )
{
var loader : DataLoader = new DataLoader( mp3FileURL, mp3FileURL ) );
_preloadQueue.append( loader );
}
When loading the queue is complete, you can start processing the data from the loaders.
_audioEditMP3 = new ByteArray();
for each ( var mp3FileURL : String in _mp3FileURLs )
{
var content : * = _preloadQueue.getContent( mp3FileURL );
_audioEditMP3.writeBytes( content );
}
You are now ready to save the file!
var file : FileReference = new FileReference();
file.save( _audioEditMP3, "myAudioCompilation.mp3" );