Skip to content

Commit

Permalink
Raycaster: Added setFromXRController() (#27801)
Browse files Browse the repository at this point in the history 
* Raycaster: Added setFromXRController().

* Docs: Added setFromXRController() to Raycaster.

* Clean up.
  • Loading branch information
@mrdoob
mrdoob authored Feb 22, 2024
1 parent 61be06a commit 49d425c
Show file tree
Hide file tree
Showing 11 changed files with 99 additions and 74 deletions.
84 changes: 45 additions & 39 deletions docs/api/ar/core/Raycaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,55 @@
</head>
<body class="rtl">
<h1>[name]</h1>

<p class="desc">
تم تصميم هذه الفئة للمساعدة في
[link:https://en.wikipedia.org/wiki/Ray_casting raycasting]. يتم استخدام Raycasting
لاختيار الماوس (العمل على معرفة الكائنات في المساحة ثلاثية الأبعاد التي يكون عليها الماوس
فوق) من بين أشياء أخرى.
</p>

<h2>مثال الكود</h2>
<code>
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove( event ) {

// حساب موضع المؤشر في إحداثيات الجهاز المعتدلة
// (-1 إلى +1) لكلا المكونين

pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

// تحديث شعاع التقاط مع الكاميرا وموضع المؤشر
raycaster.setFromCamera( pointer, camera );

// حساب الكائنات المتقاطعة مع شعاع التقاط
const intersects = raycaster.intersectObjects( scene.children );

for ( let i = 0; i < intersects.length; i ++ ) {

intersects[ i ].object.material.color.set( 0xff0000 );

}

renderer.render( scene, camera );

}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);

</code>

<h2>أمثلة (Examples)</h2>

<p>
[example:webgl_interactive_cubes Raycasting to a Mesh]<br />
[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
Expand All @@ -68,9 +68,9 @@ <h2>أمثلة (Examples)</h2>
[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
[example:webgl_raycaster_texture Raycast to a Texture]
</p>

<h2>المنشئ (Constructor)</h2>

<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] )</h3>
<p>
[page:Vector3 origin] — متجه المنشأ الذي يلقي منه الشعاع.<br />
Expand All @@ -82,64 +82,64 @@ <h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near
أقل من قريب. القيمة الافتراضية هي Infinity.
</p>
<p>هذا يخلق كائن raycaster جديد.<br /></p>

<h2>الخصائص (Properties)</h2>

<h3>[property:Float far]</h3>
<p>
عامل بعيد للraycaster. هذه القيمة تشير إلى الكائنات التي يمكن
تجاهلها بناءً على المسافة. هذه القيمة لا يجب أن تكون سلبية و
يجب أن تكون أكبر من خاصية قريب.
</p>

<h3>[property:Float near]</h3>
<p>
عامل قريب للraycaster. هذه القيمة تشير إلى الكائنات التي يمكن
تجاهلها بناءً على المسافة. هذه القيمة لا يجب أن تكون سلبية و
يجب أن تكون أصغر من خاصية بعيد.
</p>

<h3>[property:Camera camera]</h3>
<p>
الكاميرا المستخدمة عند التصوير بالأشعة ضد كائنات تعتمد على المشهد مثل
كائنات billboarded مثل [page:Sprites]. يمكن تعيين هذا الحقل يدويًا أو
يتم تعيينه عند استدعاء "setFromCamera". افتراضات إلى null.
</p>

<h3>[property:Layers layers]</h3>
<p>
يستخدم من قبل [name] لتجاهل كائنات 3D بشكل اختياري عند إجراء
اختبارات التقاطع. يضمن المثال التالي للكود أن كائنات 3D فقط على طبقة `1` ستحظى باحترام من قِبَل المثيل من [name].

<code>
raycaster.layers.set( 1 );
object.layers.enable( 1 );
raycaster.layers.set( 1 );
object.layers.enable( 1 );
</code>
</p>

<h3>[property:Object params]</h3>
<p>
كائن به الخصائص التالية:

<code>
{
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
Sprite: {}
}
</code>

حيث threshold هو دقة raycaster عند التقاط
كائنات، في وحدات العالم.
</p>

<h3>[property:Ray ray]</h3>
<p>ال[Page:Ray] المستخدم للتصوير بالأشعة.</p>

<h2>الوظائف (Methods)</h2>

<h3>[method:undefined set]( [param:Vector3 origin], [param:Vector3 direction])</h3>
<p>
[page:Vector3 origin] — متجه المنشأ الذي يلقي منه الشعاع.<br />
Expand All @@ -150,15 +150,21 @@ <h3>[method:undefined set]( [param:Vector3 origin], [param:Vector3 direction])</
يحدث الشعاع بمنشأ واتجاه جديد. يرجى ملاحظة أن هذا
الطريقة تنسخ فقط القيم من الوسائط.
</p>

<h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>
<p>
[page:Vector2 coords] — إحداثيات 2D للماوس، في تعديل جهاز
إحداثيات (NDC) --- يجب أن تكون مكونات X و Y بين -1 و 1.<br />
[page:Camera camera] — الكاميرا التي يجب أن ينبثق منها الشعاع
</p>
<p>يحدث الشعاع بمنشأ واتجاه جديد.</p>


<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — الكائن للتحقق من التقاطع مع
Expand Down Expand Up @@ -203,7 +209,7 @@ <h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recu
وجوه كائن، سترغب في تعيين خصائص [page:Mesh.material material]
[page:Material.side side] إلى `THREE.DoubleSide`.
</p>

<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Array objects] — الكائنات للتحقق من التقاطع مع
Expand Down
14 changes: 10 additions & 4 deletions docs/api/en/core/Raycaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,8 @@ <h3>[property:Layers layers]</h3>
objects on layer `1` will be honored by the instance of [name].

