Problem encountered when utilizing dat.GUI in a three.js demonstration

I recently experimented with using dat.GUI in a specific three.js example.

To integrate a GUI for adjusting mesh opacity, I made the following code modifications.

var loader=new THREE.VTKLoader();
loader.load ("models/vtk/bunny.vtk", function(geom){
var mesh = new THREE.Mesh(geom, material );
mesh.doubleSided=true;
mesh.position.setY(-0.09);
scene.add( mesh );

var gui = new dat.GUI();

var view = this;
view.Opacity = 0.2;

var maingui = gui.addFolder('Main');
var opacity = maingui.add(view, 'Opacity', 0, 1);
opacity.onChange( function(value) {
    mesh.material.opacity = value;
});

maingui.open();

animate();

However, I encountered an issue where after clicking on the opacity slider, my mouse became stuck following the slider without being able to release it.

javascriptuser-interfacethree.jsdat.gui

Answer №1

Make sure to rearrange the initialization blocks so that the controls come after the renderer block. Also, update the following line of code:

controls = new THREE.TrackballControls( camera );

to this:

controls = new THREE.TrackballControls( camera, renderer.domElement );

Answer №2

Although this topic is old, I recently encountered a similar issue and found that the previous solution did not work for me. To resolve it, I decided to create a specific canvas for the dat.gui module:

Here is the HTML part:

<div id="my-gui-container"></div>

And the CSS part:

#my-gui-container{
    position: absolute; 
    top: 0; 
    right: 0;
    z-index: 100;
}

Next, in the JavaScript section:

this.gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(this.gui.domElement);

By using this approach, the elements are isolated and there are no more event conflicts.

Note: For additional details, you can find all the code here.

Answer №3

let timePiece = new THREE.Clock();
let controlTrackball;


function display() {
stats.update();
        let duration = timePiece.getDelta();   
        controlTrackball.update(duration);

        // Use requestAnimationFrame for rendering
        requestAnimationFrame(display);
        webGLRenderer.render(scene, camera);    
    }


    function manageTrackBall(){
        controlTrackball = new THREE.TrackballControls(camera, render.domElement) ;

        controlTrackball.rotateSpeed = 1.0;
        controlTrackball.zoomSpeed = 1.0;
        controlTrackball.panSpeed = 1.0;
        //  controlTrackball.noZoom=false;
        //controlTrackball.noPan=false;
        controlTrackball.staticMoving = true;
        //controlTrackball.dynamicDampingFactor=0.3;
    }


        manageTrackBall();

        display();

I made edits to my code by replacing "

THREE.TrackballControls(camera, renderer.domElement)
" However, once I use it, I am unable to deselect it and it continues to affect my GUI. Is there a way to deactivate or deselect the active GUI parts using a command like "gui.deselect.all"?

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

VueJS: What is the easiest way to create a new instance of a div with just a click of a button?

Is there a way to create a function that will generate a new instance of a specific div (.container in the template) when a button (#addDiv) is clicked, with the button being the only visible element on the webpage initially? I have heard about using docum ...

javascriptvue.js

What is the best javascript framework to pair with twitter bootstrap?

After dabbling in twitter bootstrap, I discovered its impressive array of UI components. Interested in incorporating it into a project, my quest for a compatible javascript framework has left me torn between angularjs, backbonejs, and emberjs. Although I ...

javascriptangularjstwitter-bootstrapbackbone.jsember.js

What is the best way to locate an element with the class name being an email address using jQuery?

Is it possible to locate an element with an email address as the class name, considering that the email address varies? $(document).ready(function(){ //not working getting error var email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascriptjqueryhtmlclassname

Understanding the process of linking JavaScript code to a database within the ASP.NET framework

I have been successfully using an ASP.NET application to connect to a SQL Server 2016 database. However, I now have a new task of incorporating Javascript into the code in order to retrieve data from the database and present it to the user. I am aware of t ...

javascriptasp.netjson.netdatabase

The replacement of className in inline SVG is not permitted (Error: 'Cannot read property 'className.replace' of undefined')

I've hit a roadblock trying to manipulate classes within an SVG document to modify the rect elements. The code works smoothly on divs in an external document, but I've tried several other solutions as well – all listed below. I'm still rel ...

javascripthtmlcsssvg

JavaScript, change syntax from arrow to regular

Currently I'm in the process of learning and grasping JavaScript. In a tutorial video that I'm following, the instructor utilized this specific code snippet: app.post('/content/uploads', (req,res) => { upload(req, res, (err) => ...

javascriptnode.jsexpress

Which is more efficient: filtering a JSON object or querying the database using ajax?

I am currently developing a product page that involves a selection of options that will impact the pricing of the items. The primary option allows users to choose a material, which then influences the available set of options. Within the database, there i ...

javascriptmysqljsonajax

"Trying to access the Reducer in a container results in an undefined value

I recently tried adding a new Container to my React App, connected it with Redux, and wanted to test if everything was functioning properly. Unfortunately, when I try to access the reducer using this.props.selection, it returns as undefined. This is puzzli ...

javascriptreactjsreduxreact-reduxflux

What is the correct way to declare a new variable for a JSON object?

Within my Node JS application, I have an endpoint where I am attempting to retrieve data from two separate mongo collections. However, when trying to combine this data, I am encountering difficulties adding a new property to the JSON object. const getLesso ...

javascriptnode.jsjsonmongodbexpress

Executing multiple nested $http calls in Angular can significantly slow down the process

Within my angular application, I am currently dealing with 6 to 7 http chaining requests that are taking a significant amount of time to execute. What are some strategies for optimizing this process? empSvc.getallEmp().then(function (data) { if (dat ...

javascriptangularjs

How can I add a parameter to a JSON URL in Angular?

I'm looking to enhance my URL by adding a new parameter, but I'm unsure of the steps needed. ts.file route(name:string) { this.router.navigate(['/homepage', (name)]); console.log('name); } service private url1 = './assets/ ...

javascriptangulartypescript

Ways to determine if the property of a document has been altered?

Currently, I am in the process of writing tests for an Express CRUD application. The specific route I am focused on is the account recovery route. This route accepts POST requests with an email included in the body. Essentially, the application will search ...

javascriptnode.jsmongodbexpressjestjs

typescript mock extending interface

I'm currently working with a typescript interface called cRequest, which is being used as a type in a class method. This interface extends the express Request type. I need to figure out how to properly mock this for testing in either jest or typemoq. ...

javascripttypescriptjestjstypemoq

"error: unable to retrieve message channel name, result is undefined

Hey there, I'm currently experiencing an issue while trying to retrieve the name of a channel that I created. Strangely enough, it's returning undefined, even though I am certain that the channel exists. Let me share with you the code snippet wh ...

javascriptnode.jsdiscord.js

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

javascriptangularrxjs

What is the best way to leverage a webbrowser control for design purposes while keeping the functionality in C#?

Observing some apps, it seems they utilize HTML/CSS/Javascript for styling - a much simpler approach compared to crafting the same thing natively. However, these apps have their logic written in C#. Sadly, I am clueless on connecting the two. Research yiel ...

c#javascriptcssuser-interface

Is JavaScript utilizing Non-blocking I/O at the operating system level to enable AJAX functionality?

Given that Javascript operates as a single threaded process and AJAX functions asynchronously, the question arises: How does this happen? Is it possible that at the operating system level, the JS engine is responsible for making non-blocking I/O calls fo ...

javascriptajaxsocketsasynchronousnonblocking

Creating an object with an array of objects as a field in MongoDB: A step-by-step guide

I have a unique schema here: const UniqueExerciseSchema = new Schema({ exerciseTitle: { type: String }, logSet: [{ weight: { type: Number }, sets: { type: Number }, reps: { type: Number }, }], }); After obtaining the da ...

javascriptnode.jsjsonmongodb

Nesting maps in JavaScript is a powerful way to transform

I'm in the process of developing a budgeting app using React and JavaScript. At the moment, I have successfully generated a table displaying various costs. Name Budget Used $ Used % Available Food 300 300 100 0 Streaming services 600 600 100 ...

javascripthtmlreactjsarray.prototype.map

Tips on how to utilize JavaScript to display data on a page without the need for refreshing, updating every 2-5

Could you please assist me? I am working on a CRUD application and have created a function called loaddata();. My issue is that when another user adds data, it should be displayed in my table without the need to refresh. Is there a way to achieve this? fun ...

javascriptphpjquery