Improper Placement of TransformControls in three.js

Using the following code snippet, I am able to generate a box:

let v = [
            new THREE.Vector3(-100,30,10),
            new THREE.Vector3(-100,30,-10),
            new THREE.Vector3(-100,-10,10),
            new THREE.Vector3(-100,-10,-10),
            new THREE.Vector3(-110,30,-10),
            new THREE.Vector3(-110,30,10),
            new THREE.Vector3(-110,-10,-10),
            new THREE.Vector3(-110,-10,10)
        ];
        let f = [
            new THREE.Face3(0,2,1),
            new THREE.Face3(2,3,1),
            new THREE.Face3(4,6,5),
            new THREE.Face3(6,7,5),
            new THREE.Face3(4,5,1),
            new THREE.Face3(5,0,1),
            new THREE.Face3(7,6,2),
            new THREE.Face3(6,3,2),
            new THREE.Face3(5,7,0),
            new THREE.Face3(7,2,0),
            new THREE.Face3(1,3,4),
            new THREE.Face3(3,6,4)
        ];
        let g = new THREE.Geometry();
        g.mergeVertices();
        g.vertices = v;g.faces = f;
        let m = new THREE.MeshBasicMaterial({color:0xff0000,side:THREE.DoubleSide});
        let mesh = new THREE.Mesh(g,m);
        scene.add(mesh);

However, when attempting to use THREE.transformControls, it does not appear on the mesh and instead remains in the center of the scene. Should I adjust the box's matrix or make other modifications?

javascriptthree.js

Answer №1

If you want to modify your mesh, consider translating it rather than its geometry.

let vertices = [
  new THREE.Vector3(5, 30, 10),
  new THREE.Vector3(5, 30, -10),
  new THREE.Vector3(5, -10, 10),
  new THREE.Vector3(5, -10, -10),
  new THREE.Vector3(-5, 30, -10),
  new THREE.Vector3(-5, 30, 10),
  new THREE.Vector3(-5, -10, -10),
  new THREE.Vector3(-5, -10, 10)
];

Simply adjust the mesh translation as follows:

mesh.position.x = -105;

If altering vertex coordinates during creation is not possible, determine the centroid of the geometry, utilize the .center() method, and then move the mesh to the newly identified centroid position.

geometry.computeBoundingBox();
var centroid = new THREE.Vector3();
centroid.addVectors(geometry.boundingBox.min, geometry.boundingBox.max).divideScalar(2);
geometry.center();

...
mesh.position.copy(centroid);

Check out this jsfiddle example for reference (r87).

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

I am experiencing difficulties with my jQuery animation function as it does not seem to be functioning properly despite successful

Can someone knowledgeable in jQuery and JavaScript please help me understand why this code isn't functioning as expected? The goal is for the image with the id "previmage" to expand and then shrink when the changeclass function is triggered. However ...

javascriptjqueryhtmljquery-animate

Generating HTML content using JavaScript object data