<code>
raycaster.layers.set( 1 );
object.layers.enable( 1 );
raycaster.layers.set( 1 );
object.layers.enable( 1 );
</code>
</p>

Expand All @@ -123,12 +123,12 @@ <h3>[property:Object params]</h3>
An object with the following properties:

<code>
{
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
Sprite: {}
}
</code>

Expand Down Expand Up @@ -160,6 +160,12 @@ <h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera came
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — The object to check for intersection with the
Expand Down
20 changes: 13 additions & 7 deletions docs/api/it/core/Raycaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ <h3>[property:Float near]</h3>

<h3>[property:Camera camera]</h3>
<p>
La telecamera da utilizzare durante il raycast contro oggetti dipendenti dalla vista, come oggetti su cartelloni pubblicitari
La telecamera da utilizzare durante il raycast contro oggetti dipendenti dalla vista, come oggetti su cartelloni pubblicitari
come [page:Sprites]. Questo campo può essere settato manualmente o viene impostato quando si chiama il metodo "setFromCamera".

L'impostazione predefinita è null.
Expand Down Expand Up @@ -156,12 +156,18 @@ <h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera came
Aggiorna il raggio con una nuova origine e direzione.
</p>

<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — L'oggetto da verificare per l'intersezione con il raggio.<br />
[page:Boolean recursive] — Se true, controlla anche tutti i discendenti. Altrimenti controlla soltanto
[page:Boolean recursive] — Se true, controlla anche tutti i discendenti. Altrimenti controlla soltanto
l'intersezione con l'oggetto. Il valore predefinito è true.<br />
[page:Array optionalTarget] — (opzionale) obiettivo per impostare il risultato.
[page:Array optionalTarget] — (opzionale) obiettivo per impostare il risultato.
Altrimenti viene istanziato un nuovo [page:Array]. Se impostato, è necessario cancellare questo array prima di ogni chiamata (ad esempio, array.length = 0;).
</p>
<p>
Expand All @@ -183,8 +189,8 @@ <h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recu
[page:Integer instanceId] – Il numero di indice dell'istanza in cui il raggio interseca la InstancedMesh.
</p>
<p>
`Raycaster` delega al metodo [page:Object3D.raycast raycast] dell'oggetto passato,
quando valuta se il raggio interseca l'oggetto o no. Ciò permette alle mesh di rispondere
`Raycaster` delega al metodo [page:Object3D.raycast raycast] dell'oggetto passato,
quando valuta se il raggio interseca l'oggetto o no. Ciò permette alle mesh di rispondere
in modo diverso al raycasting rispetto alle linee e alle nuvole di punti.
</p>
<p>
Expand All @@ -197,14 +203,14 @@ <h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recu
<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Array objects] — Gli oggetti da controllare per l'intersezione con il raggio.<br />
[page:Boolean recursive] — Se true, controlla anche i discendenti degli oggetti. Altrimenti controlla soltanto
[page:Boolean recursive] — Se true, controlla anche i discendenti degli oggetti. Altrimenti controlla soltanto
l'intersezione con gli oggetti. Il valore predefinito è true.<br />
[page:Array optionalTarget] — (opzionale) obiettivo per impostare il risultato.
Altrimenti viene istanziato un nuovo [page:Array]. Se impostato, è necessario cancellare questo array prima di ogni chiamata (ad esempio, array.length = 0;).
</p>
<p>
Controlla tutte le intersezioni tra il raggio e gli oggetti con o senza i discendenti.
Le intersezioni sono restituite ordinate per distanza, prima le più vicine. Le intersezioni
Le intersezioni sono restituite ordinate per distanza, prima le più vicine. Le intersezioni
hanno la stessa forma di quelle restituite da [page:.intersectObject].
</p>

