如何在threejs中添加攝像頭的datgui控件？

我想使DAT-GUI控件在基本threejs例如threejs相機此頁上：如何在threejs中添加攝像頭的datgui控件？

var camera, scene, renderer; 
var geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 1000; 

    scene = new THREE.Scene(); 

    geometry = new THREE.CubeGeometry(200, 200, 200); 
    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); 

    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    // note: three.js includes requestAnimationFrame shim 
    requestAnimationFrame(animate); 

    mesh.rotation.x += 0.01; 
    mesh.rotation.y += 0.02; 

    renderer.render(scene, camera); 

}

我試過下面的代碼：

var params = { 
    z: 100 
} 

var gui = new dat.GUI(); 

gui.add(params, 'z', -500,500).step(5).onChange(function(value){ 
     changeCameraZ(value); 
    }); 
function changeCameraZ(value){ 
    camera.position.z = value; 
}

哪個有效，但這意味着我必須寫一個新功能： changeBlah();

爲每個three.js變量我希望從GUI更改。有沒有更好，更乾淨的方法來實現這一目標？

來源

2012-09-27 Binaromong

您還可以利用DAT.gui如何使用引用。

gui.add(camera.position , 'z', -500, 500).step(5)

和示例

http://jsfiddle.net/2WKqL/2/

來源

2012-09-27 13:09:05 Gero3

謝謝！這正是我所期待的。 – Binaromong

即jsfiddle示例不再有效，這是一個更新的版本：http://jsfiddle.net/2WKqL/8/ – Nick

好和短。 –

這一行應該工作。

gui.add(params, 'z', -500, 500).step(5).onChange(function(value){ camera.position.z = value; });

來源

2012-09-27 11:37:52 WestLangley

如何在threejs中添加攝像頭的datgui控件？

回答

相關問題