Framework entegrasyonları · React Three Fiber

Pointer Olayları & Picking: İsabet Yüzeyi Diplomasisi

Kullanıcı Canvas'a dokunduğunda DOM tıklaması yetmez; ışın isabeti gerekir. Bu sayfa R3F'nin pointer prop yüzeyini anlatır: olay ağaçta nasıl yükselir, kim isabet alır, hover maliyeti nerede yakılır · Three raycast matematiğinin tekrarı değildir.

Holodepth bu yaprağı «addEventListener nedir?» veya WebXR uzamsal UI dersi olarak yazmaz. React olay temeli React Vitae omurgasındadır. Raycaster / intersect matematiği Three etkileşim omurgasındadır. HTML Canvas pointer borusu HTML Canvas · Pointer sistemi ile akrabadır ama DOM hedef modeli farklıdır. XR controller / spatial UI WebXR · Spatial interaction yaprağındadır. glTF clickable metadata bu kapının konusu değildir.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «R3F pointer prop'ları isabet yüzeyidir. Bubbling Object3D hiyerarşisine yaslanır. stopPropagation bilinçli kapıdır. Hover pahalı olabilir. DOM overlay ile Canvas hit ayrı politika ister. Her kare raycast varsayılan değildir. Sonraki kapı performans & imperatif kaçıştır.»

Bu sayfanın sınırı · komşu konularla ayrım

Bu sayfa R3F'de pointer / picking köprüsünü anlatır:

İsabet yüzeyi vs DOM click
onPointer* / onClick prop sözleşmesi
Bubbling · stopPropagation · hover maliyeti
DOM overlay diplomasi · kare içi raycast yasağı

Bilinçli olarak dışarıda bırakılan konular:

Canvas host / frameloop → Canvas & kök sözleşme
Katalog / args → Deklaratif sahne grafı
useFrame / invalidate → useFrame / useThree
useLoader / dispose → Yükleme & Suspense köprüsü
Instancing / kaçış → Performans & imperatif kaçış
Raycast matematik / BVH teorisi → Three etkileşim · XR ışın → WebXR · React DOM events → React Vitae · glTF şema → format izlekleri

Kısa ayrım: Bu sayfa «R3F yüzeyi nasıl isabet alır?» · Three raycast «ışın geometrisi» · WebXR spatial «uzayda kontrolcü UI» · HTML Canvas pointer «2D tuval girdisi».

İsabet yüzeyi · tıklanan DOM değil

DOM'da hedef element ağaçta görünür. Canvas'ta görünen pikseller tek bir DOM düğümünden gelir; hangi mesh'in seçildiği kamera + ışın + geometri testi ile bulunur. R3F bu testi olay prop'larına sarar: onClick, onPointerOver, onPointerMissed gibi isimler React'e benzer, hedef modeli Object3D'dir.

Holodepth dili: Canvas host DOM olayını yakalar; Fiber isabet listesini üretir; prop callback'iniz ürün politikasını yazar. «div gibi onClick» ezberi, occluder ve sıra sürprizlerinde kırılır.

Piksel yanıltır; isabet yüzeyi sözleşmedir.

Prop yüzeyi: olay sözlüğü

Üretimde sık kullanılan aile (sürüme göre isimler incelenir): tıklama / pointer down-up, enter-leave / over-out, move, missed (boşluğa). Holodepth kuralı: etkileşim istenen mesh'e prop yazın; «sahneye genel dinleyici» ile her şeyi yakalamak teşhisi zorlaştırır.

Event nesnesinde tipik olarak nokta, normal, mesafe, object, kısmi DOM event köprüsü bulunur. Bunların matematiksel anlamı Three raycast omurgasındadır; burada mühür: callback imzası ürün sözleşmesidir, her alanı UI state'e dökmek zorunda değilsiniz.

onPointerMissed seçim temizliği için değerlidir: «hiçbir mesh tutmadı» ile «yanlış mesh tuttu» ayrılır.

Bubbling ve stopPropagation

İsabet çocuktaysa olay üst group'lara da yükselebilir. Bu, deklaratif hiyerarşinin etkileşim yüzüdür. Ana montaj grubunda genel onClick ile parça üzerindeki özel tıklama çakışabilir.

stopPropagation bilinçli kapıdır: parçanın olayı montaja gitmesin istiyorsanız kapatın. Holodepth: yayılmayı varsayılan «sihir» sanmayın; ürün ağacında hangi düğümün ürün eylemi olduğunu tek cümleyle yazın.

Sıra, occluder, görünmez isabet

Kameraya daha yakın yüzey genelde önce isabet alır. Görünmez ama raycast açık collider, arkadaki görsel butonu «çalar». Holodepth: dekoratif cam / görünmez hit box politikasını ayrı mühürleyin: visible ile raycast katılımı her zaman aynı değildir (sürüme / prop'lara göre raycast kapatma yolları vardır).

Görünürlük ≠ isabet · ürün notu
Durum	Beklenti	Dikkat
Görünür mesh + prop	İsabet alınır	Üstte occluder var mı?
Gizli collider	Hit alanı genişler	Görsel ile hiza bozulmasın
Süs mesh, etkileşimsiz	Raycast kapalı tercih	Yanlış tıklama yağmuru

Layers / mask derinliği Three omurgasına bırakılır; R3F'de bilinmesi gereken: büyük sahnede her mesh'i isabet adayı yapmayın.

Hover maliyeti

onPointerMove / sürekli over-out, mobilde ve yoğun sahnede pahalıdır. Holodepth: hover'ı «her polygon'da glow» sanmayın; seyrek hedef, kaba collider, veya cursor stilini DOM host'ta sınırlı tutma gibi politikalar seçin.

demand Canvas'ta hover sonrası görünür değişim için invalidate gerekebilir (kare yaprağı). Burada: etkileşim → görsel güncelleme zincirini koparmayın.

Hover, ücretsiz makyaj değildir; sürekli isabet testidir.

DOM overlay diplomasi

Ürün UI'sı sıkça Canvas üstünde HTML düğmeler taşır. pointer-events CSS'i host ve overlay arasında paylaşılır: overlay tüm tıklamaları yerse 3D picking ölür; tersi de DOM düğmesini kaçırır. Canvas kök sayfasındaki host kutusu buranın zeminidir; politika cümlesi: hangi dikdörtgen DOM'a, hangi bölgesi Fiber'e?

Html-from-drei tipi köprüler yardımcı olabilir; yine de olay sahipliğini ürün olarak yazın. XR HUD ayrı izlektedir.

Her kare raycast yok

useFrame içinde sürekli kendi Raycaster'ınızı çalıştırmak, R3F'nin olay yolunu bypass eder ve çoğu üründe israftır. İstisna: özel sürükleme / snap line gibi kontrollü seyreltilmiş testler. Holodepth varsayılanı: prop yüzeyini kullanın; elle raycast kaçışını performans yaprağına ve Three omurgasına bilinçli taşıyın.

PointerMove selini state yağmuruna çevirmek setState zehrinin etkileşim kuzenidir. Seçili id değişince güncelleyin; her pikselde değil.

Güvenli isabet: simüle yüzey

Örnekler öğretim amaçlıdır; sürümü doğrulayın. DOM event temeli anlatılmaz. Sabit ürün kimliği kullanın; kullanıcı string'ini callback'te eval etmeyin.

Simüle · seçilebilir parça + missed temizliği.

import { useState } from 'react'

export function SelectablePart({ id, onSelect, selectedId }) {
  const selected = selectedId === id
  const [hovered, setHovered] = useState(false)

  return (
    <mesh
      name={id}
      // Eğitim: yalnızca etkileşim gereken mesh'e prop yazın.
      onClick={(e) => {
        e.stopPropagation()
        onSelect(id)
      }}
      onPointerOver={(e) => {
        e.stopPropagation()
        setHovered(true)
        document.body.style.cursor = 'pointer'
      }}
      onPointerOut={() => {
        setHovered(false)
        document.body.style.cursor = 'auto'
      }}
    >
      <boxGeometry args={[1, 0.4, 0.6]} />
      <meshStandardMaterial
        color={selected ? '#5ec8ff' : hovered ? '#c5d0e0' : '#8b95a5'}
        roughness={0.4}
        metalness={0.2}
      />
    </mesh>
  )
}

/** Canvas kökünde: boşluğa tıklanınca seçimi temizle */
export function clearIfMissed(setSelectedId) {
  return (/* event */) => setSelectedId(null)
}
// Kullanım: <Canvas onPointerMissed={clearIfMissed(setSelectedId)}> …

Simüle · montajda bubbling kapısı. Parça olayı üst «montaj seç» eylemine gitmesin.

export function AssemblyHit({ onAssemblyPick, children }) {
  return (
    <group
      onClick={() => {
        // Parça stopPropagation demezse buraya da gelebilir.
        onAssemblyPick()
      }}
    >
      {children}
    </group>
  )
}

export function PartHit({ onPartPick }) {
  return (
    <mesh
      onClick={(e) => {
        e.stopPropagation() // montaj onClick'ine çıkma
        onPartPick(e.object.name)
      }}
    >
      <sphereGeometry args={[0.25, 24, 24]} />
      <meshStandardMaterial color="#b56cff" />
    </mesh>
  )
}

Güvenlik: isabet sonucuyla yetki vermeyin (yalnızca client-side seçim UI'sı). Sunucu doğrulaması gereken eylemleri «mesh id tıklandı» ile açmayın. cursor stilini global body'de unutursanız sayfa another UI'yi kirletir; unmount / out'ta geri alın.

Picking tuzakları

Occluder hırsızlığı: öndeki şeffaf / görünmez hit.
Bubbling sürprizi: parça + montaj çift eylem.
Hover sel: her move'da setState / materyal clone.
Overlay yutması: CSS pointer-events savaşının kaybı.
useFrame raycast: gereksiz sürekli test.
Missed yok: seçim bir türlü temizlenmez.
cursor sızıntısı: body stili kalır.

Üç etkileşim profili

01 · İsabet
Vitrin seçimi

Prop

onClick + onPointerMissed

Hover

Seyrek · cursor sınırlı

Risk

Süs mesh yanlış hit
02 · İsabet
Montaj ağacı

Politika

Parça stop · montaj ayrı

Collider

Bilinçli gizli hit

Risk

Çift eylem
03 · İsabet
DOM + Canvas karışık

CSS

pointer-events bölgeleri

HUD

DOM; sahne Fiber

Risk

Overlay'nin tüm hit'i yutması

Holodepth perspektifleri

Yüzeyi daraltın

Her mesh'e onClick asmak teşhisi öldürür. Etkileşim istenenlere yazın.

Bubbling politikası yazın

Parça mı montaj mı? stopPropagation bir satırlık ürün kararıdır.

Hover'ı faturalayın

Sürekli isabet + materyal / state maliyeti sessiz jank üretir.

Teşhis maddeleri

İsabet prop'ları doğru mesh'te mi?
Occluder / gizli collider bilinçli mi?
stopPropagation ihtiyacı net mi?
onPointerMissed seçimi temizliyor mu?
DOM overlay pointer-events yazılı mı?
Hover setState yağmuru var mı?
useFrame içi sürekli raycast var mı?
XR / raycast matematik / glTF bu sayfaya sızmış mı?

Holodepth içgörüsü

«Tıklamıyor» çoğu zaman raycast formülü değil; occluder, overlay, bubbling veya yanlış prop düğümüdür. Önce isabet yüzeyi diplomasisini okuyun.

Sonraki kapı: performans & imperatif kaçış

Etkileşim ve yük oturunca kalan soru: ne zaman deklaratif kalmalı, ne zaman ref / instancing / elle draw'a kaçmalı? Sonraki sayfa Performans & imperatif kaçış bu eşiği anlatır. R3F izleğinin son yaprağıdır.

Bu sayfada öğrendikleriniz

İsabet yüzeyi (1).
Prop sözlüğü (2).
Bubbling / stop (3).
Occluder / sıra (4).
Hover maliyeti (5).
DOM overlay (6).
Kare içi raycast yok (7).
Simüle yüzey (8).
Tuzaklar (9).
Üç etkileşim profili (10).
Erişilebilirlik (11).
Holodepth perspektifleri (12).
Sonraki kapı (13).

Komşu sayfalar

React Three Fiber grubunun beşinci yaprağıdır. Asenkron kargo öncekinde; kaçış eşiği bir sonrakindedir. Raycast matematiği Three'de; XR spatial WebXR'da; React DOM olayları React Vitae'dedir.

Vitrin seçimi

Montaj ağacı

DOM + Canvas karışık

Yüzeyi daraltın

Bubbling politikası yazın

Hover'ı faturalayın

Teşhis maddeleri