Object on camera rotation isn't centered three js

Question

I've created a 3D marquee by bending two meshes into a circle, however I'm having trouble getting them to center to the camera.

Please reference https://jsfiddle.net/siiiick/1jh49e1u/

var text = "EXPRESS FREE SHIPPING WORLDWIDE OVER 200€ / 200% 150$ "; 
var geoParams = {
  size: 208,
  height: 1,
  curveSegments: 4,
  font: "junicode",
  // bevelEnabled: false,
  // bevelThickness: 1,
  // bevelSize: 1,
}

var textMaterial = new THREE.MeshPhongMaterial({
  color: 0x000000
});

var deg = Math.PI / 4.8;

var geoTop = new THREE.TextGeometry(text, geoParams);
var textTop = new THREE.Mesh(geoTop, textMaterial);

geoTop.computeBoundingBox();
textWidth = geoTop.boundingBox.max.x - geoTop.boundingBox.min.x;

controls.target.set(-textWidth * .1 - 10, 0, -textWidth / 3.8);

textTop.rotation.y = Math.PI;
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textTop.geometry);
textTop.position.set(-0.5 * textWidth + textWidth * .867, 0, -textWidth * .577);

var geoBot = new THREE.TextGeometry(text, geoParams);
var textBot = new THREE.Mesh(geoBot, textMaterial);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
modifier.set(new THREE.Vector3(0, 0, -1), new THREE.Vector3(0, 1, 0), deg).modify(textBot.geometry);
textBot.position.set(-0.5 * textWidth, 0, 0);

scene.add(textTop);
scene.add(textBot);

As you can see after a few seconds the the marquee isn't centered. Do you think it's as a result of the camera positioning or the mesh positioning?

Thanks

Answer 1

//Testing some easy camera centering code...

 var renderer = new THREE.WebGLRenderer(); var w = 300; var h = 200; renderer.setSize(w, h); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, // Field of view w / h, // Aspect ratio 0.1, // Near 10000 // Far ); camera.position.set(15, 10, 15); camera.lookAt(scene.position); controls = new THREE.OrbitControls(camera, renderer.domElement); var light = new THREE.PointLight(0xFFFF00); light.position.set(20, 20, 20); scene.add(light); var light1 = new THREE.AmbientLight(0x808080); light1.position.set(20, 20, 20); scene.add(light1); var light2 = new THREE.PointLight(0x00FFFF); light2.position.set(-20, 20, -20); scene.add(light2); var light3 = new THREE.PointLight(0xFF00FF); light3.position.set(-20, -20, -20); scene.add(light3); var sphereGeom = new THREE.SphereGeometry(5, 16, 16); var material = new THREE.MeshLambertMaterial({ color: 0x808080 }); var mesh = new THREE.Mesh(sphereGeom, material); scene.add(mesh); var mesh1 = new THREE.Mesh(sphereGeom, material); mesh1.position.x += 5; mesh.add(mesh1); var mesh2 = new THREE.Mesh(sphereGeom, material); mesh2.position.y += 5; mesh2.position.x += 9; mesh.add(mesh2); var grp0 = mesh; var mesh = new THREE.Mesh(sphereGeom, material); scene.add(mesh); mesh.position.x += 30; var mesh1 = new THREE.Mesh(sphereGeom, material); mesh1.position.x += 15; mesh.add(mesh1); var mesh2 = new THREE.Mesh(sphereGeom, material); mesh2.position.y += 12; mesh2.position.x += 9; mesh.add(mesh2); renderer.setClearColor(0xdddddd, 1); var grp1 = mesh; var curGrp; var targPos; var targLook; var tmp = new THREE.Vector3(); var vbox; function focusCam(targ) { const boundingBox = new THREE.Box3(); boundingBox.setFromObject(targ) var center = boundingBox.getCenter(new THREE.Vector3()) var sz = boundingBox.getSize(new THREE.Vector3()); var minZ = sz.length() + camera.near; var lookOffset = new THREE.Vector3(0, 0, 1); lookOffset.applyQuaternion(camera.quaternion); lookOffset.multiplyScalar(minZ) targLook = center.clone(); targPos = new THREE.Vector3().copy(center).add(lookOffset) if (!vbox) { vbox = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material.clone()) vbox.material.transparent = true; vbox.material.opacity = 0.15; scene.add(vbox) } vbox.scale.copy(sz); vbox.position.copy(center); } renderer.domElement.onclick = (evt) => { if (!curGrp) { curGrp = grp0; } else if (curGrp === grp0) { curGrp = grp1 } else if (curGrp === grp1) { curGrp = grp0 } focusCam(curGrp); } (function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); if (targPos) { tmp.copy(targPos).sub(camera.position).multiplyScalar(0.01) if (tmp.length() > 0.01) { camera.position.add(tmp) controls.target.add(tmp);//copy(targLook); //camera.lookAt(targLook); } else targPos = undefined; } })(); 

 <script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>