HTML slider to controll vertical camera creates error: this.state.value.y.toFixed is not a function

Questions
1

I created a slider for the babylon GUI. It is vertical. when changing it, the camera focus changes along the y axis of the model.
To fit to the style of the surounding page i want to recreate the same functionality with plain html, css and js. But here i run in to the error

this.state.value.y.toFixed is not a function

I dont know what I m doing wrong.

This is the new plain js code:

/**** Set camera *****/
		const modelheight = 1700;
		var cameraY = modelheight/2
		var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, cameraY, -100), scene);
		camera.alpha = 5;
        camera.beta = 1.5;
        camera.radius = 2350;
		camera.attachControl(canvas, true);
/**** camera  control*****/	
    const CAMcontroll = document.getElementById('CAMcontroll');
	const CAMslider = document.createElement('input');
	CAMslider.type = 'range';
	CAMslider.min = '0';
	CAMslider.max = modelheight.toString(); // Set maximum to model height
	CAMslider.value = cameraY.toString(); // Starting position at the middle
	
	CAMslider.addEventListener('input', () => {
		changeCamera(camera, CAMslider.value);
	});

	CAMcontroll.appendChild(CAMslider);

	function changeCamera (camera, value) {
		// Update camera position based on slider value
		camera.setTarget(new BABYLON.Vector3(0, value, -100));
		console.log ("camera focus at: " + value)
	};

Initially the model renders fine. when touching the slider i seem to get a blank canvas.
I had the debug layer active, but when moving the slider the inspector disaperars, so i can’t realy tell what is going on.
I’m sorry, i could not provide the model in a way to build a playground :frowning:

Maybe it helps, this was the old gui slider, that worked:

    var addSlider = function(isVertical, isClamped, displayThumb, row, col) {
        var panel = new BABYLON.GUI.StackPanel();
        panel.width = "220px";
        grid.addControl(panel, row, col);
    }
    var addImageSlider = function(isVertical, isClamped, displayThumb, row, col) {

        var slider = new BABYLON.GUI.Slider();
		slider.minimum = 0;
		slider.maximum = modelheight;
		slider.value = cameraY; // Starting position at the middle
		slider.background = bgColor3Hex;
		slider.thumbColor = ColorHex;
		slider.left = 15 + "px";
        slider.isVertical = isVertical;
        slider.isThumbClamped = isClamped;
        slider.displayThumb = displayThumb;
		slider.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
		slider.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
       
            slider.height = "300px";
            slider.width = "20px";
		
		slider.onValueChangedObservable.add(function (value) {
			// Update camera position based on slider value
			camera.setTarget(new BABYLON.Vector3(0, value, -100));
			//console.log ("camera focus at: " + value)
		});

        advancedTexture.addControl(slider);
    }
    addImageSlider(true, true, true, 0, 2);
2

it seemy that the value was not defined correctly.

this worked for me:

	CAMslider.addEventListener('input', () => {
		changeCamera(camera, parseFloat(CAMslider.value));
	});
1 Like
3

Yep, looks like you found the issue. It seems that CAMslider.value is a string, not a float:

CAMslider.value = cameraY.toString();

So when you tried to pass it in to Vector3’s constructor which expects floats, you hit that error. I’d suggest using TypeScript for your project, it would help catch this sort of issue at build time instead of runtime.

Have a great day!