Why does a mesh rotate over its own axis but Objects3D rotate over the world axis?

Question

Here's some code as example:

var geometry = new THREE.BoxGeometry( larguraX,altura,comprimentoZ);     
var material = new THREE.MeshBasicMaterial( {color: "pink"} );
var mmesh = new THREE.Mesh( geometry, material );

var objj = new THREE.Object3D();
objj.add(mmesh);
...

Why isn't this:

mmesh.translateX(50);
mmesh.rotateY(Math.PI/2);

resulting just like this:

objj.translate(50);
objj.rotateY(Math.PI/2);

Answer 1

They are the same.

Note the red and blue cubes are perfectly aligned making a purple box

 'use strict'; /* global THREE */ function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({canvas: canvas}); const fov = 75; const aspect = 2; // the canvas default const near = 0.1; const far = 200; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(50, 0, 2); const scene = new THREE.Scene(); const boxWidth = 1; const boxHeight = 1; const boxDepth = 1; const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth); const material1 = new THREE.MeshBasicMaterial({ color: 'red', transparent: true, opacity: 0.5, }); const material2 = new THREE.MeshBasicMaterial({ color: 'blue', transparent: true, opacity: 0.5, }); const cube1 = new THREE.Mesh(geometry, material1); const cube2 = new THREE.Mesh(geometry, material2); const obj = new THREE.Object3D(); scene.add(cube1); scene.add(obj); obj.add(cube2); cube1.translateX(50); cube1.rotateY(Math.PI / 2); obj.translateX(50); obj.rotateY(Math.PI / 2); renderer.render(scene, camera); } main(); 

 <canvas id="c"></canvas> <script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/three.min.js"></script> 

you probably need to post more code