我正在尝试找出如何编码将更改某些形状半径的滑块。作业将作为HTML Webdoc输出,并且ive试图解决此问题的许多方法最终导致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();
});
答案 0 :(得分:0)
尝试一下,可能会对您有所帮助
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">
我认为应该可以