The control of the ThreeJS TransformControl has been relinquished

I am currently working on a project using Typescript within the Autodesk Forge Viewer environment. My goal is to restrict the movement of the ThreeJS transform control to a specific area defined by min and max values for X, Y, and Z coordinates. Additionally, I keep track of any changes in the mesh position using a variable called prev_pos.

Within the 'change' event listener of the Transform Control, I compare the current mesh position to the specified min and max values.

If the mesh position falls outside of the designated area, I reset it to the limit and update prev_pos accordingly. However, I also want to release the control from the transform control so that it resets its position to match the attached mesh.

Currently, even though the attached mesh resets to the limit, the control can still be dragged. Subsequently, the control's position becomes offset from the mesh, causing unintended movements when hovering over the control. I attempted resetting the control position with transformControl.position.copy(mesh.position) but this approach proved ineffective. Below is the code snippet for the 'change' event:

 public onTxChange() {
console.log("TxChange");
if (!this.allowUpdate) {
  return;
}
let position: THREE.Vector3 = new THREE.Vector3(0, 0, 0);
if (this.m_mesh !== null) {

  position.x = this.m_mesh.position.x;
  position.y = this.m_mesh.position.y;
  position.z = this.m_mesh.position.z;

}
else {
  return;
}
const scaffoldGroupInfo: scaffold_group_info = g_scaffold_docking_panel_cmn.getScaffoldGroupInfo();
const color: string = scaffoldGroupInfo.color;
let deltaX: number = position.x - this.m_prevPos.x;
let deltaY: number = position.y - this.m_prevPos.y;
let deltaZ: number = position.z - this.m_prevPos.z;
console.log("DeltaX");
console.log(deltaX);
if (deltaX > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "X", false, color, deltaX);
}
else if (deltaX < 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "X", true, color, deltaX * -1);
}
if (deltaY > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Y", false, color, deltaY * 1);
}
else if (deltaY < 0) {
  <scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Y", true, color, deltaY * -1);
}
if (deltaZ > 0) {
  scaffold_cmn.cubeExpantion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Z", true, color, deltaZ);
}
else if (deltaZ < 0) {
  scaffold_cmn.cubeExpansion(g_scaffold_docking_panel_cmn.getsetHomePosition(), "Z", false, color, deltaZ * -1);
}

if (!scaffold_cmn.CubeResizable) {
  scaffold_cmn.ResetAttachedMeshPositionRotation();
  return;
}
this.m_prevPos = position;

}

Answer №1

One way to limit the movement of an object is by constraining its position within a specified range. You can achieve this by implementing the following code snippet in the change event handler, as discussed in a recent topic on the three.js forum here:

const min = new THREE.Vector3(-100, -100, -100);
const max = new THREE.Vector3(100, 100, 100);
transformControl.object.position.clamp(min, max);

After applying this code, the transform control should adjust its position limits accordingly when the update method is triggered. For more details, you can refer to the source code snippet located at: this link.

Keep in mind that a similar

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

Curious about the missing dependencies in React Hook useEffect?

I'm encountering the following issue: Line 25:7: React Hook useEffect has missing dependencies: 'getSingleProductData', 'isProductOnSale', and 'productData'. Either include them or remove the dependency array react-hoo ...

What is the best way to create a linear flow when chaining promises?

I am facing an issue with my flow, where I am utilizing promises to handle the process. Here is the scenario: The User clicks a button to retrieve their current position using Ionic geolocation, which returns the latitude and longitude. Next, I aim to dec ...

What strategies can be utilized to extract the structure of JSON files imported via a TypeScript asynchronous function?

