Personalize dat.gui using various documents

Recently, I delved into using the dat.GUI API alongside Three.js and found myself contemplating the best method to personalize the GUI across various files. My goal is to incorporate new Controllers into a single GUI instance from different files, each file focusing on specific aspects of my project like camera or light controls.

My initial attempt involved exporting the GUI instance from one file and importing it into another. However, I encountered an issue where the gui variable was deemed undefined.

// File containing camera settings
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
export const gui = new dat.GUI();
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');

// File with light settings
import { gui } from <file with camera settings>;
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);

So, how can I efficiently customize the same GUI from multiple files? My instincts suggest that leveraging JSON data or localStorage might hold the key, yet concrete examples seem elusive online. This discussion could serve as a valuable resource for future learners grappling with similar challenges.

javascriptthree.jses6-modulesdat.gui

Answer №1

"When considering the Singleton pattern, your example comes to mind. It's almost there - I would suggest moving it to its own file and then importing it into the camera and light settings files.

// gui.js: file with gui singleton
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
const gui = new dat.GUI();
export default gui;

// file with camera settings
import gui from './gui'
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');

// file with light settings
import gui from './gui';
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);

Although I attempted to export the GUI instance from the first file and import it into the second file, I encountered an issue where the gui variable was undefined.

It's possible that this issue could be specific to your local setup. Feel free to reach out if you continue to face this problem.

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

Guide on how to have controller wait for promise to be resolved by an Angular service

Currently, I have a service that initiates an AJAX request to the backend. Service: function RetrieveCompanyDataService(options) { this.url = '/company'; this.Companies = undefined; this.CompaniesPromise = ...

javascriptajaxangularjspromiseangularjs-service

Use jQuery to add an anchor tag before an image and then close the anchor tag

Here is the code snippet I am working with: <div id="slider"> <img src="images/p1.jpg" /> <img src="images/p2.jpg" /> <img src="images/p3.jpg" /> </div> I am looking to dynamically add <a> tags before ...

javascriptjqueryhtmlcssimage

Is there a way to invoke a jQuery function from an ASP.NET environment?

I'm having trouble figuring out how to properly invoke a jQuery function. ScriptManager.RegisterStartupScript(GetType(), "Javascript", "countdown(); ", true); The issue is that it attempts to call the method inline, preventing it from executing the ...

javascriptc#jqueryasp.net

Tips for utilizing rest parameters in JavaScript/Typescript: Passing them as individual parameters to subsequent functions, rather than as an array

Question about Typescript/JavaScript. I made my own custom log() function that allows me to toggle logging on and off. Currently, I am using a simple console.log(). Here is the code: log(message: any): void { console.log(message) } Recently, I decid ...

javascripttypescript

Using Ajax to send a variable to PHP and then selecting data from an SQL database

Currently, I am facing an issue where I need to pass a variable to my "fetch" PHP file. In the fetch.php file, I execute a query to a MySQL database with certain parameters. However, I have hit a roadblock in the process. I am able to retrieve the variab ...

javascriptphpajax

Implementing Alloy-Script/Javascript in dynamically loaded JSP files

I have been loading various JSPs dynamically using an Ajax call, but after the JSP is loaded, none of the JavaScript inside seems to be working. I suspect this is because the script has not been parsed yet. To address this issue, I came across the "aui-pa ...

javascriptliferayalloy-ui

Animation that slides in from the left using CSS styling

My current project involves creating a slideshow, and while it is mostly working fine, I am facing an issue with the animations. The animation for sliding out works perfectly, but the animation for sliding in from the left doesn't seem to be functioni ...

javascriptcss

Embedding a pop-up window in PHP script

My current task involves creating a table where clicking on an ID opens a popup window with a menu for changing row values and adding comments. However, I am facing difficulty in generating a link for each row: foreach ($results as $row) { // Each $row is ...

javascriptphpwordpresspopup

Why does TypeScript not generate an error if props are not passed to a functional component?

How does TypeScript handle not passing down props to a functional component without throwing an error? Consider the following code snippet: interface Props{ id: string; className?: string; } export const Buttons: React.FC<Props> = () => { r ...

javascriptreactjstypescript

Refreshing Symfony2 values dynamically with ajax without the need for page reload

Let me start by saying that I am not a front-end expert, and this is my first attempt at working with ajax. My goal here is to update and display the new value without having to refresh the entire page. I only want to refresh the input field and its values ...

javascriptphpjqueryajaxsymfony

When toggling the menu in bootstrap, the functionality of <a href=""> links may be disrupted

My attempt to integrate a toggle function into each link in the menu to automatically close the menu on mobile after selecting a link has hit a snag. With the solution of adding data-toggle="collapse" data-target="#navbarSupportedContent" to the <a href ...

javascripthtmlbootstrap-4

Navigating the Google Maps API: Implementing Scroll Zoom to Focus on a Single Marker

I'm looking for a solution for my project where the scroll zoom function will focus on zooming in on a marker or specific point rather than defaulting to the cursor. The current behavior is that the scroll zoom always centers on the cursor. Can anyone ...

javascriptgoogle-mapsgoogle-maps-api-3

Auto-filling a form with the selected 'id' in Django using JavaScript or AJAX

I am a novice and I want the form to be autofilled when I select a vehicle ID from the template. Here are my models. class Fuel(models.Model): vehicle = models.ForeignKey(Vehicle, on_delete=models.CASCADE) previous_km = models.IntegerField(blank=False, nul ...

javascriptdjangoajaxformsautocomplete

Encountering errors while testing a NUXT.js and Vue.js application using Jest, specifically seeing messages like '[vuex] module namespace not found in mapState()' and '[vuex] unknown action type'

Despite NUXT's automatic namespacing feature, I am encountering difficulties testing or referencing the store in my testing modules. Can anyone offer advice on how to edit the namespacing property in a Nuxt app? Below is the code for the component, s ...

javascriptvue.jsjestjsvuexnuxt.js

Setting up Webpack with a Node.js backend

After successfully creating a structured outline for my React App, I have now uploaded the code to Github for easy access: https://github.com/KingOfCramers/React-App-Boilerplate. To launch this React server using Node and Express, I found a helpful guide ...

javascriptnode.jsreactjswebpackserver

Converting a ReadStream buffer into a permanent file

I've encountered a code block that I'm struggling to work with: fetchFile(file_id) { return new Promise((resolve, reject) => { var mongoose = require('mongoose'); var Grid = require('gridfs-stream'); ...

javascriptnode.jsexpressgridfs

Tips for accessing a component method in React from a WebSocket callback

Struggling with Javascript and React here. The goal is to update a component's state using push messages from a WebSocket. The issue lies in calling the function handlePushMessage from the WebSocket callback. Here's the code snippet: const Main ...

javascriptreactjs

Why is my HTTP request callback not being executed?

I've been trying to send an HTTP POST request to a 3rd-party API using a promise method. Oddly enough, the callback function never seems to run, even though when I test the code on its own, the API call is successful. Node.js and the concept of an e ...

javascriptnode.jshttpcallback

Subcomponent in React is not rendering as expected

I have a primary React component with a subcomponent named AttributeInput. To prevent redundancy in my code, I moved some of the logic from the main component to a method within AttributeInput. My attempt at referencing this code looks like this: {this.s ...

javascriptreactjs

Transform the Nodejs server into a reusable Node module

Can a nodejs API server be transformed into a node module for use in other projects with minimal code modifications? Additional Information: The node js server contains various APIs (get, post, put). If I integrate this server as a node module within anot ...

javascriptnode.js