I am currently working on a project using Three.js to create a dynamic scene where objects can be manipulated. I have successfully loaded objects using the OBJMTLLoader, but I am facing an issue with their origins. The objects still retain their original origin positions, causing them to snap back when moved. Despite researching solutions involving centroids and bounding boxes, I keep encountering undefined errors. Any assistance on this matter would be greatly appreciated!
loader.load('example.obj', 'example.mtl', function (object) {
object.position.y = -50; // Setting new origin
object.scale.set(scale, scale, scale);
});
Below is the code snippet for moving the objects:
function onDocumentMouseMove(event) {
event.preventDefault();
mouse.x = ( (event.clientX - container.offsetLeft) / container.clientWidth ) * 2 - 1;
mouse.y = -( (event.clientY - container.offsetTop ) / container.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (SELECTED) {
var intersects = raycaster.intersectObject(plane);
SELECTED.position.copy(intersects[0].point.sub(offset));
return;
}
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
INTERSECTED = intersects[0].object;
plane.position.copy(INTERSECTED.position);
plane.lookAt(camera.position);
updateLightPosition();
}
container.style.cursor = 'pointer';
} else {
INTERSECTED = null;
container.style.cursor = 'auto';
}
}
// More functions...