I have a JavaScript file that holds data in the form of objects : let restaurant_A = { name: "BBQ place", min_order: 20, delivery_charge: 5, menu: { //First category "Appetizers": { //First it ...

javascriptobject

Implementing a design aesthetic to installed React components

After downloading a react multiselect component created by an individual, I installed it using npm install .... and incorporated the component in my react code with <MultiSelect .../>. The dropdown checkbox 'menu' is designed to allow users ...

javascriptcssreactjsreact-component

Tips for checking form input validity prior to opening a modelDialog

After successfully validating all required form fields, I am trying to open a modal dialog. Although I have managed to validate the form, I am struggling to write the code that will trigger the opening of the modal dialog upon successful validation. Do y ...

javascriptjqueryhtmlspring-mvc

Why are the values in a JavaScript nested array not accessible?

I am currently developing a Telegram application for a gaming project. The process involves multiple steps: Step1 requires me to call the MYSQL database to fetch data in lua. Step2 involves sending the table data to my NUI in the telegram.js file. Step3 is ...

javascriptarraysstringlua

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

javascriptjqueryhtmlcss

Is it possible to create a bot that's capable of "hosting events" using Discord.js?

I am searching for a solution to host "events" using Discord.js. After some research, I stumbled upon this. Although it seems to be exactly what I am looking for, the website does not provide any code examples to help me try and replicate its functionali ...

javascriptnode.jsbotsdiscord.jspm2

How to efficiently load SharePoint profile images in an asynchronous manner

Currently, I am working within a SharePoint farm that has User Profiles enabled. Within this environment, we are developing a community feature that includes a profile wall showcasing all members of the community. My task involves retrieving and displaying ...

javascriptjqueryajaxsharepointimage-processing

Receiving feedback from an Ajax request

When attempting to retrieve the responseText from an AJAX call created in plain JavaScript, there seems to be an issue where Firebug can detect the request but cannot obtain a reference to the responseText. Below is the code for the function: function ge ...

javascriptajax

What is the process for removing a selection in V-autocomplete in Vuetify?

One of the features I implemented in my project is using Vuetify's v-autocomplete component. It allows users to search for and retrieve necessary information from an API. However, I encountered a scenario where I needed to delete the selection after t ...

javascriptvue.jsvuetify.js

Looping through data in AngularJS with duplicated entries

I'm having an issue with my AngularJS ng-repeat when trying to display JSON data. The records are duplicating, but only after reloading the page. Initially, everything works fine. Take a look at the JSON data below: [{ "EmployeeName": "Jishn ...

javascriptangularjsjson

What is the best way to assign a value to the param tag of an applet using JavaScript variables

This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...

javascripthtmldeploymentapplet

Activate Bootstrap button functionality with JavaScript

Hey team, I've got a Bootstrap button on my HTML page: ..... <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ... <div class="accept-btn"> <button type="button" class="bt ...

javascripthtmlcsstwitter-bootstrap

What is the best way for Protractor to effectively wait for a popover to be displayed and verify that it does not contain an empty string?

Whenever you hover over it, this appears - my popup: https://i.sstatic.net/Bm9tC.gif This is what the html looks like before we add the popover to the DOM: <span tariff-popover="popover.car2go.airport" class="ng-isolate-scope"> <s ...

javascriptangularjsprotractorpopover

I have to retrieve the `$_GET['loc']` parameter that is being passed through AJAX communications

My website has an index.php page with two types of queries: location and search queries. I am utilizing ajax for the location query. Here is the HTML structure: <ul class="dropdown"> <li><a href="?loc=dc">City</a></li> & ...

phpjavascriptmysqlajax

What could be causing MS browsers to transform my object array into an array of arrays?

Noticing an interesting behavior with Microsoft browsers especially when dealing with data returned from our product API. It seems that the array of 52 product objects is being transformed into several arrays, each containing only 10 objects. Our error tr ...

javascriptarraysjsoninternet-explorermicrosoft-edge

Calculate the total number of seconds from an ISO8601 duration with TypeScript by utilizing the date-fns library

Given an ISO8601 duration string like "PT1M14S," I am looking to convert it to seconds as an Integer using the date-fns library in TypeScript. ...

javascripttypescriptdatetimeiso8601date-fns

jQuery form validation not functioning as expected

I'm attempting jQuery form validation but encountering issues with the desired functionality. I would like the border of an input to turn red when it's empty upon focus out. Alternatively, I aim to incorporate the "has-danger" bootstrap class to ...

javascriptjqueryhtmlcssfrontend

Is React failing to communicate with Express?

As a newcomer to Node.js, react, and Express, I am working on building a basic application but encountering difficulties initializing express. Upon running npm start, the terminal displays the following message: ./node_modules/express/lib/view.js ...

javascriptnode.jsreactjsexpress

Utilizing the jQuery index for organizing JSON keys

Recently, I came across an interesting issue with a jQuery event handler in my code. When clicked, this specific event creates a JavaScript object based on a list of favorite links: $('#saveFavorites').on('click', function(){ a ...

javascriptjqueryjson