Three.js：无法更改 dat.GUI 中的值
Posted
技术标签:
【中文标题】Three.js：无法更改 dat.GUI 中的值【英文标题】：Three.js: Cannot change value in dat.GUI 【发布时间】：2015-01-30 13:54:25 【问题描述】：我有一个 dat.GUI 的实例。我向该实例添加了一个“组合框”以选择可能的值。当我运行我的应用程序时，dat.GUI 与组合框一起出现，但有一个问题：我无法更改它的默认值（我的 gui 被冻结），这是我的代码：
<html>
<head>
<title>Stack Overflow</title>
<style>
body margin: 0;
canvas width: 100%; height: 100%
</style>
</head>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/optimer_regular.typeface.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/threex.dynamictexture.js"></script>
<script src="js/dat.gui.min.js"></script>
<script>
//Basic Three components
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000 );
//position camera
camera.position.z = 700;
//Set camera controls
var controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
//Set the renderer
var renderer = new THREE.WebGLRenderer( antialias: false );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Set the lights
var light;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 );
scene.add( light );
//GUI
initGUI();
//Let's add a cube
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var material = new THREE.MeshBasicMaterial( color: 0x5484d3 );
var cube = new THREE.Mesh( geometry, material );
cube.position.set(0,20,50)
scene.add( cube );
function initGUI() //HERE IS THE MEAT, I THINK
var LevelView = function()
this.level = 'Operacion';
// Define render logic ...
;
var gui = new dat.GUI();
var text = new LevelView();
gui.add(text, 'level', [ 'Operacion', 'Procesos', 'Participantes', 'Fuentes de Datos', 'Logica de software', 'Telecomunicaciones', 'Infraestructura'] ).onChange(function(value)
this.level = value;
);
function animate()
requestAnimationFrame( animate );
render();
//Render scene
function render()
controls.update();
renderer.render( scene, camera );
animate();
</script>
</body>
</html>
¿我做错了什么？我需要能够使用我的 GUI 更改值。
【问题讨论】：
你没有 `onChange() 事件。 嗨 gaitat，我做了以下更改，但我的 GUI 仍然冻结：gui.add(text, 'level', [ 'Operacion', 'Procesos', 'Participantes', 'Fuentes de Datos', 'Logica de software', 'Telecomunicaciones', 'Infraestructura'] ).onChange(function(value) this.level = value; );
冻结是什么意思？选择后无法选择或没有任何反应？
这有帮助吗？ code.google.com/p/dat-gui/issues/detail?id=5
code.google 链接包含答案，谢谢 gaitat！
【参考方案1】：
解决方法：如果你使用带three.js的鼠标控制摄像头，你必须在mouseDown动作的MouseListener中注释以下行：
event.preventDefault();
【讨论】：
不要修改TrackballControls，试试var controls = new THREE.TrackballControls( camera, renderer.domElement );
哦，哇，这行得通——在我的情况下，我必须在 THREE.OrbitControls.onMouseDown 中更改它【参考方案2】：
将包含 dat.gui 元素的 div 置于 Three.js div 下方
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
然后是 dat.gui
<div id="gui"></div>
【讨论】：
以上是关于Three.js：无法更改 dat.GUI 中的值的主要内容，如果未能解决你的问题，请参考以下文章
Three.js & Dat.gui - TrackballControls renderer.domElement 禁用旋转和平移