Rotation snapping feature 'control.setRotationSnap' in TransformControls.js (Three.js) is not functioning properly

Attempting to utilize the functionality of "control.setRotationSnap" from the script "TransformControls.js", but unfortunately, it is not working as expected.

After conducting some research, I came across a forum post suggesting that the code might not be fully implemented yet ()

Here is my current code where I am trying to implement this feature:

let renderer, scene, camera, light1, light2, light3, orbit, control, texture, material, loader, mesh;

let renderer = new THREE.WebGLRenderer();
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 3000);
let light1 = new THREE.DirectionalLight(0xfffffe, 2);
let light2 = new THREE.DirectionalLight(0xfffeff, 1.75);
let light3 = new THREE.DirectionalLight(0xfeffff, 0.75);
let orbit = new THREE.OrbitControls(camera, renderer.domElement);
let control = new THREE.TransformControls(camera, renderer.domElement);
let material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
let loader = new THREE.STLLoader();

// Other initialization code...

// Code snippet where rotation snap functionality is supposed to be implemented:

if ( this.rotationSnap ) {
    rotationAngle = Math.round( rotationAngle / this.rotationSnap ) * this.rotationSnap;
}

this.rotationAngle = rotationAngle;

// End of code snippet

// More code...

This section of code handles the rotation snap functionality in TransformControls.js:

// Apply rotation snap

if ( this.rotationSnap ) rotationAngle = Math.round( rotationAngle / this.rotationSnap ) * this.rotationSnap;

    this.rotationAngle = rotationAngle;

My goal is to make the 3D object (STL) snap in 90-degree increments using "control.setRotationSnap". However, when attempting to do so, it does not work at all.

If anyone has encountered the same issue or has any insights, your help would be greatly appreciated.

Kind regards, Leon

Answer №2

Wow, I can't believe how simple the solution was!

The reason it wasn't working before is because the "TransformControls.js" script didn't have the "Math.degToRad" function that was used in their example code.

All you need to do is add this small snippet of code:

// Convert degrees to radians
Math.degToRad = function(degrees) {
    return degrees * Math.PI / 180;
};

to your code and everything will run smoothly!

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

Losing a specific characteristic of data occurs when assigning a JavaScript object

After dedicating a full day to investigating this case, I found myself losing hope. const Tests = (state = INIT_STATE, action) => { switch (action.type) { case GET_TEST_DETAIL: return { ...state, test: {}, error ...

An improved solution for avoiding repetitive typeof checks when accessing nested properties in the DOM

One common issue I encounter when working with nested DOM objects is the risk of undefined errors. To address this, I often use a conditional check like the one shown below: if("undefined" != typeof parent && "undefined" != typeof parent.main ...

learning how to combine two json arrays of objects and showcase them in a react component

What is the best way to combine this data and present it in a table with a map using React? The text will be in the first column and the count in the second. const handleSubmit = async (event) => { event.preventDefault(); let URL1 = " ...

What is the best way to implement an event listener for every button in a table row outcome?

I have a Rails application where I am populating a table using an @results variable, with each row representing a @result. My goal is to have buttons associated with each @result, and I'm attempting to use a JavaScript event listener for each button a ...

The Ionic2 http post request is missing the 'Access-Control-Allow-Origin' header

Here is the complete code snippet: this.http.post(link, data, { headers: headers }) .map(res => res.json()) .subscribe(data => { this.data.response = data._body; }, error => { console.log("Oops! An error occurred"); ...

Sending a JSON Object to an API endpoint using the $.ajax method

While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...

Selenium EventFiringWebDriver JavaScript: There is a SyntaxError due to a missing closing parenthesis after an argument in

Attempting to run a javaScript command through the EventFiringWebDriver class in Selenium. EventFiringWebDriver eventFiringWebDriver = new EventFiringWebDriver(driver); eventFiringWebDriver.executeScript("document.querySelector('[ng-reflect-title=&ap ...

Encountering a fatal error in the Next.js application: "Mark-compacts near heap limit allocation failed issue is hindering the smooth

When I'm working in Next.js, I often encounter the issue of not being able to run my project after work. https://i.stack.imgur.com/IA5w3.png ...

Struggling with integrating Bootstrap 4 Modals in Angular 2 environment

I attempted to incorporate a modal from into my navbar, but nothing happens when I click on it. <div class="pos-f-t fixed-top header"> <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> <button class="navbar- ...

Error encountered: The use of 'import' and 'export' is limited to 'sourceType: module' when attempting to install Tweakpane

I am currently learning JavaScript and have been following a course on Domestika that requires me to install the Tweakpane package. I usually use Git Bash for installing packages, and I have successfully installed others this way before. Here is the proces ...

How can you ensure seamless synchronization while logging in a user with ReactJS and retrieving data from the API?

Is there a way to synchronize and run these two functions in succession before calling console.log(user) and setLogin()? The goal is to ensure that all the information retrieved from the API is available in the user context before activating the setLogin() ...

What is the syntax for calling a constructor using "require"? Is it "require(module)(CONSTRUCTOR)"?

I am facing the following issue: I am trying to instantiate my constructor in this way: var object = require('module')([params]); The code for the module looks like this: function FunctionName(param) { // function body.. } exports = mod ...

The Ajax form is failing to retrieve the expected PHP data

My login system uses a combination of ajax and php. The form validation is handled through javascript, with the form data then being sent to php for database checks. In the past, this method has worked well for me, but in this instance, it seems 'NOTH ...

Struggling to concatenate array dynamically in Vue using ajax request

I am working on a Vue instance that fetches objects from a REST endpoint and showcases them on a web page. Most parts of the functionality work smoothly like filtering, however, there is an issue when attempting to add new objects by requesting a new "page ...

Retrieve the chosen option index using AngularJS

It is common knowledge that a select list can have multiple options, each starting from [0]. For example: [0]<option>E.U</option> [1]<option>India</option> [2]<option>Peru</option> In my Angular application, I am using ...

Changing the structure of a JSON array in JavaScript

I'm currently developing an ExpressJS application and I need to send a post request to a URL. My data is being retrieved from a MS SQL database table using Sequelize, and the format looks like this: [ { "x":"data1", "y":& ...

Access the contents of the selected cell in the MUI datagrid

When I choose a row from the datagrid, my attempt to access each cell value in that row always returns "undefined" when using selectedRowData.email. How can I correctly retrieve the data from a selected row's cells? <DataGrid checkboxSe ...

Discover identical JSON elements in 2 JSON arrays using JavaScript and add CSS styles to the corresponding items within a UL list

In order to manipulate JSON data using JavaScript, I am required to create an HTML UL list of tags based on a JSON array of Tag items. Furthermore, there is a second set of Tags in another JSON data-set that needs to be compared with the first Tag JSON da ...

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

Loop through the AJAX response containing JSON data

Need assistance in extracting specific information from each hotel key and its rates within this JSON structure using JavaScript: [ { "auditData": { "processTime": "1545", "timestamp": "2016-04-08 04:33:17.145", ...