Как кодировать ползунок, который может изменить радиус объекта

Question

Я пытаюсь выяснить, как закодировать ползунок, который изменит радиус определенных фигур.Задание будет выводиться в виде веб-документа HTML, и многие способы, которые я пытался решить эту проблему, в итоге приводили к выводу веб-документа в виде пустой страницы.Я создал слайдер в своем HTML-файле внутри элемента таблицы и создал следующий код в своем файле JavaScript.Я посмотрел один учебник, который предложил использовать object.setRadius, чтобы изменить радиус.Это было для файла Java, чтобы можно было объяснить, почему он не работает.Я пробовал несколько способов, и все, кажется, позволяет ползунку двигаться, но ничто, кажется, никогда не влияет на формы.Что я делаю не так?

threeComponents2.js
"use strict";



let vertex_shader  = `
    attribute  vec4 vPosition;
    attribute  vec4 vColor;
    varying vec4 fcolor;


    void main()
    {
        gl_PointSize = 10.0;
        gl_Position = vPosition;       
        fcolor = vColor;
}
`;

let fragment_shader = `
    precision mediump float;

    varying vec4 fcolor;

    void
        main()
    {
        gl_FragColor = fcolor;
    }
`;




let lg;

window.addEventListener("load", function init() {

    lg = noLogging();
    lg.insertAtEnd = false;


    const canvas = document.getElementById( "gl-canvas" );

    const gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );

    gl.enable(gl.DEPTH_TEST);

    //
    //  Load shaders and initialize attribute buffers
    //
    const program = initShaders( gl, vertex_shader, fragment_shader);
    gl.useProgram( program );


    let node1 = new cs4722_objects.Node(new cs4722_objects.Cylinder(10));
    node1.object.center = [.27,.25,.25,1];
    node1.object.radius_top = .4;
    node1.object.radius_bottom = .25;
    node1.object.height = .5;

    let node2 = new cs4722_objects.Node(new cs4722_objects.Sphere());
    node2.object.center = [-.25,-.25,-.25,1];
    node2.object.radius = .25;
    node2.object.scheme_colors = [X11.SkyBlue3, X11.Gold2];

    let node3 = new cs4722_objects.Node(new cs4722_objects.Block());
    node3.object.center = [-.4, .25, 0, 1];
    node3.object.height = .5;
    node3.object.width = .5;
    node3.object.scheme_colors = [X11.SkyBlue1, X11.SkyBlue2, X11.SkyBlue3, X11.Purple1, X11.Purple2, X11.Purple3];


    let node0 = new cs4722_objects.Node();
    node0.children.push(node2);
    node0.children.push(node1);
    node0.children.push(node3);


    let scene = new cs4722_objects.Scene(node0);
    scene.load_vertices(gl, program);
    scene.load_colors(gl, program);

    const csc = cs4722_controls;

    function render() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        scene.draw(gl);
    }


    var sphereSlider = document.getElementById("radius");
    var output = document.getElementById("demo");


// Update the current slider value (each time you drag the slider handle)
    sphereSlider.oninput = function() {
        output.innerHTML = this.value;
        node2.setRadius(this.value);
    }

   /* csc.addCheckbox("controls", "sphere-vis", "Sphere Visible",
        node2.visible,
        (event) => {
            node2.visible = event.target.checked;
        },
        render);

    csc.addCheckbox("controls", "cylinder-vis", "Cylinder Visible",
        node1.visible,
        (event) => {
            node1.visible = event.target.checked;
        },
        render);

    csc.addCheckbox("controls", "block-vis", "Block Visible",
        node3.visible,
        (event) => {
            node3.visible = event.target.checked;
        },
        render);*/

    render();
});

Answer 1

попробуйте взглянуть на это, это может помочь вам

https://codepen.io/codedevlo/pen/BOOOaQ

Я думаю, что-то вроде этого

var slider;
ellipse(200, 200, slider);    
document.getElementById("slider").innerHTML = slider;

и HTML

<input type="range" min="40" max="400" value="40" class="slider">

Я думаю, что это должно работать