I have a GLTF file and I want to add interactive points over it with Blender if possible.
I start from an example code (https://www.youtube.com/watch?v=1TeMXIWRrqE) where I load a GTFL with three.js and render it into a canvas in HTML5. I need to add interaction sections like in this example: https://skfb.ly/6GB8o
Sketchfab has a whole article on how to add the annotations seen in your example. You'll need to import/upload your glTF file to Sketchfab and then follow the steps in the article.
Related
I had my model rigged and animated in MIXAMO(.com), then imported to my scene with GLTF format.
Animation works fine, but I'd like to add more animations like idle, walking and running like in this three.js example (https://threejs.org/examples/#webgl_animation_skinning_additive_blending).
Mixamo doesn't seem to allow that :-( I can however export multiple files each with different animation fot the same model.
Anyone has a tip how to merge those animations to a single file? I can use any file format or free editor if you recommend one for this.
So I have two issues right now.
it seems objectloader never load the texture of 3d model from json files.
I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.
Here is what it should look like
Here is what it looks like on my browser
Here is THREE.JS code:
var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
var mesh = new THREE.Mesh( geometry);
$scene.add( mesh );
});
Export setting:
And here is how the json file looks like:
Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.
I suggest using a different format than THREE.js internal format.
It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.
I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.
https://gltf-viewer.donmccurdy.com/
There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:
https://threejs.org/editor/
I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.
I have a rigged (skeleton and soft bind) model in Maya. The model is all one seamless low poly with a single jpeg texture mapped. There is simple animation of the skeleton. (joint rotation). I need to get it to work with ThreeJs (webGL).
Do I try to export an OBJ with Morph Targets some how? I can do OBJ but how do I get the morph targets? Can the developer that I am working with read Maya's baked animation file (.MC or .XML) in webGL. Do I export a Collada DAE?
Any help that can steer us in the right direction would be greatly appreciated.
Thanks
THREE.js comes with an exporter for Maya, but it only works for static models. I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.
It is best to export a Collada DAE file from Maya in order to get your data into ThreeJS. You can preview and share your data via http://Clara.io (an online 3D editor, modeler, animation) which imports Collada DAEs and uses ThreeJS for display.
You should have read the FAQ as there is plenty of info there. https://github.com/mrdoob/three.js/wiki. Most probably you need to export to Collada as Wavefront obj's do not support animation.
I'm trying to get my Maya animated walk cycle into three.js. I have exported the animation with the model into the .dae format, changed the path to my model in the example. My model is being loaded, but it doesn't do any animation. What could be the problem? My main goal is to create a character who walks with WASD as his walk cycle is being played.
Any suggestions where should I start?
If you are using collada loader, the animation should work without any problem. I have used the collada loader to animate one of my models using three.js, and it works like charm.
A better example to take a cue on how to make it work is webgl_loader_collada_keyframe.html .
Converting to the DAE format and then to JS is rife with problems, and it rarely works for animations. THREE.js comes with an exporter for Maya, but it only works for static models.
I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.