three.js 2D mouseclick à coordonnées 3d utilisant raycaster

Question

J'essaie de dessiner des objets 2D dans le plan z = 0, maintenant je veux convertir les coordonnées de la souris écran en coordonnées 3D du monde.

J'utilisé l'appareil photo ci-dessous:

camera = new THREE.OrthographicCamera(SCREEN_WIDTH/- 2, SCREEN_WIDTH/2,   
SCREEN_HEIGHT/2, SCREEN_HEIGHT/- 2, NEAR, FAR); 
camera.position.set(0,0,500); 
camera.lookAt(scene.position); 

container = document.getElementById('ThreeJS'); 
container.appendChild(renderer.domElement); 

var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10); 
var material = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 1}); 
var floor = new THREE.Mesh(floorGeometry, material); 
floor.position.set(0,0,0); 
scene.add(floor); 
targetList.push(floor); 

J'ai essayé deux façons: 1.Le réponse: [question]: Mouse/Canvas X, Y to Three.js World X, Y, Z

var vector = new THREE.Vector3(); 
vector.set(
(event.clientX/window.innerWidth) * 2 - 1, 
- (event.clientY/window.innerHeight) * 2 + 1, 
0.5); 
vector.unproject(camera); 
var dir = vector.sub(camera.position).normalize(); 
var distance = - camera.position.z/dir.z; 
var pos = camera.position.clone().add(dir.multiplyScalar(distance)); 

mais does't travail pour moi la pos n'est pas la bonne position dans les coordonnées du monde 3D; Pour être honnête, je ne comprends pas cette méthode en fait ...

2: 
mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
var raycaster = new THREE.Raycaster(); 
raycaster.setFromCamera(mouse, camera); 
var intersects = raycaster.intersectObjects(targetList); 
// if there is one (or more) intersections 
if (intersects.length > 0) 
{ 
    console.log(intersects[0].point); 
    console.log("Hit @ " + toString(intersects[0].point)); 
} 

Cela fonctionne bien à la place normale, mais si ajouter "largeur: 300px; hauteur: 400px" #test div avant #ThreeJS div, il est allé totalement la mauvaise position, POURQUOI, POURQUOI, POURQUOI?

Quelqu'un pourrait-il me donner une solution utilisable?

Answer 1

On dirait que votre viewport ne couvre qu'une partie de la page et pas toute la page comme dans tous ces exemples de three.js. Dans ce cas, vous devez déterminer les coordonnées réelles de votre souris un peu différemment: utilisez donc event.offsetX au lieu de clientX. Et bien sûr, vous avez besoin de vos <div> dimensions réelles au lieu de window.innerWidth

var mouse = new THREE.Vector2(); 
mouse.x = (event.offsetX/SCREEN_WIDTH) * 2 - 1; 
mouse.y = - (event.offsetY/SCREEN_HEIGHT) * 2 + 1;