时间戳

首页 > 解决方案 > 如何编写可以更改对象半径的滑块

javascript - 如何编写可以更改对象半径的滑块

问题描述

我试图弄清楚如何编写一个滑块来改变某些形状的半径。该作业将作为 HTML webdoc 输出，我尝试解决此问题的许多方法最终导致 webdoc 输出为空白页。我在表格元素内的 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();
});

标签： javascriptslider

解决方案

试试看这个它可能会对你有所帮助

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">

我认为这应该有效

推荐阅读