How to set ThreeJS origin point? - three.js

I'm new to ThreeJS. Currently, I wanna load a model from .obj file and use AxesHelperto measure its length. However, once I loaded the model I found the origin point of the model is different with the origin point of AxesHelper, there is a distance between them. I know I could set their position manually, but I hope once I load a model, the origin of the model is the same with AxesHelper. How could I set the origin point of them exactly same? Thanks in advance.

The origin point depends on how the geometry is translated relative to its local (0,0,0) point. You usually get good results by centering the object's geometry based on its bounding box via BufferGeometry.center(). You can also directly use the respective translate() method to translate the geometry with an arbitrary offset.
In general, it's preferable to make such model adjustments during the design phase in a tool like Blender and not after the import in a 3D engine.

Related

Reset 3d model positions in A-Entity

I am using AFrame to load some 3d models from a third-party (using the GLTF-Loader). Unfortunately some of the models have their origins set to random x,y,z coordinates so they look offset when they appear. Is there any way to null their offsets without moving the a-entity they get loaded into?
I don't think you can make a general assumption about what the center of a model is. Imperfect solutions are:
Apply a manual offset from observation of the particular model.
Edit the model center of coordinates in a 3D package like Blender or Maya and re-export to glTF.

Modifying the length of different bodyparts in three.js

I have a model of a human body, I am able to load that in threejs with the obj loader. Now after loading the model in threejs I need to do some post-processing like
scaling the length of arm
scaling the length of leg
Is it possible to do that, how can I do that ? I know that obj file store the necessary information to create meshes(i.e. vertices and faces) moreover material information if required. Can we add any extra information to achieve this?
You want to rig your model. You need to define the skeleton, and Three.js can then use "bones" to scale, position and stretch aspects of your mesh. A simple example of a rigged model in three.js is here:
https://threejs.org/docs/#api/objects/SkinnedMesh
Rigging your model in blender is available as a tutorial here: https://www.youtube.com/watch?v=eEqB-eKcv7k&index=15&list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg

Finding point on 3d model based on image

I'm looking for a point where to start and how to do it right. I have a 3d model of an object. On this object are special points. Another thing I have is real photo of this object with source of light
coming from one of the points. What I want to achieve is to in some way comapre this photo and model to be able by basing on source of light to determine what specific point it is.
Which technology/library will allow me to achieve desired result and where I should start looking?
Edit:
To be more accurate. I don't have any data yet. But camera will be placed in fixed position same as metal part. This part will be rotated only in single axis. And this part have different shapes on different angles so it will be easier (I think) to match it with 3d model.

How to rotate a model on a plane?

I am using a plane geometry to represent a terrain model with different "y" values(altitude). Also using the raycaster function I am able to move the model on the plane.
I need a way to rotate the model a be parallel with the current face its on without changing its path orientation.
Is there a way to define rotation by a face of a geometry?
theCorrect me if I'm wrong here, it sounds like you want to have both local (on the face) and global (in the direction of your "path orientation") rotations integrated here. This is, in general, one of those tricky and somewhat context-specific problems that will require you to mix two different sources of rotation. In a typical Euler-style rotation, it sounds like you want to rotate around Y according to the path (I'm assuming the path is in top-down 2D here -- it's these assumptions tat make the problem impossible to definitively answer!), while rotating around X and Z according to the normal of the surface. Try taking assembling a THREE.Euler that way -- does it get you in the neighborhood?

How to remove a section of a CubeGeometry?

At the moment I'm using ThreeCSG/CSG to subtract a small cube from a much larger cube. This works fine, but only the look of it changes not the actual geometry. So when using PhysiJS (Physics engine) on another cube, it doesn't fall into the hole but acts like it normally would. Click for Demo.
Is there any way I can actually remove a section from a CubeGeometry so that objects can fall into it - not just for display purposes? Thanks!
ThreeCSG does change the geometry, by which I mean geometry in the sense of Three.js -- the collection of vertices, the faces, etc. I think what you mean is that ThreeCSG does not change the physics-based properties of your object.
According to https://github.com/chandlerprall/Physijs/wiki/Basic-Shapes , it appears as though you have to use Physijs.ConcaveMesh as it "matches any concave geometry you have, i.e. arbitrary mesh", and it is the only one that has a change of supporting a non-convex physical object.

Resources