I'm loading and object with the ColladaLoader in three.js, so I have an bunch objects in the scene. Some of them are regular shapes such as: cubes, spheres, etc. and for these ones I can do this:
var position = {
x: selectedObject.position.x,
y: selectedObject.position.y,
z: selectedObject.position.z
};
controls.target = new THREE.Vector3(position);
Where controls are the OrbitControls for the camera. The camera gets centered in that position and works fine, the problem is when the objects are not regular shapes, but geometries generated by vertices. In this case, I already tried 4 different approaches without the expected result.
1.
var position = {
x: selectedObject.matrixWorld.getPosition().x,
y: selectedObject.matrixWorld.getPosition().y,
z: selectedObject.matrixWorld.getPosition().z
};
2.
var centerX = selectedObject.geometry.boundingSphere.center.x;
var centerY = selectedObject.geometry.boundingSphere.center.y;
var centerZ = selectedObject.geometry.boundingSphere.center.z;
var position = { x: centerX, y: centerY, z: centerZ };
3.
getCentroid(selectedObject.geometry.vertices);
function getCentroid(vertices) {
var x = y = z = 0;
vertices.forEach(function (element, index, array) {
x += element.x;
y += element.y;
z += element.z;
});
return new THREE.Vector3(
x / (vertices.length),
y / (vertices.length),
z / (vertices.length)
);
}
4.
var position = getCenter(
getMaxnMinCenter(selectedObject.geometry.vertices),
selectedObject.matrixWorld
);
function getMaxnMinCenter(vertices) {
var maxX = maxY = maxZ = vertices[0];
var minX = minY = minZ = vertices[0];
vertices.forEach(function (element, index, array) {
if (element.x <= minX.x) {
minX = element;
}
if (element.y <= minY.y) {
minY = element;
}
if (element.z <= minZ.z) {
minZ = element;
}
if (element.x > maxX.x) {
maxX = element;
}
if (element.y > maxY.y) {
maxY = element;
}
if (element.z > maxZ.z) {
minZ = element;
}
});
return {
minimumX: minX,
minimumY: minY,
minimumZ: minZ,
maximumX: maxX,
maximumY: maxY,
maximumZ: maxZ,
}
}
It is important to notice that regular shapes use a scale of 1.0 while the other objects use a scale of 0.005.
Thank you.
I'm loading and object with the ColladaLoader in three.js, so I have an bunch objects in the scene. Some of them are regular shapes such as: cubes, spheres, etc. and for these ones I can do this:
var position = {
x: selectedObject.position.x,
y: selectedObject.position.y,
z: selectedObject.position.z
};
controls.target = new THREE.Vector3(position);
Where controls are the OrbitControls for the camera. The camera gets centered in that position and works fine, the problem is when the objects are not regular shapes, but geometries generated by vertices. In this case, I already tried 4 different approaches without the expected result.
1.
var position = {
x: selectedObject.matrixWorld.getPosition().x,
y: selectedObject.matrixWorld.getPosition().y,
z: selectedObject.matrixWorld.getPosition().z
};
2.
var centerX = selectedObject.geometry.boundingSphere.center.x;
var centerY = selectedObject.geometry.boundingSphere.center.y;
var centerZ = selectedObject.geometry.boundingSphere.center.z;
var position = { x: centerX, y: centerY, z: centerZ };
3.
getCentroid(selectedObject.geometry.vertices);
function getCentroid(vertices) {
var x = y = z = 0;
vertices.forEach(function (element, index, array) {
x += element.x;
y += element.y;
z += element.z;
});
return new THREE.Vector3(
x / (vertices.length),
y / (vertices.length),
z / (vertices.length)
);
}
4.
var position = getCenter(
getMaxnMinCenter(selectedObject.geometry.vertices),
selectedObject.matrixWorld
);
function getMaxnMinCenter(vertices) {
var maxX = maxY = maxZ = vertices[0];
var minX = minY = minZ = vertices[0];
vertices.forEach(function (element, index, array) {
if (element.x <= minX.x) {
minX = element;
}
if (element.y <= minY.y) {
minY = element;
}
if (element.z <= minZ.z) {
minZ = element;
}
if (element.x > maxX.x) {
maxX = element;
}
if (element.y > maxY.y) {
maxY = element;
}
if (element.z > maxZ.z) {
minZ = element;
}
});
return {
minimumX: minX,
minimumY: minY,
minimumZ: minZ,
maximumX: maxX,
maximumY: maxY,
maximumZ: maxZ,
}
}
It is important to notice that regular shapes use a scale of 1.0 while the other objects use a scale of 0.005.
Thank you.
Share Improve this question edited Jul 19, 2014 at 9:00 user128511 asked Jul 17, 2014 at 16:26 Alex RamirezAlex Ramirez 1271 gold badge1 silver badge12 bronze badges 2-
1.
Vector3does not take a constructor argument that is a custom object of your type. 2. You should avoidnewand usecontrols.target.set()orcontrols.target.copy()anyway. 3. What is your question? – WestLangley Commented Jul 17, 2014 at 16:58 - Thank you for your answer. My question is if is there anything that I am missing to get these objects centered? I mean, I guess I am getting the wrong position of the object, because when I pass it to controls.target the camera is not centered, but it moves a bit to the right, left, up, or down. Should I take the scale of the object into the equation? – Alex Ramirez Commented Jul 17, 2014 at 17:13
2 Answers
Reset to default 13var bb = new THREE.Box3()
bb.setFromObject(selectedObject);
bb.center(controls.target);
use a boundingbox to find the center of object
Try with:
controls.target.copy( selectedObject.position );