Modifying dat.gui to reflect changes made to the selected object

check out this working code

I am currently exploring ways to update or refresh dat.gui in order to reflect the changes I make to my selection. My main objective is to generate random cubes and then manipulate a single cube by rotating, scaling, changing position, etc.

The initial focus is on selecting a cube and controlling it through dat.gui. For starters, I want to display the name of the chosen object. Once I tackle this issue, I believe I can implement methods to control rotation, position, etc.

I aim at achieving something similar to this, although the provided code is outdated and complex to comprehend.

controller = new THREE.Object3D();
controller.objects = [];
controller.scene = scene;
controller.gui = gui;
controller.color = 0xFFFFFF;
controller.number_of_objects = controller.objects.length;
controller.selected_cube = 'test123';


controller.createNew = function() {
    var cube = new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5),
            new THREE.MeshBasicMaterial({
                color: Math.random() * 0xffffff,
            opacity: 0.5})
    );

    cube.position.x = Math.random() * (world_size * 2) - world_size;
    cube.position.z = Math.random() * (world_size * 2) - world_size;
    cube.name = 'cube_' + controller.objects.length;

    controller.scene.add(cube);
    controller.objects.push(cube);
    controller.number_of_objects = controller.objects.length;
    controller.selected_cube = cube.name;

};

gui.add(controller, 'number_of_objects').listen();
gui.add(controller, 'selected_cube').listen();
gui.add(controller, 'createNew');

Answer №1

I have modified your example by incorporating code to display the selected cube in the dat.GUI control:

http://jsfiddle.net/Fresh/5vbkub4v/

Below is the code used to achieve this functionality:

    if (intersects.length > 0) {
        var selectedObject = intersects[0].object;
        selectedObject.material.color.setHex(Math.random() * 0xffffff);

        // The listen() method has already been applied to the dat.GUI selected_cube controller
        // so updating the value of selected_cube will automatically update the dat.GUI view.
        controller.selected_cube = selectedObject.name;

        var particle = new THREE.Sprite(particleMaterial);
        particle.position.copy(intersects[0].point);
        particle.scale.x = particle.scale.y = 2;
        scene.add(particle);
    }

This approach works smoothly because:

gui.add(controller, 'selected_cube').listen();

was defined beforehand. This means that any changes made to the value of the dat.GUI selected_cube variable will be immediately reflected in the control panel.

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

Error encountered with AngularJS code when attempting to load content from another page using ajax

I'm currently tackling a challenge with AngularJs and php. Whenever I try to load content from another page, AngularJs seems to stop working. Let me provide you with a sample code snippet to illustrate my issue. main-page.php <div id="form-secti ...

Is there a counterpart to ES6 "Sets" in TypeScript?

I am looking to extract all the distinct properties from an array of objects. This can be done efficiently in ES6 using the spread operator along with the Set object, as shown below: var arr = [ {foo:1, bar:2}, {foo:2, bar:3}, {foo:3, bar:3} ] const un ...

Tips for retaining filled data after an incomplete form submission

<html> <head><script type="text/javascript"> function pa(){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document. ...

When does the ng-disable function become activated?

Here's an example: <button ng-disabled="!isSomethingValid() || loading || disabled" ... class="btn btn-primary"> What determines the condition for the ng-disable attribute to evaluate its expression? ...

Activate collapsible navigation icon when clicked on a smaller screen

Seeking assistance as a newcomer to coding. Struggling to implement a responsive navbar icon that changes on small screens when clicked. Utilized a bootstrap navbar but encountering issues where clicking the navbar on a small screen only displays the list ...

JavaScript property counterparts

Recently, I've been working on creating alias's for a specific property in my code. var default_commands = {} default_commands['foo'] = "bar"; My goal is to create multiple aliases for the key 'foo' in the object. For examp ...

Converting texture to a data URI using THREE.js

While many people may have the opposite issue, my question is if there is a straightforward method to retrieve texture data back to the data URI. I am currently using render to texture (RTT) to render the scene in the background using a different camera. ...

Guide to crafting an effective XHR request using AJAX

Here's a snippet of my basic web page: <!DOCTYPE html> <html> <head> </head> <body onload="start()"> </body> </html> Below is the XMLHttpRequest function I've implemented: function start(){ / ...

Express.js routes are malfunctioning with jade/pug, causing frequent crashes and routing errors

Here is the code for my contact router: var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res, next) { res.render('contact'); }); module.exports = rou ...

Strategies for Implementing Multi-Step Password Form Validation

Currently, I am using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps as the foundation of my form with some adjustments. Validation is functioning correctly where empty fields disable the next button. However, when I attempt to add ...

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...

Having trouble with the `click()` function not working on a button while using Selenium in

Currently, I am running a selenium test on a remote server in headless mode using the chrome driver. However, when trying to click on a button with the following step, the button does not get clicked. Below is the test step attempting to click the element ...

Utilizing loop variables in ng-class and ng-click directive

This piece of code generates a list consisting of seven thumbnails, with the currently active image designated by the active and thumb classes. <div ng-repeat="no in [1, 2, 3, 4, 5, 6, 7]"> <img ng-src="images/{{no}}t.jpg" class="thumb" ng ...

Effectively encoding and decoding AJAX and JSON objects with PHP scripting

I've successfully set up a basic HTML file with a fixed JSON object. My goal is to transfer this object to a PHP file named text.php, encode it, decode it, display it in the PHP file, and then showcase it back in the HTML file. <!DOCTYPE html> ...

What is the proper way to implement a $scope.$watch for a two-dimensional array in AngularJS?

Having trouble implementing an Angular watch on a multidimensional array I've got a screen where users can see two teams (outer array) with team sheets (inner array) for each team. They can drag and drop players to change the batting order. The batt ...

Filtering in JavaScript can be efficiently done by checking for multiple values and only including them if they are not

In my current coding challenge, I am attempting to create a filter that considers multiple values and only acts on them if they are not empty. Take the following example: jobsTracked = [ { "company": "Company1", ...

Promise disregards the window being open

I'm facing an issue with redirecting users to Twitter using window.open in a specific function. It seems like the instruction is being ignored, even though it works perfectly on other pages. Any ideas on how to fix this? answerQuestion() { if ...

Trouble getting CSS and JavaScript to function properly with HTTPS?

It seems that the css and js files are functioning properly on , but not on . As a novice in web design and javascript, I am struggling to find a solution to this issue. Trying to link the CSS file with "//isdhh.org/css/style.css" has not resolved the pr ...

What is the best way to retrieve the dimensions of a custom pop-up window from the user?

Currently, I am in the process of developing a website that allows users to input width and height parameters within an HTML file. The idea is to use JavaScript to take these user inputs and generate a pop-up window of a custom size based on the values pro ...

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...