The issue with object alignment in the camera rotation is not properly centered in the Three.js framework

After bending two meshes into a circle to create a 3D marquee, I'm facing issues with centering them to the camera.

For the full code, please visit 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);

It seems that the marquee is not centered after a few seconds. Could it be due to the camera or mesh positioning?

Thank you

javascript3dthree.js

Answer №1

//Exploring basic 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML form is causing my JavaScript variable to reset

Hey there! I'm encountering an issue with my form that contains JavaScript functions for adding rows to a table and resetting text fields within the form. The problem arises when I place an incrementing variable called rowCount inside the <form> ...

javascripthtml

The spinning wheel goes round and round while executing the location.reload() function

Currently, I am performing actions in my JavaScript function and then triggering a page refresh using location.reload(); I'm wondering if there is a straightforward method with jQuery to display a spinning wheel from the moment the page initiates the ...

javascriptjqueryhtml

How can I install fs and what exactly does it do in JavaScript?

As a beginner in the world of JavaScript, I am struggling with what seems like a basic issue. In my journey to develop some JavaScript code and utilize sql.js, I keep encountering an error at this line: var fs = require('fs'); This error is due ...

javascriptnode.jsfs

Tips for marking a textarea as mandatory when a choice is made

I'm creating an .html document for conducting a complete system check and confirming various aspects of its functionality. In this page, there is a table within a form structure where each row represents a step in the system verification process (e.g. ...

javascripthtmltextareaselectionrequired

Unpacking Objects in JavaScript and TypeScript: The Power of Destructuring

I have a variable called props. The type includes VariantTheme, VariantSize, VariantGradient, and React.DOMAttributes<HTMLOrSVGElement> Now I need to create another variable, let's name it htmlProps. I want to transfer the values from props to ...

javascriptreactjstypescriptdestructuring

What is the best way to store the JSON data that is returned in a JavaScript function as a variable

My goal is to save the client's IP address in a variable after fetching it in JSON format from api.ipify.org. I have managed to display the IP if I alert the result, but I am struggling to store it in a variable. This code snippet works: <script& ...

javascriptjsonfunctionvariablesip-address

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

I am working on a Rails 6 application where I compile assets using Webpack 4.39.1 with the help of the Webpacker gem. In my webpack configuration file (config/webpack/environment.js), I have included JQuery 3.4.1 and Popper.js as part of the ProvidePlugin ...

javascriptruby-on-railsnode.jswebpack

Using PHP, Ajax, and JavaScript, display interactive data from the server in a dynamic modal popup listbox within a Tinymce-WordPress

Currently, I am in the process of developing a WordPress plugin using TinyMCE. The main functionality involves a button that triggers a popup modal with some list boxes. These list boxes need to be populated with values fetched from the server. To accompli ...

javascriptphpajaxwordpresstinymce

Storing Material-UI Choices Using Redux State

Looking to integrate a Material-UI Select component with Redux data for persistent selections after page refresh. Within Redux, I have two arrays: the sourceTags array, consisting of clickable menu options, and the selectedTags array, containing the user& ...

javascriptreactjsreduxmaterial-uireact-hooks

What is the method for comparing a value in TypeScript that does not match a given value?

I am new to scripting languages and encountered an issue while using enums with if-else statements in TypeScript. To work around this problem, I have decided to use switch-case instead of if-else conditions. Despite trying !== and !===, they do not seem t ...

javascripttypescriptprotractor

What is the best way to execute a randomly chosen function in JavaScript?

I need help running a random function, but I'm struggling to get it right. Here's what I have so far: <script> function randomFrom(array) { return array[Math.floor(Math.random() * array.length)]; } function randomchords(){ randomFrom ...

javascriptjquery

Navigate forward to the next available input in a grid by using the tab key

My goal is to improve form entry efficiency by using the tab key to focus on the next empty input field within a grid component. If an input field already has a value, it will be skipped. For example, if the cursor is in input field 2 and field 3 is filled ...

javascriptjqueryangularjs

What is the best way to showcase the organized values according to their attributes?

How can I sort and display values based on their properties? For example, I want to only show the likes and convert them back into an object so I can use them as properties. I apologize for the previous edit, this is the updated version with a working sim ...

javascriptnode.jsexpress

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

javascriptphphtml

Examples of various spatial categories in the gun database, such as public space, user space, and frozen space

It appears that the Gun functionality is quite impressive - both practical and user-friendly! However, I am having trouble grasping the distinction between a public space put, a user space put, and a frozen space put. I've tried to illustrate this wit ...

javascriptauthenticationguncontent-indexing

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Generate a unique JavaScript token using user-specific information

I am in need of a unique identifier for users that can be generated without conflicting with other users' tokens. One idea I had was creating a token using the MD5 hash of navigator.userAgent + new Date().getTime(). However, I don't want to use a ...

javascriptjqueryrandomtoken

Programmatically remove a component from the DOM in Vue 3

I am working on a project similar to a spreadsheet with draggable cells, where I can move events, which are components, around. One of the challenges I'm facing is removing a component after adding it dynamically. I have tried using this code snippet ...

javascriptvue.jsdrag-and-dropvuejs3vue-component

Retrieve information from Node.js using Express

I am working on a server with Node.js and using Express to create a web application. I have successfully implemented a function called rss_interrogDB that retrieves an array from a database. Now, I am trying to use this array to display a list on the HTML ...

javascripthtmlajaxnode.jsexpress

Using ES6 Babel with multiple package.json files

For a large project, I am looking to break it down into multiple package.json files. This way, the dependencies for each part can be clearly defined and exported as separate entities. However, my goal is to compile all of these packages using webpack and ...

javascriptnpmecmascript-6babeljs