Expand Down
6 changes: 6 additions & 0 deletions docs/api/ko/core/Raycaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,12 @@ <h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera came
레이의 새 시점과 방향을 업데이트합니다.
</p>

<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — 레이와의 교차 체크를 하는 객체입니다.<br />
Expand Down
6 changes: 6 additions & 0 deletions docs/api/zh/core/Raycaster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,12 @@ <h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera came
使用一个新的原点和方向来更新射线。
</p>

<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>

<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] —— 检查与射线相交的物体。<br />
Expand Down
7 changes: 1 addition & 6 deletions examples/jsm/interactive/InteractiveGroup.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
Group,
Matrix4,
Raycaster,
Vector2
} from 'three';
Expand Down Expand Up @@ -61,7 +60,6 @@ class InteractiveGroup extends Group {
const scope = this;

const raycaster = new Raycaster();
const tempMatrix = new Matrix4();

// TODO: Dispatch pointerevents too

Expand All @@ -76,10 +74,7 @@ class InteractiveGroup extends Group {

const controller = event.target;

tempMatrix.identity().extractRotation( controller.matrixWorld );

raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
raycaster.setFromXRController( controller );

const intersections = raycaster.intersectObjects( scope.children, false );

Expand Down
6 changes: 1 addition & 5 deletions examples/webxr_xr_cubes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@

let controller, controllerGrip;
let INTERSECTED;
const tempMatrix = new THREE.Matrix4();

init();
animate();
Expand Down Expand Up @@ -208,10 +207,7 @@

// find intersections

tempMatrix.identity().extractRotation( controller.matrixWorld );

raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
raycaster.setFromXRController( controller );

const intersects = raycaster.intersectObjects( room.children, false );

Expand Down
6 changes: 1 addition & 5 deletions examples/webxr_xr_dragging.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@
let raycaster;

const intersected = [];
const tempMatrix = new THREE.Matrix4();

let controls, group;

Expand Down Expand Up @@ -219,10 +218,7 @@

controller.updateMatrixWorld();

tempMatrix.identity().extractRotation( controller.matrixWorld );

raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
raycaster.setFromXRController( controller );

return raycaster.intersectObjects( group.children, false );

Expand Down
Loading

0 comments on commit 49d425c

Please sign in to comment.