CODEWITHSUNDEEP
javascriptthree.js
Jason Lee
Jason Lee

Reputation: 31

conflict between dat.gui.js and trackballControl.js in three.js

When using three.js, I found a conflict between dat.gui.js and trackballControl.js. For example, after changing values by dat.gui, I can't rotate the camera with mousemove because the mouse can not move out from the area of GUI. Why and how to deal with it?

enter image description here

Upvotes: 2

Views: 627

Answers (1)

2pha
2pha

Reputation: 10155

The trackballControls constructor allows for a second argument of a dom element.
This dom element is what the mouse event listeners for the controls will be added to. If you don't supply this argument, the mouse event listeners will be added to the document (which I believe is your problem).

It is hard to give you an example which will work for you, because you have not posted your code.
You should be able to send the renderer dom element to the trackballControls to fix your problem.
eg. 

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
// send dom element to trackballControlls.
controls = new THREE.TrackballControls( camera, renderer.domElement );

Run snippet below for working example.

var camera, scene, renderer, mesh, material, controls, gui, directionalLight;
init();
render();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;
    
    // Add TrackballControls, sending dom element to attach mouseevent listeners to.
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.addEventListener( 'change', render );

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);
    
    // Add GUI
    var gui = new dat.GUI();
    var lightFolder = gui.addFolder('Light');
    lightFolder.add(directionalLight, 'intensity').onChange(function(){render()});
    lightFolder.open();
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();
}

// Only called by controls change or gui change.
function render() {
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    controls.handleResize();
}
body {
margin: 0px;
}
<script src="https://cdn.rawgit.com/dataarts/dat.gui/v0.6.2/build/dat.gui.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>

Upvotes: 3

Related Questions