Explore GLB/GLTF files without using loader.load

Looking for some guidance on utilizing the dat.gui package in my exploration of three.js. Struggling to figure out how to access the model outside of the loader.load function.

let model

loader.load('new.glb', function(gltf){
  model = gltf
  scene.add(gltf.scene)
}, undefined, function (error) {
  console.error(error)
})

const options = { wireframe: false}

gui.add(options, 'wireframe').onChange(function(e){
  // encountering issue with 'cannot set properties of undefined' when trying to adjust 'wireframe'
  model.material.wireframe = e 
})

My research suggests this may be due to the asynchronous loading of the glb file?

If anyone has insights or solutions, would greatly appreciate the help!

javascriptnpmthree.js

Answer №1

Based on my findings, it seems that the asynchronous loading of the glb file could be causing this issue?

That statement is accurate.

When dealing with the onChange handler for the gui, the model remains undefined. To modify the model loaded from the gltf file, the change handler must be set up within the callback function for the loader.

In this scenario, the gui is created inside the callback for the loader as shown below:

let gui;
const options = { wireframe: false };

loader.load('new.glb', function(gltf){
  gui = new dat.GUI();

  scene.add(gltf.scene);
  gui.add(options, "wireframe").onChange(function (e) {
    gltf.material.wireframe = e;
  });
}, undefined, function (error) {
  console.error(error)
})

Alternatively, you can define a render function and initialize the gui there:

import * as dat from "dat.gui";

let gui;

init();
render();

function init() {
  ...
  gui = new dat.GUI();

  loader.load('new.glb', function(gltf){
    scene.add(gltf.scene);
    render(gltf);
  }, undefined, function (error) {
    console.error(error)
  })
}

function render(gltf) {
  gui.add(options, "wireframe").onChange(function (e) {
    gltf.material.wireframe = e;
  });
}

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

Tips for effectively invoking a method in a Vue component

As a Vue2 beginner, I am currently working with the Vue CLI and following the structure generated from it. My goal is to submit form data, but I keep encountering a warning and error: [Vue warn]: Property or method "onSubmit" is not defined on the insta ...

javascriptformsvue.js

Maximizing JavaScript efficiency: Returning a value within an if statement in an AJAX call

In my function, I have a condition that checks the idType. If it is 1, an ajax call is made to a php file to retrieve the name associated with the specific idName and return it. Otherwise, another example value is returned. function obtainName(idName, idTy ...

javascriptajax

Looping Feature in Ionic Framework's Slides Component

Currently, I am working on developing an application using Ionic-Angular. When it comes to incorporating slides in my app, I opted for the ionic 4 ion-slides component. Everything was going smoothly until I wanted to enable looping for the slides so that u ...

javascriptangularionic-framework

Utilizing Object Arrays in Chart.js for Optimal Performance

I'm struggling with using chart.js to create charts for my admin panel. I'm having trouble figuring out how to properly utilize my JSON array of objects in order to generate the correct dataset. What exactly should I be putting in the data field ...

javascriptjqueryarraysjsonchart.js

Altering the JavaScript variable by selecting an option from a dropdown list

After downloading a choropleth map from leafletjs.com, I encountered an issue with multiple JS files labeled by year (e.g. us-states2012.js, us-states2013.js). The challenge now is to implement a drop down menu in such a way that selecting a specific year ...

javascriptjqueryhtmlvargeojson

Having trouble retrieving the $scope value in HTML, even though it was assigned within the success function of $http.post

Having trouble accessing the values of $scope properties after a successful $http post in index.html file. Here is the code snippet for reference, any help in resolving this issue would be greatly appreciated as I am new to AngularJs var app = angular.m ...

javascriptangularjsangularjs-scope

The proper way to close file descriptors on a terminated HTTP connection in a Node.js environment

I am currently experimenting with Node.js, where I am attempting to stream files from the filesystem over HTTP. However, my experience on an OS X Lion machine has been hindered by a buggy Apache Bench (ab) app that prematurely aborts connections. This issu ...

javascripthttpnode.js

Unable to get windw.location.href to function properly on local server

Having trouble with window.location.href not working for me :/ Everything is running on a localhost using "xampp" //javascript function 1 function onLogin() { window.location = "http://localhost:4000/deletetable"; console.log("running..."); con ...

javascriptmysqlnode.jshrefwindow.location

What is the best way to choose a random number using jQuery?

<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...

javascriptjqueryhtmlarraysjson

Module '. ' or its corresponding type declarations cannot be located

While working on my project with TypeScript and using Cheerio, I encountered an issue when trying to compile it with TSC. The compiler threw the following exception: error TS2307: Cannot find module '.' or its corresponding type declarations. 2 ...

node.jstypescriptnpmes6-modulescheerio

Exploring the usage of the Date method in React

When I insert the given code snippet import React,{Component} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class Date extends React.Component{ dataToString = (d) =>{ ...

javascriptreactjs

Encountering a timeout issue while attempting to utilize npx create-react-app

Every time I attempt to execute this code, an error pops up: npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/@typescript-eslint%2fparser (over 30000ms) The log shows the following: 205 warn notsup SKIPPING OPTIONAL DEPENDENCY: ...

node.jsreactjsnpm

Looking to develop a dynamic password verification form control?

I am in the process of developing a material password confirmation component that can be seamlessly integrated with Angular Reactive Forms. This will allow the same component to be utilized in both Registration and Password Reset forms. If you would like ...

javascriptangulartypescriptrxjsangular-material

Top method for retrieving CSS variable in a customized Angular directive

I have a question regarding the process of converting the statement below to Angular's renderer2: this.elementRef.nativeElement.style.setProperty( '--primary-color ' , '#455363' ) The above statement modifies a CSS variable in the ...

javascriptcssangulartypescript

Manipulating the InnerHTML content of a total of 144 individual cells

I am currently developing a tile-based game using tables. Each td cell contains the following code: <td> <div id="image" style="display:none; display: fixed; right: 5; top:2;"><img src="http://thumb7.shutterstock.com/display_pic_with_logo ...

javascripthtmlhtml-table

How can you ensure a code snippet in JavaScript runs only a single time?

I have a scenario where I need to dynamically save my .env content from the AWS secrets manager, but I only want to do this once when the server starts. What would be the best approach for this situation? My project is utilizing TypeScript: getSecrets(&qu ...

javascriptnode.jstypescriptmongodbexpress

What are the best ways to implement advanced data filtering in JavaScript?

Is there a way to improve the filtering of data in the ngx-datatable? Currently, I have a filter that only works for the "Name" column. How can I adjust it to filter data from other columns like "id" or "phone" as well? filt ...

javascriptangular

creating interactive elements in augmented reality with ar.js

box.setAttribute('cursor',{ rayOrigin: 'mouse' }); box.addEventListener('click', e => { alert("clicked"); }); Is there a way to make the click event work for the object regardless of its position on the screen? ...

three.jsaframear.js

Incorporate npm authentication information into Azure

When trying to build in my Azure environment, I encountered a npm ERR! 404 Not Found: @***** error related to a private npm package. This issue also occurred locally when the npm login command hadn't been executed. How can I log in or make my credenti ...

azurenpm

Issue: missing proper invocation of `next` after an `await` in a `catch`

I had a simple route that was functioning well until I refactored it using catch. Suddenly, it stopped working and threw an UnhandledPromiseRejectionWarning: router.get('/', async (req, res, next) => { const allEmployees = await employees.fi ...

javascriptnode.jsexpresses6-promise