In three.js r96, existed translate(x,y,z). I would use this to move an object off of its origin point.
Now in r103, this is deprecated for translateX(x) however when looking at the console output of the mesh I see that if I have a position of say position.set(50,0,0) and a traslateX(50), then the attributes of the Mesh reveal a position of (100,0,0).
https://codepen.io/anon/pen/XQVmyZ
Here is an example of the problem. In this code I have three planes. The rotating plane must be pivoting on the y axis at the point of the intersection of red & blue.
If my plane widht is 100, then setting the position to (50,0,0) should move the blue center point to the outter most right edge of red. That should be blue's new origin.
Now if I translate blue on the x axis 50 then the origin point should still be at the same location but now blue when rotated would rotate on a Y axis located at blue's outter most left point. As you see this is not so.
A look into the Mesh reveals there is not translate and is only a position.
plane3.position.set(50,0,0);
//plane3.translate(50,0,0); //Used to work
plane3.translateX(50); //New translate, adds to position instead
//var vector = new THREE.Vector3( 1, 0, 0 );
//plane3.translateOnAxis(vector,40);
function render() {
requestAnimationFrame( render );
plane3.rotation.y += 0.03;
renderer.render( scene, camera );
}
My desired result is as it was where I can pivot blue on its outter most left Y axis.
It seems you are mixing the deprecated Object3D.translate() method with BufferGeometry.translate(). If you translate the geometry instead of the 3D object, it's possible to change the pivot point as expected. I hope the updated codepen shows your intended visual result: