Question

我制作了一个带有输入标签范围的菜单，但由于某些原因，当我使用某些javascript功能时，它不起作用而且它被禁用。

<div class="navbarvert">
<h2><button type="button" id ="menuoff" class="btn btn-default" aria-label="Left Align">
<span  class="glyphicon glyphicon-off " aria-hidden="true"></span>
</button></h2>
       <navvert>
         <ul>  
          <li><input id="myColor" class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}"></li>
          <li> <label for=fader>Transparency</label> <input id ="transparency" type="range" min="0" max="10" value="0" id="fader"> </li>
        </ul>
       </navvert>
 </div>

javascript代码是这样的：

function onDocumentMouseMove( event ) {


            event.preventDefault();

        /*  mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;*/

            mouse2D.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
            mouse2D.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;

            var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );


            if ( SELECTED ) {

                var intersects = raycaster.intersectObject( plane );

                SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );






                                    render();
                return;

            }

            var intersects = raycaster.intersectObjects( geometryContainer);

            if ( intersects.length > 0 ) {

                if ( INTERSECTED != intersects[ 0 ].object ) {

                    if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

                    plane.position.copy( INTERSECTED.position );

                    plane.lookAt( camera.position );
render();
                }

                //container.style.cursor = 'pointer';

            } else {

                if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                INTERSECTED = null;

                container.style.cursor = 'auto';

            }


        }




                    function onDocumentMouseDown( event ) {


            event.preventDefault();

            var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );
            projector.unprojectVector( vector, camera );

            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

            var intersects = raycaster.intersectObjects( geometryContainer );

            if ( intersects.length > 0 ) {


controls.noRotate=true;
                SELECTED = intersects[ 0 ].object;

                var intersects = raycaster.intersectObject( plane );
                offset.copy( intersects[ 0 ].point ).sub( plane.position );

                //container.style.cursor = 'move';


            }

        }



        function onDocumentMouseUp( event ) {


            event.preventDefault();
controls.noRotate=false;
            controls.enabled = true;

            if ( INTERSECTED ) {

                plane.position.copy( INTERSECTED.position );

                SELECTED = null;


            }


        controls.noRotate=true;
            container.style.cursor = 'auto';

        }

这里有一个实时示例（仅限chrome），如果右键单击形状，将出现左侧菜单，您可以看到范围输入有效，但如果选择中心按钮（右上角的三个按钮））它不起作用。 http://www.felpone.netsons.org/web-threejs/index9.html

Html 5输入类型范围已禁用

0 个答案: