« Raycaster » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
(Page créée avec « ===Exemple=== ===Constructeur=== ===Propriétés=== ===Méthodes=== »)
 
Aucun résumé des modifications
 
(8 versions intermédiaires par le même utilisateur non affichées)
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).
===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ées 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===
<source lang="javascript">Raycaster( origin, direction, near, far ) </source>
'''origin''' — vecteur d'origine d'où provient le rayon.
'''direction''' — vecteur de direction qui donne la direction du rayon. Il doit être normalisé.
'''near''' — Tous les résultats retournés sont plus éloignés que near. Near ne peut pas être négatif. La valeur par défaut est 0.
'''far''' — Tous les résultats retournés sont plus proches que far. Far ne peut pas être inférieur à near. La valeur par défaut est Infinity.
Cela crée un nouvel objet raycaster.
===Propriétés===
===Propriétés===
'''.far'''
C'est le facteur '''far''' de [[raycaster]]. Cette valeur indique quels objets peuvent être  éliminés en fonction de la distance.
Cette valeur ne doit pas être négative et doit être supérieure à la propriété '''near'''.
'''.linePrecision'''
Facteur de précision du [[raycaster]] quand il intercepte un objet [[Line]].
'''.near'''
Le facteur '''near''' de [[raycaster]]. Cette valeur indique quels objets peuvent être éliminés en fonction de la distance.
Cette valeur ne doit pas être négative en doit être plus petite que la propriété '''far'''.
'''.params'''
Un objet avec les propriétés suivantes :
{
  [[Mesh]]: {},
  [[Line]]: {},
  [[LOD]]: {},
  [[Points]]: {Threshold: 1},
  [[Sprite]]: {}
}
'''.ray'''
L'objet [[Ray]] utilisé pour le [[Définitions#Raycasting|raycasting]].
===Méthodes===
===Méthodes===
'''.set (origin, direction)'''
'''origin''' — vecteur d'origine d'où provient le rayon.
'''direction''' — vecteur de direction normalisée qui donne la direction du rayon.
Met à jour le rayon avec une nouvelle origine et une nouvelle direction.
'''.setFromCamera ( coords, camera )'''
'''coords''' — coordonnées 2D de la souris, dans un système de coordonnées normalisées (NDC)--- les composants X et Y doivent être compris entre -1 et 1.
'''camera''' — camera d'où le rayon  provient.
Met à jour le rayon avec une nouvelle origine et une nouvelle direction.
'''.intersectObject ( object, recursive )'''
'''object''' — objet testé pour une intersection  avec le rayon.
'''recursive''' — Si égal à true, les descendants seront aussi testés. Autrement, cela ne contrôle que l'intersection avec l'objet. La valeur par défaut est false.
Contrôle toute intersection entre le rayon et l'objet avec les descendants ou non.  Les intersections sont renvoyées classées en fonction de la distance, les plus proches en premier. Un tableau d'intersections est retourné...
<source lang="javascript">[ { distance, point, face, faceIndex, indices, object }, ... ]</source>
'''distance''' – distance entre l'origine du rayon et l'intesection.
'''point''' – point de l'intersection, dans les coordonnées du monde.
'''face''' – face traversée.
'''faceIndex''' – index de la face traversée
'''indices''' – indices des sommets compris dans la face touchée.
'''object''' – objet intercepté.
'''uv''' - coordonnées U,V  au point de l'intersection.
Quand un [[Mesh]] créé avec [[BufferGeometry]] est intercepté, faceIndex sera '''indéfini''' et '''indices''' sera défini;
si c'est un [[Mesh]] créé avec [[Geometry]] alors, '''indices''' sera indéfini.
[Raycaster]] fait appel à la méthode raycast de l'objet passé, pour évaluer si le rayon croise ou non l'objet. Cela permet aux [[Mesh|Meshes]] de répondre différemment au raycasting que les [[Line|lignes]] et les [[Points|nuages de points]].
'''Note''' : pour les meshes, les faces doivent être orientées vers l'origine du rayon pour être détectées; les intersections du rayon passant par l'arrière d'une face ne seront pas détectées. Pour détecter les deux côtés des faces d'un objet, il faut définir la propriété [[Material#.side|side]] du [[Material|matériau]] à THREE.DoubleSide .
'''.intersectObjects ( objects, recursive )'''
'''objects''' — Objets à contrôler pour les intersections avec le rayon.
'''recursive''' — Si égal à true, les descendants seront aussi testés. Autrement, cela ne contrôle que l'intersection avec l'objet. La valeur par défaut est false.
Contrôle toute intersection entre le rayon et l'objet avec les descendants ou non.  Les intersections sont renvoyées classées en fonction de la distance, les plus proches en premier. Les interactions prennent la même forme que celles retournées par '''.intersectObject.'''

Version actuelle datée du 7 mars 2018 à 16:34

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

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ées 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);

Constructeur

Raycaster( origin, direction, near, far )

origin — vecteur d'origine d'où provient le rayon.

direction — vecteur de direction qui donne la direction du rayon. Il doit être normalisé.

near — Tous les résultats retournés sont plus éloignés que near. Near ne peut pas être négatif. La valeur par défaut est 0.

far — Tous les résultats retournés sont plus proches que far. Far ne peut pas être inférieur à near. La valeur par défaut est Infinity.

Cela crée un nouvel objet raycaster.

Propriétés

.far

C'est le facteur far de raycaster. Cette valeur indique quels objets peuvent être éliminés en fonction de la distance.

Cette valeur ne doit pas être négative et doit être supérieure à la propriété near.


.linePrecision

Facteur de précision du raycaster quand il intercepte un objet Line.


.near

Le facteur near de raycaster. Cette valeur indique quels objets peuvent être éliminés en fonction de la distance.

Cette valeur ne doit pas être négative en doit être plus petite que la propriété far.


.params

Un objet avec les propriétés suivantes :

{

 Mesh: {},
 Line: {},
 LOD: {},
 Points: {Threshold: 1},
 Sprite: {}

}


.ray

L'objet Ray utilisé pour le raycasting.

Méthodes

.set (origin, direction)

origin — vecteur d'origine d'où provient le rayon.

direction — vecteur de direction normalisée qui donne la direction du rayon.

Met à jour le rayon avec une nouvelle origine et une nouvelle direction.


.setFromCamera ( coords, camera )

coords — coordonnées 2D de la souris, dans un système de coordonnées normalisées (NDC)--- les composants X et Y doivent être compris entre -1 et 1.

camera — camera d'où le rayon provient.

Met à jour le rayon avec une nouvelle origine et une nouvelle direction.


.intersectObject ( object, recursive )

object — objet testé pour une intersection avec le rayon.

recursive — Si égal à true, les descendants seront aussi testés. Autrement, cela ne contrôle que l'intersection avec l'objet. La valeur par défaut est false.

Contrôle toute intersection entre le rayon et l'objet avec les descendants ou non. Les intersections sont renvoyées classées en fonction de la distance, les plus proches en premier. Un tableau d'intersections est retourné...

[ { distance, point, face, faceIndex, indices, object }, ... ]

distance – distance entre l'origine du rayon et l'intesection.

point – point de l'intersection, dans les coordonnées du monde.

face – face traversée.

faceIndex – index de la face traversée

indices – indices des sommets compris dans la face touchée.

object – objet intercepté.

uv - coordonnées U,V au point de l'intersection.

Quand un Mesh créé avec BufferGeometry est intercepté, faceIndex sera indéfini et indices sera défini;

si c'est un Mesh créé avec Geometry alors, indices sera indéfini.

[Raycaster]] fait appel à la méthode raycast de l'objet passé, pour évaluer si le rayon croise ou non l'objet. Cela permet aux Meshes de répondre différemment au raycasting que les lignes et les nuages de points.

Note : pour les meshes, les faces doivent être orientées vers l'origine du rayon pour être détectées; les intersections du rayon passant par l'arrière d'une face ne seront pas détectées. Pour détecter les deux côtés des faces d'un objet, il faut définir la propriété side du matériau à THREE.DoubleSide .


.intersectObjects ( objects, recursive )

objects — Objets à contrôler pour les intersections avec le rayon.

recursive — Si égal à true, les descendants seront aussi testés. Autrement, cela ne contrôle que l'intersection avec l'objet. La valeur par défaut est false.

Contrôle toute intersection entre le rayon et l'objet avec les descendants ou non. Les intersections sont renvoyées classées en fonction de la distance, les plus proches en premier. Les interactions prennent la même forme que celles retournées par .intersectObject.