« Raycaster » : différence entre les versions
Aucun résumé des modifications |
|||
| Ligne 1 : | Ligne 1 : | ||
Cette classe est conçu pour faciliter le [[Définitions#Raycasting|raycasting]]. Le raycasting est utilisé entre autres choses, pour détecter ce que la souris sélectionne (trouver les objets que la souris survole dans l'espace 3D). | Cette classe est conçu pour faciliter le [[Définitions#Raycasting|raycasting]]. Le raycasting est utilisé entre autres choses, pour détecter ce que la souris sélectionne (trouver les objets que la souris survole dans l'espace 3D). | ||
===Exemple=== | ===Exemple=== | ||
<source lang="javascript"> | |||
var raycaster = new THREE.Raycaster(); | |||
var mouse = new THREE.Vector2(); | |||
function onMouseMove( event ) { | |||
// Définition de la position de la souris dans des coordonnées normalisée du système | |||
// (-1 à +1) pour les deux composantes | |||
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; | |||
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; | |||
} | |||
function render() { | |||
// mise à jour du rayon de sélection avec les positions de la caméra et de la souris | |||
raycaster.setFromCamera( mouse, camera ); | |||
//définition des objets qui croisent le rayon de sélection | |||
var intersects = raycaster.intersectObjects( scene.children ); | |||
for ( var i = 0; i < intersects.length; i++ ) { | |||
intersects[ i ].object.material.color.set( 0xff0000 ); | |||
} | |||
renderer.render( scene, camera ); | |||
} | |||
window.addEventListener( 'mousemove', onMouseMove, false ); | |||
window.requestAnimationFrame(render); | |||
</source> | |||
===Constructeur=== | ===Constructeur=== | ||
===Propriétés=== | ===Propriétés=== | ||
===Méthodes=== | ===Méthodes=== | ||
Version du 7 mars 2018 à 15:11
Cette classe est conçu pour faciliter le raycasting. Le raycasting est utilisé entre autres choses, pour détecter ce que la souris sélectionne (trouver les objets que la souris survole dans l'espace 3D).
Exemple
<source lang="javascript"> var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2();
function onMouseMove( event ) {
// Définition de la position de la souris dans des coordonnées normalisée du système // (-1 à +1) pour les deux composantes
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() { // mise à jour du rayon de sélection avec les positions de la caméra et de la souris
raycaster.setFromCamera( mouse, camera );
//définition des objets qui croisent le rayon de sélection var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
} renderer.render( scene, camera );
}
window.addEventListener( 'mousemove', onMouseMove, false ); window.requestAnimationFrame(render); </source>