2017-01-26 2 views
0

J'utilise le Raycaster dans THREE.js pour me concentrer sur les objets avec la position de la souris. C'est quelque chose que j'ai fait un million de fois auparavant sans problème, mais il y a quelque chose dans ma configuration actuelle qui ne fonctionne pas.Problème de RayCasting dans THREE.js - Les intersections sont capricieuses, la plupart du temps ne renvoyant aucune intersection

De temps en temps, le rappel onFocus est déclenché, mais la plupart du temps, le rappel onBlur est appelé. Pour autant que je puisse voir à partir des exemples et des questions de Stack Overflow je fais les choses correctement, mais cela ne semble pas ... La seule différence que je peux voir entre maintenant et l'autre fois que je l'ai fait est que mon appareil photo est 0, 0, 0,0001, regardant vers les objets, et cette fois la caméra est au-dessus, regardant dans les objets.

L'appareil photo est à 130, 325, 194, et l'objet est à 0, 0, 0

extraits de code ci-dessous:

scene = new THREE.Scene(); 
scene.add(camera); 

const geometry = new THREE.CubeGeometry(50, 50, 50); 
const material = new THREE.MeshBasicMaterial({ color: 0xff00ff, wireframe: false }); 
const mesh = new THREE.Mesh(geometry, material); 
mesh.onFocus =() => { 
    console.log('focus test'); 
} 
mesh.onBlur =() => { 
    console.log('blur test'); 
} 
intersectableObjects.push(mesh); 
scene.add(mesh); 



const onMouseMove = ({ clientX, clientY }) => { 
    const x = (clientX/window.innerWidth) * 2 - 1; 
    const y = - (clientY/window.innerHeight) * 2 + 1; 
    mouseVector.set(x, y); 
    raycaster.setFromCamera(mouseVector, camera); 
    castFocus(); 
} 



const castFocus =() => { 
    intersectableObjects.forEach((obj, i) => { 
     const intersects = raycaster.intersectObject(obj, false); 
     if (intersects.length) return obj.onFocus(); 
     obj.onBlur(); 
    }); 
} 
+0

vous n'avez pas à essayer d'intersecter chaque objet individuellement. vous pouvez utiliser 'raycaster.intersectObjects (scene.children);' ou vous pouvez passer à 'raycaster.intersectObjects' votre tableau d'objets pour tester l'intersection. – gaitat

+0

Merci, j'ai essayé cela aussi mais ça ne marche toujours pas. Je les croise séparément car cela rend un peu plus facile de travailler avec les rappels onBlur et onFocus. –

Répondre

0

Après quelques heures très frustrant j'ai découvert que la Raycaster a des problèmes en travaillant avec une très faible valeur pour cameraNear.

Je me suis approché de l'appareil photo à 0,000001, mais lorsque je l'ai augmenté à 0,01, cela a bien fonctionné.