如何在网页中导入带有反应的 material-ui 滑块？

Question

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Point Lighting</title> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js" crossorigin="anonymous"></script> <style> canvas { width: 40vw; height: 40vh; background-color: lightpink; } #uiContainer { top: 0; width: 80%; border: 2px solid blue; background-color: lightblue; padding: 10px; float: left; } #ui { background-color: coral; transform: translate(0%, 0px); display: block; float: left; } </style> <h3> Drag slider to rotate </h3> </head> <body> <p>ok</p> <canvas id="canvas" width="200" height="200"></canvas> <div id="uiContainer"> <div id="ui"> </div> </div> <!-- vertex shader --> <script id="3d-vertex-shader" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec3 a_normal; uniform vec3 u_lightWorldPosition; uniform mat4 u_world; uniform mat4 u_worldViewProjection; uniform mat4 u_worldInverseTranspose; varying vec3 v_normal; varying vec3 v_surfaceToLight; void main() { // Multiply the position by the matrix. gl_Position = u_worldViewProjection * a_position; // orient the normals and pass to the fragment shader // v_normal = mat3(u_worldInverseTranspose) * a_normal; v_normal = mat3(u_world) * a_normal; // compute the world position of the surfoace vec3 surfaceWorldPosition = (u_world * a_position).xyz; // compute the vector of the surface to the light // and pass it to the fragment shader v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition; } </script> <!-- fragment shader --> <script id="3d-fragment-shader" type="x-shader/x-fragment"> precision mediump float; // Passed in from the vertex shader. varying vec3 v_normal; varying vec3 v_surfaceToLight; uniform vec4 u_color; void main() { // because v_normal is a varying it's interpolated // so it will not be a unit vector. Normalizing it // will make it a unit vector again vec3 normal = normalize(v_normal); vec3 surfaceToLightDirection = normalize(v_surfaceToLight); float light = dot(normal, surfaceToLightDirection); gl_FragColor = u_color; // Lets multiply just the color portion (not the alpha) // by the light gl_FragColor.rgb *= light; } </script> <script> function RadToDegSlider(props) { const {min, max, value, onChange} = props; const [v, setV] = React.useState(radToDeg(value)); return ( <RangeSlider min={min} max={max} value={v} onChange={(e, v) => { setV(v); onChange(degToRad(v)); }} /> ); } // Setup a ui. const domContainer = document.querySelector('#ui'); ReactDOM.render( <RadToDegSlider value={getRotation()} onChange={v => { fRotationRadians = v; drawScene(); }} min={-360} max={360} />, domContainer); function getRotation() { return fRotationRadians; } function updateRotation(value) { fRotationRadians = value; drawScene(); } </script> <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script> <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script> <script> "use strict"; function main() { // Get A WebGL context /** @type {HTMLCanvasElement} */ var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); if (!gl) { return; } // setup GLSL program var program = webglUtils.createProgramFromScripts(gl, ["3d-vertex-shader", "3d-fragment-shader"]); // look up where the vertex data needs to go. var positionLocation = gl.getAttribLocation(program, "a_position"); var normalLocation = gl.getAttribLocation(program, "a_normal"); // lookup uniforms var worldViewProjectionLocation = gl.getUniformLocation(program, "u_worldViewProjection"); var worldInverseTransposeLocation = gl.getUniformLocation(program, "u_worldInverseTranspose"); var colorLocation = gl.getUniformLocation(program, "u_color"); var lightWorldPositionLocation = gl.getUniformLocation(program, "u_lightWorldPosition"); var worldLocation = gl.getUniformLocation(program, "u_world"); // Create a buffer to put positions in var positionBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Put geometry data into buffer setGeometry(gl); // Create a buffer to put normals in var normalBuffer = gl.createBuffer(); // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = normalBuffer) gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); // Put normals data into buffer setNormals(gl); function radToDeg(r) { return r * 180 / Math.PI; } function degToRad(d) { return d * Math.PI / 180; } var fieldOfViewRadians = degToRad(50); var fRotationRadians = 0; drawScene(); // Draw the scene. function drawScene() { // webglUtils.resizeCanvasToDisplaySize(gl.canvas); // Tell WebGL how to convert from clip space to pixels gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // console.log(gl.canvas.width,gl.canvas.height); // Clear the canvas AND the depth buffer. gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Turn on culling. By default backfacing triangles // will be culled. //gl.enable(gl.CULL_FACE); // Enable the depth buffer gl.enable(gl.DEPTH_TEST); // Tell it to use our program (pair of shaders) gl.useProgram(program); // Turn on the position attribute gl.enableVertexAttribArray(positionLocation); // Bind the position buffer. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER) var size = 3; // 3 components per iteration var type = gl.FLOAT; // the data is 32bit floats var normalize = false; // don't normalize the data var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); // Turn on the normal attribute gl.enableVertexAttribArray(normalLocation); // Bind the normal buffer. gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); // Tell the attribute how to get data out of normalBuffer (ARRAY_BUFFER) var size = 3; // 3 components per iteration var type = gl.FLOAT; // the data is 32bit floating point values var normalize = false; // normalize the data (convert from 0-255 to 0-1) var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position var offset = 0; // start at the beginning of the buffer gl.vertexAttribPointer( normalLocation, size, type, normalize, stride, offset); // Compute the projection matrix var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; var zNear = 1; var zFar = 2000; var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar); // Compute the camera's matrix var camera = [100, 150, 200]; var target = [0, 35, 0]; var up = [0, 1, 0]; var cameraMatrix = m4.lookAt(camera, target, up); // Make a view matrix from the camera matrix. var viewMatrix = m4.inverse(cameraMatrix); // Compute a view projection matrix var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix); // Draw a F at the origin var worldMatrix = m4.yRotation(fRotationRadians); //console.log('stampa'); //console.log(worldMatrix); // Multiply the matrices. var worldViewProjectionMatrix = m4.multiply(viewProjectionMatrix, worldMatrix); var worldInverseMatrix = m4.inverse(worldMatrix); //console.log(worldInverseMatrix); var worldInverseTransposeMatrix = m4.transpose(worldInverseMatrix); //console.log(worldInverseTransposeMatrix); // Set the matrices gl.uniformMatrix4fv(worldViewProjectionLocation, false, worldViewProjectionMatrix); gl.uniformMatrix4fv(worldInverseTransposeLocation, false, worldInverseTransposeMatrix); gl.uniformMatrix4fv(worldLocation, false, worldMatrix); // Set the color to use gl.uniform4fv(colorLocation, [0.2, 1, 0.2, 1]); // green // set the light position gl.uniform3fv(lightWorldPositionLocation, [20, 30, 60]); // Draw the geometry. var primitiveType = gl.TRIANGLES; var offset = 0; var count = 16 * 6; gl.drawArrays(primitiveType, offset, count); } } // Fill the buffer with the values that define a letter 'F'. function setGeometry(gl) { var positions = new Float32Array([ // left column front 0, 0, 0, 0, 150, 0, 30, 0, 0, 0, 150, 0, 30, 150, 0, 30, 0, 0, // top rung front 30, 0, 0, 30, 30, 0, 100, 0, 0, 30, 30, 0, 100, 30, 0, 100, 0, 0, // middle rung front 30, 60, 0, 30, 90, 0, 67, 60, 0, 30, 90, 0, 67, 90, 0, 67, 60, 0, // left column back 0, 0, 30, 30, 0, 30, 0, 150, 30, 0, 150, 30, 30, 0, 30, 30, 150, 30, // top rung back 30, 0, 30, 100, 0, 30, 30, 30, 30, 30, 30, 30, 100, 0, 30, 100, 30, 30, // middle rung back 30, 60, 30, 67, 60, 30, 30, 90, 30, 30, 90, 30, 67, 60, 30, 67, 90, 30, // top 0, 0, 0, 100, 0, 0, 100, 0, 30, 0, 0, 0, 100, 0, 30, 0, 0, 30, // top rung right 100, 0, 0, 100, 30, 0, 100, 30, 30, 100, 0, 0, 100, 30, 30, 100, 0, 30, // under top rung 30, 30, 0, 30, 30, 30, 100, 30, 30, 30, 30, 0, 100, 30, 30, 100, 30, 0, // between top rung and middle 30, 30, 0, 30, 60, 30, 30, 30, 30, 30, 30, 0, 30, 60, 0, 30, 60, 30, // top of middle rung 30, 60, 0, 67, 60, 30, 30, 60, 30, 30, 60, 0, 67, 60, 0, 67, 60, 30, // right of middle rung 67, 60, 0, 67, 90, 30, 67, 60, 30, 67, 60, 0, 67, 90, 0, 67, 90, 30, // bottom of middle rung. 30, 90, 0, 30, 90, 30, 67, 90, 30, 30, 90, 0, 67, 90, 30, 67, 90, 0, // right of bottom 30, 90, 0, 30, 150, 30, 30, 90, 30, 30, 90, 0, 30, 150, 0, 30, 150, 30, // bottom 0, 150, 0, 0, 150, 30, 30, 150, 30, 0, 150, 0, 30, 150, 30, 30, 150, 0, // left side 0, 0, 0, 0, 0, 30, 0, 150, 30, 0, 0, 0, 0, 150, 30, 0, 150, 0]); // Center the F around the origin and Flip it around. We do this because // we're in 3D now with and +Y is up where as before when we started with 2D // we had +Y as down. // We could do by changing all the values above but I'm lazy. // We could also do it with a matrix at draw time but you should // never do stuff at draw time if you can do it at init time. var matrix = m4.xRotation(Math.PI); matrix = m4.translate(matrix, -50, -75, -15); for (var ii = 0; ii < positions.length; ii += 3) { var vector = m4.transformPoint(matrix, [positions[ii + 0], positions[ii + 1], positions[ii + 2], 1]); positions[ii + 0] = vector[0]; positions[ii + 1] = vector[1]; positions[ii + 2] = vector[2]; } gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); } function setNormals(gl) { var normals = new Float32Array([ // left column front 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // top rung front 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // middle rung front 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // left column back 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, // top rung back 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, // middle rung back 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, // top 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // top rung right 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // under top rung 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, // between top rung and middle 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // top of middle rung 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // right of middle rung 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // bottom of middle rung. 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, // right of bottom 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // bottom 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, // left side -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0]); gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW); } main(); </script> </body> </html>

I have all the code in this html file and I import the libraries with cdn, but I can't see the slider in the web page.我有这个 html 文件中的所有代码，我用 cdn 导入了库，但是我看不到网页中的滑块。 I'm new to react and webgl, and don't understand where the problem is.我是react和webgl的新手，不明白问题出在哪里。 How can I do?我能怎么做？ Thank you all.谢谢你们。

Answer 1

There are few issues in your code, I've created a working demo.您的代码中几乎没有问题，我已经创建了一个工作演示。 https://codesandbox.io/s/eager-rgb-9h18u?file=/index.html https://codesandbox.io/s/eager-rgb-9h18u?file=/index.html

You have missed babel import你错过了 babel 导入
Missing type="text/babel" on script tag脚本标签上缺少 type="text/babel"
Slider is the correct component name滑块是正确的组件名称

如何在网页中导入带有反应的 material-ui 滑块？

问题描述

1 个解决方案

解决方案1
0 2020-11-22 11:53:05

如何在网页中导入带有反应的 material-ui 滑块？

问题描述

1 个解决方案

解决方案1 0 2020-11-22 11:53:05

解决方案1
0 2020-11-22 11:53:05