使用three.js时,我遇到一些dat.gui问题,用户无法手动输入gui。在用户单击其文本框之前,具有整数的参数不会更改。当发生这种情况时,它们只会通过鼠标的移动来改变 - 就像向上移动光标会增加值而向下移动会减少它。用户无法为这些参数输入值。 gui的大小也不稳定。当用户以任何方式点击它时,它的宽度和高度会像整数参数的值那样改变。
当我在没有three.js组件的环境中测试我的dat.gui时,我发现我的问题类似于用户点击输入框并按住光标然后移动鼠标时的问题。当像这样测试时,gui的大小保持不变。
你知道可能会发生什么吗?
以下是我的代码 -
< body >
<script type='text/javascript' src='DAT.GUI.min.js'></script>
<script type="text/javascript">
var gui = new dat.GUI();
var coordinates = {
x: 0,
y: 0,
z: 0
};
var labels = {
name: "New Node"
};
var obj = {
add:function(){
var x = coordinates.x;
var y = coordinates.y;
var z = coordinates.z;
var nodeName = labels.name;
//Currently printing to console to see what I get
console.log(nodeName);
console.log("X: " + x);
console.log("Y: " + y);
console.log("Z: " + z);
}
var f2 = gui.addFolder('Coordinates');
f2.add(coordinates, 'x');
f2.add(coordinates, 'y');
f2.add(coordinates, 'z');
gui.add(labels, 'name');
gui.add(obj,'add');
</script>
</body>
以下是three.js代码。这取自这个三个例子 - http://threejs.org/examples/#webgl_interactive_cubes
<script>
//DAT.GUI CODE - SEE ABOVE
</script>
<script>
var populations = prompt("How many Nodes?");
var container, stats;
var camera, controls, scene, renderer;
var pickingData = [], pickingTexture, pickingScene;
var objects = [];
var highlightBox;
var mouse = new THREE.Vector2();
var offset = new THREE.Vector3( 10, 10, 10 );
init();
animate();
function init() {
//Initialize Container
//Initialize Camera
//Initialize Controls
//Initialize Scene
//Initialize pickingScene
//Initialize pickingTexture
//Initialize light and add to scene
//Initialize geometry, pickingGeometry, pickingMaterial, and defaultMaterial
...
var drawnObject = new THREE.Mesh( geometry, defaultMaterial );
scene.add( drawnObject );
pickingScene.add( new THREE.Mesh( pickingGeometry, pickingMaterial ) );
highlightBox = new THREE.Mesh(
new THREE.BoxGeometry( 1, 1, 1 ),
new THREE.MeshLambertMaterial( { color: 0xffff00 })
);
scene.add( highlightBox );
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0xffffff, 1 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
renderer.domElement.addEventListener( 'mousemove', onMouseMove );
}
...
function pick() {
renderer.render( pickingScene, camera, pickingTexture );
var gl = self.renderer.getContext();
var pixelBuffer = new Uint8Array( 4 );
gl.readPixels( mouse.x, pickingTexture.height - mouse.y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer );
var id = ( pixelBuffer[0] << 16 ) | ( pixelBuffer[1] << 8 ) | ( pixelBuffer[2] );
var data = pickingData[ id ];
if ( data) {
//move our highlightBox so that it surrounds the picked object
if ( data.position && data.rotation && data.scale ){
highlightBox.position.copy( data.position );
highlightBox.rotation.copy( data.rotation );
highlightBox.scale.copy( data.scale ).add( offset );
highlightBox.visible = true;
}
} else {
highlightBox.visible = false;
}
}
...
</script>
我将DAT.GUI.min.js中css元素的z索引更改为非常正面,希望将gui放在画布上方。我无法在代码或任何.js脚本源文件中找到WebGL画布的zIndex。但是,我很遗憾有同样的问题,用户可以看到gui,能够突出显示输入框,但不能在gui中键入任何值。
.dg.a {
...
.dg.a .save-row {
position: fixed;
top: 0;
z-index: 999999;** // From z-index: 1002; to move gui to the fore-front}
...
.dg.ac {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: 9999; // from z-index: 0; to move gui to the fore-front }
.dg .selector {
display: none;
position: absolute;
margin-left: -9px;
margin-top: 23px;
z-index: 99999; } // from z-index: 10; to move gui to the fore-front