Needing some help. I have 2 models with the same bone structure but different meshes. The bones of the meshes overlap one another. I'd like to add pose controls that would control both meshes at the same time. I've added a code example.
The goal would be to attach a control on each merged/grouped section of the arm but have the higher controls, control the lower. Clavicle>upper arm>forearm>hand. I'm not sure if merging would solve this. Thank you in advance.
Object1
clavicle1
-upperarm1
--forearm1
---hand1
Object2
clavicle2
-upperarm2
---forearm2
---hand2
Object1.getObjectByName('clavicle1).add(Object2.getObjectByName('clavicle2));
Object1.getObjectByName('upperarm1).add(Object2.getObjectByName('upperarm2));
Object1.getObjectByName('forearm1).add(Object2.getObjectByName('forearm2));
Object1.getObjectByName('hand1).add(Object2.getObjectByName('hand2));
Scene.add(Object1);
Control.attach(Object1.getObjectByName('forearm1));
Scene.add(control)
Related
I am having a human body object and what I want is that my code should open a popup whenever I click on any of the specified body parts such as eyes, nose, arms, etc. The object is a single compiled .obj file and I'm unable to figure out as to how should I attach an event listener to the multiple body parts. Any kind of help is much appreciated!
PS: - I am also using orbit controls to handle the zoom and rotation of object.
Thanks in advance..
To solve this issue, it's necessary to design your model in a way such that individual components like arms, eyes etc. are independent 3D objects grouped together to build a more complex asset. This is something you have to ensure during the design phase with a tool like Blender.
In the next step export to glTF instead of OBJ, load the model with THREE.GLTFLoader into your app and then perform a recursive raycasting with the entire asset via:
raycaster.intersectObject( gltf.scene, true, intersects );
By executing this code in a pointermove or pointerdown event listener you can find out whether the user interacts with the model or not.
Notice that three.js has no system to directly assign event listeners to 3D objects. You have to use a different solution like raycasting for this.
Currently, I am trying to dive deeper into grouped objects or better hierachic ordered objects. However I got a strange issue with the position and the visibility of a object3D and childs of those.
So i have a set of objects, a light source with is the main object so far, and a few spheres for example, which are childs of the the main object.
The problem is, that child objects, which are positioned behind another object ( siblings ) ( from the camera view ) are visible. And all childs objects appear infront of the main object while those actually positioned behind the main object.
Sadly i can't reproduce this in a codePen so i had to take some pictures of the scene, many apologies for that.
In the pictures, the camera rotates clockwise around the light source (main object to the left).
So basically what I am doing is:
mObj = new THREE.Object3D();
mObj.add(new THREE.Mesh(someGeometry, someMaterial);
cObj = new THREE.Object3D();
cObj.add(new THREE.Mesh(someGeometry, someMaterial);
mObj.add(cObj);
scene.add(mObj);
Is that related to the object hierachic order or something else?
The second more negligible issue is, that on one of my pc's, those parts of objects which are dark (because of no lighting), generate those strange black/grey faces, which i cant explain. Maybe Graphicscard/driver or something?
What's the distance between these objects? It could be a floating point rounding issue. I've run into it myself.
If it's so, and you're getting flickering models, you'll need to keep your camera and the active model at the origin, and move the universe around you to keep precision in the important places (near the player).
I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut <A>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).
I am working on a project which requires taking fbx models and viewing them in a THREEJS viewer. Most of the time these models come in with the correct pivot points but other times they do not. I am having a hard time figuring out what is causing this issue.
I am using this script to do the conversion from fbx to json:
https://github.com/mrdoob/three.js/blob/master/utils/converters/fbx/convert_to_threejs.py
You can find an example of an fbx file that has the wrong pivot point here:
http://s000.tinyupload.com/index.php?file_id=42525924957536854290
This model contains only one mesh and was exported from Maya with FBX Plugin version 2014.0.1. The pivot should be near the center of the model but it located at the bottom of the model when loaded in threejs. It appears to be placing the pivot at (0,0,0).
I ran a test on this model using the online model viewer at https://clara.io/. When I import the model using the fbx everything looks normal as can be seen here:
Next, I then export this model as THREEJS Scene json by using File -> Export All -> Threejs Scene. When I import the json I just exported via clara.io back into clara.io the pivot is wrong. This is the model after reimporting it as json into clara.io
Any suggestions on how to get the pivot points to always match up between Maya and Threejs would be greatly appreciated.
The issue is that ThreeJS doesn't support Pivots that are different than Transform origin of a model. This is actually somewhat standard for Game Engines.
What I would suggest is to first "Reset Pivots" in Clara.io on this object, and then go into Vertex mode in Clara.io on this object and select all vertices. Move the vertices so that they are relative to the Reset Pivot. This is letting you set any pivot you want because you are moving the vertices relative to the origin of this model. Then when you export, you will have your new pivot.
We can look at adding support for baking pivots. But it is a little complex because there are multiple distinct pivots -- one for scale and a separate one for rotation, so I guess we have to give you the option of which you want to bake into the object.
Best regards,
Ben Houston, ben#clara.io
I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)