问题描述
在three.js中,我试图通过自定义值添加gui。但这给了我错误。 这是我的代码
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;
}
我正在尝试通过model_arr对象提供价值。所以为此,我尝试了。
let ArmCtrl = lower.add( params,22.75 ).step( 0.21 ).name("Arm in Inch").listen();
ArmCtrl.onChange( function ( value ) {
mesh.morphTargetInfluences[ 0 ] = (value - model_arr['narm'])/2.1;
} );
出现错误
未捕获的TypeError:folder.add(...)。step不是函数 在new_women_xl_initGUI
我已经检查了这些参考 Saving parameters with dat.gui seems broken? Uncaught TypeError: $(...).steps is not a function 但没有运气。
解决方法
使用model_arr
,您可以在将其用作数组和对象之间进行翻转:
// 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 )
如果要使用数组,请在变量的整个生命周期内坚持使用数组。如果要创建对象,请从新变量开始,以免混淆两者。
如果要在数组末尾添加一个值,请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