Examining the example below: export type AppMessages = Awaited<ReturnType<typeof loadMessages>>; export type Locale = "en" | "fr" | "es"; export const loadMessages = async (locale: Locale) => ({ foo: locale ...

Tips for utilizing regex to locate words and spaces within a text?

I'm feeling so frustrated and lost right now. Any help you can offer would be greatly appreciated. I am currently dealing with an issue in Katex and Guppy keyboard. My goal is to create a regex that will identify the word matrix, locate the slash that ...

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

Setting up Cypress.config file for SQL database testing with Cypress

Currently, I am looking to experiment with SQL databases. I have SqlWorkbench installed and have mysql added in my package file. However, I encountered an issue while attempting to run Cypress as SyntaxError: Unexpected token 'export' The probl ...

The assets path is the directory within the installed package that houses the main application files following the completion of a

I have a Vue.js UI component that is internally built using webpack. This reusable UI component library references its images as shown below: <img src="./assets/logo.png"/> <img src="./assets/edit-icon.svg"/>   <i ...

Is there a way to verify within the "if" statement without repeating the code?

Is there a way in javascript (or typescript) to prevent redundant object rewriting within an if statement condition? For example: if (A != null || A != B) { // do something here } // can it be done like this: if (A != null || != B) { // avoid repeating ...

How can Angular 4 manage an object containing other objects most effectively?

Who can guide me on the best way to handle a data structure like this: { "1":{ "id":"1", "name":"Facebook", "created_at":"", "updated_at":"", "fields":{ "1":{ "id":"1" ...

How can Observable data be transferred to PDF (pdfMake) in Ionic with Angular?

I am currently utilizing pdfMake to create PDFs from observable data, but I am encountering an issue where the PDF either appears empty or displays [object Object]. Below is the snippet of my code: downloadPDF() { pdfMake.vfs = pdfFonts.pdfMake.vfs; ...

Exploring methods to successfully upload a blob to Firebase and modify it using cloud functions

For days now, I've been attempting to successfully upload a file to firestorage using firebase functions but haven't had any luck. This is the progress I've made so far: export const tester = functions.https.onRequest(async (request, respons ...

Error occurs when attempting to instantiate a class with parameters that do not match any available constructor signatures

I am attempting to encapsulate each instance of router.navigateByUrl within a class function, with the intention of calling that function in the appropriate context. However, I am encountering an error that states 'Supplied parameters do not match any ...

"encountered net::ERR_NAME_NOT_RESOLVED error when trying to upload image to s3 storage

I am currently developing an application using Angular. I have been attempting to upload a picture to my S3 bucket, but each time I try, I encounter this error in the console. https://i.stack.imgur.com/qn3AD.png Below is the code snippet from my upload.s ...

Steer clear of excessive stretching when using Three.js

I am working on wrapping a 3D model with textures in three js. However, I have noticed that in certain areas of the model, the image appears to be stretching even though the texture resolution is high. https://i.sstatic.net/9hcoA.png ...

The process of removing and appending a child element using WebDriverIO

I am trying to use browser.execute in WebDriverIO to remove a child element from a parent element and then append it back later. However, I keep receiving the error message "stale element reference: stale element not found". It is puzzling because keepin ...

Unable to use OrbitControls with Node 12's ES6 import functionality

Currently, I am working with Node 12 (experimental-modules) and using npm for three.js. However, I'm facing issues with Imports when trying to include OrbitControls.js in my project. My index.js file is set as "script: module". Unfortunately, none of ...

Guide to correcting the file path of an external css within the public directory on Express framework

I am facing an issue with loading external CSS files and need some help to fix the path. Despite multiple attempts, I have been unsuccessful so far. Below is my category structure: https://i.stack.imgur.com/sLTcN.png Within the header.ejs file, this is h ...

Ways to retrieve particular items/properties from the JSON response string

Is there a way to extract and display only the first 3 items from my JSON data instead of the entire string? Below is the code I am currently using to loop through and display my records: <tr v-for="(list) in myData" v-bind:key="list.ema ...

Using 'import' and 'export' in Ionic 2 requires specifying 'sourceType: module'

Starting a new project using Ionic 2 and encountering an error after installing angular2-jwt: ParseError: 'import' and 'export' may appear only with 'sourceType: module' D:\desenv\arquivos\workspace_inbit&bsol ...

The specified type 'Observable<{}' cannot be assigned to the type 'Observable<HttpEvent<any>>'

After successfully migrating from angular 4 to angular 5, I encountered an error in my interceptor related to token refreshing. The code snippet below showcases how I intercept all requests and handle token refreshing upon receiving a 401 error: import { ...