0

I tried to make a world map with three.js, and find https://github.com/ftorghele/worldMap, almost everything I needed. I updated three.js and d3.js version according that awesome project, but have a problem on last step that mousemove to get country name

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
this.projector.unprojectVector( vector, this.camera );
var raycaster = new THREE.Ray( this.camera.position, vector.subSelf( this.camera.position ).normalize() );
var intersects = raycaster.intersectObjects( this.scene.children );

I think should change like

let vector = new THREE.Vector3(mouse.x, mouse.y, 1);
let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vector, this.camera);
let intersects = raycaster.intersectObjects(this.scene.children, true);

but intersects always get empty array.

The content of (this.scene.children) enter image description here

Thanks!

PaulHuang
  • 219
  • 2
  • 3
  • 14
  • your code looks ok to me, though maybe the vector should be a Vector2 (probably makes no difference). Are you 100% sure the mouse.x and mouse.y positions are correct? Those are what I would be checking first. – 2pha Aug 15 '17 at 03:53
  • 1
    Also see [this answer](https://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast/18553739#18553739). – WestLangley Aug 15 '17 at 04:40
  • @2pha I used mousemove event to check that, looks like `Vector2 {x: -0.40697674418604646, y: 2.525714285714286}` I think it is correct. – PaulHuang Aug 15 '17 at 05:05
  • 1
    A negative mouse.x position is correct? – 2pha Aug 15 '17 at 05:23
  • 1
    @2pha Thank you!!! I found the problem. mouse.x and mouse.y should be negative – PaulHuang Aug 15 '17 at 06:21
  • @WestLangley Thanks! It works perfectly – PaulHuang Aug 15 '17 at 06:25

0 Answers0