How can dat.GUI convert values to degrees within the control panel in Three.js?

In the control panel, I created a basic slider to adjust the position and rotation of an object. Though adjusting the position is straightforward since the values are relative, I want to display the rotation values in degrees. This is the code snippet for the rotation controls:

gui
  .add(mesh.rotation, "x")
  .min(Math.PI * -1)
  .max(Math.PI)
  .step(0.01)
  .name("Rotate on X axis");

Here is how the rotation control is displayed in the panel:

https://i.sstatic.net/xbVgQ.jpg

The goal is to represent angles from -180 to 180 degrees.

javascriptthree.jsdegreesdat.guiradians

Answer №1

To effectively handle the conversion from degrees to radians for your mesh rotation, you'll need to create a placeholder object that stores the values in degrees. Utilizing the `.onChange()` event will allow you to monitor when the value changes and execute the conversion.

// Placeholder object to store values in degrees
var degrees = {
    x: 0,
    y: 0,
    z: 0
};

gui
    .add(degrees, "x")
    .min(-180)
    .max(180)
    .step(1)
    // Call this function whenever the value changes
    .onChange(() => {
        console.log(degrees.x);

        // Convert degrees to radians and assign to mesh rotation
        mesh.rotation.x = THREE.MathUtils.degToRad(degrees.x);
    });

For the conversion process, THREE.MathUtils.degToRad() is utilized.

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

Vue component fails to render due to a simple issue

I've been diving into Vue.JS and I'm facing an issue where the component I created isn't showing up on the page. Here's a snippet of my component: import Vue from 'vue' const card = new Vue({ el: '#card', data: ...

javascriptvue.js

Utilizing form data to upload images and send them back to the front end within a React js application

I am working on a project using NestJS and React JS to create an image uploader. In React, I have the following setup: const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img& ...

javascriptreactjsnestjs

I am having trouble starting a server on localhost with the command npm run dev

Currently, I am in the process of developing a website using react.js and tailwindcss. However, when attempting to test my progress by running the "npm run dev" command, I discovered that it is not starting a server on localhost. I am unfamiliar with this ...

javascriptnode.jsnpmnpm-start

Discover similarities between two arrays

My goal is to compare two arrays and generate a JSON array marking true if there's a match and false if there isn't. The second array will always have values that match some from the first, and it will be smaller as it's derived from the fir ...

javascriptarraystypescriptmatch

Is a shifting background image possible?

Can anyone shed some light on how the dynamic background image on this website is created? Is it a JavaScript plugin, a simple .gif, or something else entirely? Appreciate any insights! ...

javascriptjquery

Utilizing multiple buffers within shaders in Three.js can enhance the rendering process. By implementing WebGL with the setRenderTarget function

I am currently trying to grasp the concept of writing a shader in three.js using multiple buffers. I came across a shader example on shaderwith that I am attempting to convert. The example I found is located at: https://codepen.io/lickedwindows/pen/jGOLJr ...

three.jscompilationbuffershader

Two models sharing the spotlight, both bringing their unique style to

Is it possible to have two canvas elements on a single page, each loading a different model for comparison? I noticed an issue where when sliding fingers on the right hand side, the program mistakenly magnifies the model instead of rotating it. My propose ...

three.jscameramodels

Numbering Tables Effectively in ReactJS

Currently working on coding a table in ReactJS and MUI, my goal is to number the No. column from 1 to the length of the array. This snippet shows my code: <TableBody> {quizes.map((quiz, index) => ( <TableRow key={quiz._id}> ...

javascriptreactjsmaterial-ui

Creating a new array by extracting a single property from an array of objects

Currently, I am exploring the most efficient approach to utilize the string-similarity library in NodeJS with the two arrays utilized in my project. The first array consists of objects structured like this: { eventName: "Some event name", ...

javascriptnode.jsarrayssimilarity

Creating HTML elements using JavaScript's Document Object Model

I am trying to create an img tag dynamically using JavaScript with the following code: <img id="drag0" src="http://localhost:34737/Images/MainSlider/A(1).jpg" class="col-4" draggable="true" ondragstart="drag(event)"> and I have a drag method setup ...

javascripthtml

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

javascripthtmlcssweb

How can a controller configure an AngularJS provider by passing options?

How can I pass configuration options to a provider from a controller? Below is an example of how to pass options/configurations to a provider from the controller: provider.js file: app.provider('contactProvider', function() { this.name ...

javascriptjqueryangularjs

What is a sophisticated method to hide an element from view?

My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...

javascriptjqueryhtmlcssdisplay

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

javascriptphphtmlvue.jsvue-component

Is it possible to incorporate an external javascript file in my CSS file?

Currently, I am attempting to create a setup where my background adjusts based on the width of the user's browser. However, I am constrained by a background specified in the external stylesheet under a specific element. While I have the ability to alt ...

javascripthtmlcssbackgroundbrowser-width

Is there a way to save a base64 image to an excel file?

I need assistance with exporting Excel Charts from NVd3 using Angularjs. Here is the code I have been trying: (jsfiddle) <button id="myButtonControlID">Export Table data into Excel</button> <div id="divTableDataHolder"> <table> ...

javascriptjqueryangularjssvg

Discover how to retrieve the calculated percentage within CSS with the assistance of jQuery specifically designed for Webkit

I'm currently working on a simple sliding animation. However, the div that slides in is utilizing percentages for its width and right positioning. The issue arises specifically in Webkit browsers. When using jQuery to retrieve the value, it returns t ...

javascriptjquerycss

Defining global 'require' scripts in Node.js

Seeking a solution to a slightly unusual problem. I hope that using simple examples will clarify my query, as explaining my complex usage can be challenging. I am incorporating my custom modules into the routes.coffee file for an Express server. My goal i ...

javascriptnode.jscoffeescript

Exploring the Interaction between Express.js Requests and Mongoose Models

We're currently in the process of developing a REST API alongside my colleagues using Express.js and Mongoose. As we work with certain Mongoose Model methods and statics, we find the need to have access to the Express.js Request object for additional ...

javascriptnode.jsexpressmongoosemongoose-plugins

Assign a specific attribute to a checkbox, gather all selected attributes, and transmit them using jQuery

I have a system generated table with approximately 800 rows that needs checkboxes added for users to select specific rows for more information. I can add a checkbox column to the entire table at once, but I don't want to manually assign values to each ...

javascriptjquery