TypeError: Cannot read property 'object' of null at recallSavedValue in dat.gui.module.js:3218

Question

In three.js, I am trying to add gui by custom values. but it gives me error. this is my code

var arm = document.getElementById('arm');
var model_arr = [];
model_arr['narm'] = (arm)? arm:0;
function init(){
...create scene, camera, load obj,mtl render it etc.
initGUI();
}
function initGUI() {
initGUICalled = true;   
if (typeof model_arr !== 'undefined' && model_arr.length > 0) {
    params = {
    Arm: (model_arr['narm'])? model_arr['narm']:20.75,
    resetval: function() { resetBody(); }
    };  
}
// Set up dat.GUI to control targets
lower = gui.addFolder( 'Lower Measurement' );       
let ArmCtrl = lower.add( params, 'Arm', 18.75, 22.75 ).step( 0.21 ).name("Arm in Inch").listen();
ArmCtrl.onChange( function ( value ) {
    mesh.morphTargetInfluences[ 0 ] = (value - 20.75)/2.1;
} );

lower.close();
gui.close();
        
}

function resetBody(){
    initGUICalled = true ;
    params.Arm = 20.75;
    mesh.morphTargetInfluences[ 0 ] = 0;
            
}

I am trying to give value from model_arr object. So for this I have tried.

let ArmCtrl = lower.add( params, 'Arm', 18.75, 22.75 ).step( 0.21 ).name("Arm in Inch").listen();
ArmCtrl.onChange( function ( value ) {
    mesh.morphTargetInfluences[ 0 ] = (value - model_arr['narm'])/2.1;
} );

and got error

Uncaught TypeError: folder.add(...).step is not a function at new_women_xl_initGUI

I have check these reference Saving parameters with dat.gui seems broken? Uncaught TypeError: $(...).steps is not a function but not get luck.

Answer 1

With model_arr, you're flip-flopping between using it as an array and as an object:

// Here you initialize it as an array
var model_arr = [];

// Here you're accessing it as an object, not adding any values to the array
model_arr['narm'] = (arm) ? arm : 0;

// The array's length is still 0, so params never gets a value
if (model_arr.length > 0) {
    params = {
        Arm: xxx
    };
}

// Now when you try to access params.Arm, it doesn't exist
let ArmCtrl = lower.add( params, 'Arm', 18.75, 22.75 )

If you want to use an array, stick to an array throughout the lifetime of the variable. If you want to create an object, start with a new variable so you don't confuse the two.

If you want to add a value at the end of an array, you could use the .push() method:

var narm = (arm) ? arm : 0;

// Add value to the end of the array
model_arr.push(narm);

// Now the array's length is 1