I've been attempting to position a mesh at a specific location, but I'm facing difficulties in achieving the exact placement I desire. While I can successfully position a simple sphere so that its left-most point aligns with the left border of my canvas, the same method doesn't seem to work for a more complex loaded mesh. I find this discrepancy puzzling.
To start off, I set up a basic scene:
// The bottom-left corner is considered as (0,0)
const camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 3);
// Adding ambient light
const ambient = new THREE.AmbientLight(0x404040, 0.8); // Soft white light
scene.add(ambient);
camera.position.z = 1;
renderer.setSize(
600, 600 // Ensuring a square canvas
);
Next, I load my mesh using objectLoader:
objectLoader.load(
// Specifying resource URL as first parameter
'some/url/to/my/object/',
// Callback function upon successful loading
function (object) {
scene.add(object);
object.scale.set(0.3, 0.3, 0.3)
object.position.set(0.5,0.5, 0) // Initial center position
// Attempting to align the left-most point of the mesh with the canvas edge
var box = new THREE.Box3().setFromObject(object);
let width = box.max.x - box.min.x
object.position.x = width * 0.5; // Adjusting the position
// For the right edge alignment
const object2 = object.clone()
scene.add(object2)
object.position.x = 1 - (width * 0.5) // Adapting the position
})
Despite these adjustments, there seems to be an offset affecting both objects equally. After careful observation, it appears that both objects are offset by roughly 0.035 units. I am determined to identify the source of this seemingly random offset.
In an effort to troubleshoot, I substituted the mesh with a simple sphere geometry. Surprisingly, the translation operation described earlier works flawlessly with the sphere:
const geometry = new THREE.SphereGeometry( 0.1, 32, 16 );
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
var sphereBox = new THREE.Box3().setFromObject(sphere);
let sphereBox_width = sphereBox.max.x - sphereBox.min.x
sphere.position.x = sphereBox_width * 0.5; // Position adjustment
sphere.position.y = 0.8; // Arbitrary placement
const sphere2 = sphere.clone()
scene.add(sphere2);
sphere2.position.x = 1 - (sphereBox_width * 0.5); // Same operation on other side
It's interesting to note that although the code implementation remains consistent, the positioning works seamlessly with spheres but not with human figure meshes. Any insights on how to accurately position object and object2 meshes at the borders, similar to what was achieved with the spherical objects? What could be causing the differing outcomes?