0

I would like to add object picking to this code:

var Three = new function () {
    this.scene = new THREE.Scene()

    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    this.camera.position.set(20, 52, 20);
    this.camera.rotation.order = 'YXZ';
    this.camera.rotation.y = -Math.PI / 4;
    this.camera.rotation.x = Math.atan(-1 / Math.sqrt(2));
    this.camera.scale.addScalar(1);

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

    var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(436, 624), new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('/img/maps/1.png')}));
    ground.rotation.x = -Math.PI / 2; //-90 degrees around the x axis
    this.scene.add(ground);

    var light = new THREE.PointLight(0xFFFFDD);
    light.position.set(-1000, 1000, 1000);
    this.scene.add(light);

    var loader = new THREE.JSONLoader();
    this.loadCastle = function (color, x, y) {
        loader.load('/models/castle.json', getGeomHandler(color, x * 4 - 214, y * 4 - 309, 0.5));
    }
    this.init = function () {
        $('#game').append(Three.renderer.domElement);
        Three.render();
    }
    this.render = function () {
        requestAnimationFrame(Three.render);
        Three.renderer.render(Three.scene, Three.camera);
    };
}

How can I do this in the simplest way?

p.s. There are only castles meshes loaded with "loadCastle" method and I want to be able to pick them.

Edit:

I tried AlmazVildanov sugestion like this:

function getGeomHandler(color, x, y, scale) {
    return function (geometry) {
        var model = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: color}));
        model.scale.set(scale, scale, scale);
        model.position.set(x, 0, y);
        model.name = color + '_' + x + '_' + y;
        Three.scene.add(model);
        EventsControls.attach(model);
    };
}

EventsControls = new EventsControls(Three.camera, Three.renderer.domElement);
EventsControls.displacing = false;
EventsControls.onclick = function () {
    console.log('aaa')
    console.log(this.focused.name)
}

but when I'm clicking on models nothing happens, no messages in console.

EDIT 2: Object picking is working fine. Solved.

Bartek Kosa
  • 842
  • 1
  • 14
  • 25
  • 1
    Look [here](http://stackoverflow.com/questions/26250810/three-js-get-object-name-with-mouse-click/26311582#26311582) – gevaraweb Jan 12 '15 at 17:25
  • @AlmazVildanov where can I get EventsControls.js? – Bartek Kosa Jan 12 '15 at 17:37
  • [here](http://alexan0308.github.io/threejs/examples/js/controls/EventsControls.js) – gevaraweb Jan 12 '15 at 17:42
  • @AlmazVildanov what if I have a lot of meshes but only few will be subject of picking, can I programmatically ignore them with your lib? – Bartek Kosa Jan 14 '15 at 18:55
  • 1
    Yes. With code `EventsControls.attach( model );` or `EventsControls.detach( model );` – gevaraweb Jan 14 '15 at 19:48
  • @AlmazVildanov I edited my code. Can you look at it and tell me if I do something wrong? – Bartek Kosa Jan 14 '15 at 19:57
  • The model must be loaded after the declaration of `EventsControls`. This is done? – gevaraweb Jan 14 '15 at 20:24
  • This was strange: I switched to Firefox becase Chrom couldn't handle this much of meshes I was loading so I was testing it in Firefox. But Firebug didn't show me error messages that Firefox couldn't read EventsControls.js file (or maybe I didn't know where to search for it). Now I limited numer of meshes and switched back to Chrome and there was this error in console about file access problems. So sorry for stupid question, it was problem with file permissions and everything is working fine now. – Bartek Kosa Jan 14 '15 at 21:57
  • ok, good. I'm glad that it works) – gevaraweb Jan 15 '15 at 07:37
  • Ok, I have EventControls implemented and it is working but I don't know how to handle situation when I click on the ground (it is one big plane mesh). How can I get coordinates of that point on the ground (I have only coordinates of that big mesh)? – Bartek Kosa Jan 18 '15 at 23:46
  • `EventsControls.attach( youGround );` ? – gevaraweb Jan 19 '15 at 17:11
  • I have it attached but will this.intersects[0].point in onclick work? Is it right way to do it? – Bartek Kosa Jan 19 '15 at 21:28
  • Yes =) `this.intersects[0].point` – gevaraweb Jan 20 '15 at 06:30
  • How can I distinguish between left and right mouse button? – Bartek Kosa Jan 26 '15 at 07:29
  • right mouse button = shift+click – gevaraweb Jan 26 '15 at 09:35

1 Answers1

0

Solution to my question is to use @AlmazVildanov EventsControls

Bartek Kosa
  • 842
  • 1
  • 14
  • 25