Raycasting mouse coordinates

Questions
,
1

When i click on some object on screen it doesn’t get clicked on single object to what i’ve applied click event using raycaster it just getting clicked on whole document like anywhere i click it activates.

Once try double clicking on yellow cube in this page: deeajith.github.io and anywhere in document.

I’ve applied ‘dblclick’ only for cube but it just works every corner of document.
Please help me out.

3

Your code logic ( function onClickadd(event) ) seems to suggest that you raycast for the object, but then add the CSS3D element regardless of the result. Maybe try wrapping the adding code into an if statement, like so:

function onClickadd(event) {

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObject(addButton, true);

//here comes event
if( intersects.length > 0 ){
  element = document.createElement('iframe');
  element.setAttribute("src", "/asse-info.html");
  // element.innerHTML = 'Annotation of bogie in 3d floor.';
  element.className = 'three-div';
  //CSS Object
  div = new THREE.CSS3DObject(element);

  div.scale.x = .009;
  div.scale.y = .008;

  scene2.add(div);
  console.log("Added Lable");
}

}

raycaster.intersectObject() function returns an array of intersections. See https://threejs.org/docs/#api/en/core/Raycaster.intersectObject for more information.

2 Likes
4

Thank You! man :v: @DolphinIQ :pray:
That is too good and small code line .
That worked like :star: