object importing in Three.js - three.js

http://victorribeiro.com/modelo3D
If you take a look at the example above, you can see a low poly model in .obj format with some texture baked on it. My question is:
Is there a way that I import this same model, apply on material on the body and another material on the eyes? If you look close, you will see it's the same model with 3 elements: 1 body and 2 eyes.
Thanks a lot.

If you could separate your model into the three elements then you would be able to do what you want. I looked at pig.obj and there is now way to distinguish the different elements. You only have one group in the model file defined. If you could also export material then your elements would be named and in your traverse function you could also check the name of the element.

Related

Is it possible to name rotations/joints in threejs and how is it possible to set them?

I am doing a bit of work with threejs. And now just wondering if it was possible to name rotations or joints.
So it seems possible to write code like:
arm.rotateZ( 180 ).name="ARM_ANGLE";
But then how does one subsequently access and set the same rotation?
I know in x3d it is possible to do this, so was thinking it would be possible to do as well in threejs. In x3d, one can define a reference as:
<Transform DEF="ArmAngle" rotation="0 0 1 3.19">
And then later define a route to reference it like:
<ROUTE fromNode='spinarm' fromField='value_changed' toNode='ArmAngle' toField='set_rotation'></ROUTE>
What you are describing sounds like animation keys or transform key frames.
You can define these in a modeller like Blender and export them or generate them programatically.
But generally, what you are describing from x3d would have to be a layer built on top of three if you really want that style of interface, but honestly, it's pretty straightforward to use the scene graph style of manipulation.. i.e. finding an object and setting its position and rotation.. OR defining an animation in a modeller and then calling that animation. The advantage of using animations is that you can then blend between them.
You CAN name Objects in three.. so for instance you could name your arm.. and then find it using scene.getObjectByName("arm"). getObjectByName is a method of all Object3Ds.

Change Object parent in Three.js using JSON file

I'm using same technique explained in this example
I defined a JSON file that contains all objects, geometries and animations. However, I couldn't find the way to specify in the animation a change of object's parent. Also, by looking at the documentation of the Three.js library I don't see any ObjectKeyframeTrack which would be nice to set an object's parent.
My questions is referring the JSON file format, not using the API, to do this.
I know there is a similar question (Change Object parent in Three.js?) but is not what I am looking for.
In any case, other approaches are welcome as well.
This was solved in the forum but i'll crosspost the answer here: the three.js animation system does not provide a way to serialize changes in the scene graph as part of a JSON file. JSON keyframe animation can affect properties of objects like position, rotation, scale, and color. To change the parent of an object, you would need to use custom JS at the appropriate time in the animation playback.

Original skeleton position (Fbx import)

I was thinking that you need a deformer to read the clusters etc to be able to get the original (usually T pose) position of the skeleton.
Also FBX supports poses etc but never had a file that implemented it.
But my surprise was that importing an fbx file into 3dsmax without any mesh inside if I uncheck "animation" I get the T pose.
Any idea about it?
Thank you in adavnce
FbxCluster has GetTransformMatrix and GetTransformLinkMatrix. The former returns the original transform of the bone (that should be used to initialize the skinning), and the latter the corresponding orientation of the skinned node. Additionally, the skin node can also have "geometric rotation". I don't think there's anything more than that.

Blender MakeHuman to Three.js

I'm trying to integrate a animated 3D character in a Web navigator.
I use MakeHuman 1.02 to create a character which I import in Blender 2.74 in .mhx format.
I retarget to a BVH using the MakeWalk plugin for Blender. It's for the motion.
When I try to export the character in .json format (three.js), the following error appears :
MakeHuman is not a valid mesh object.
A mesh object is an object that we can modify properties or vertices, isn't it ?
I try others format like .dae format (collada) but it seems that the navigators doesn't find the skeleton and the textures of the character (even if they are in the same directory) necessary for the character's motion.
How to get the character like a mesh object ? Or somebody knows another process to success ?
Like Erica pointed out, you need to have a mesh selected to export it. The problem with this is it doesn't seem to work if you have multiple meshes. Only one will export. This is a problem when using MakeHuman because their clothes are separate meshes.
One way to fix this is to select all meshes and combine them into one (I believe that's CTRL + J). However, you'd have to somehow merge all your texture files into one big one and I have no idea how to do that.
What I do is to export the entire scene. Then it doesn't matter what is selected. All meshes get exported. You can load it using either the ColladaLoader, which I would recommend since you're retargeting to a BVH (worked great for me), or the new ObjectLoader.
If you have your own Scene object on the page that you want to use, you can still load the scene created by the exporter, traverse it to get the items you care about, and add those items to your scene that will display on the page.

Three.js + Blender: grouping objects to be loaded by SceneLoader

Is there a way to somehow group objects in Blender that works with SceneLoader?
I am using Blender to draw a scene with relatively large number of objects. Then I'm using SceneLoader to load that scene and dynamically pick out objects by name and dynamically re-position them. So far so good.
Now, I want to group some objects in Blender so that I can later find those objects by "group name". There are different ways of doing this in Blender, but I'm having hard time finding a way that works with SceneLoader.
I tried assigning objects into a group. Looking at the exported JSON file I see "groups" object property being exported, but SceneLoader completely ignores that property when it parses the JSON.
Going through the SceneLoader source code I noticed that it supports parent-child object relationship, so in Blender I tried moving all objects that I want to group under a single parent but it looks like three.js exporter doesn't export parent-child relationships, but instead exports objects as a flat list.
Support for groups was submitted into dev.

Resources