holodepth

Framework entegrasyonları · Vue + Three

Reaktif Şablon → Object3D: Proxy Köprüsü ve Sahne Senkronu

Vue şablonu ile Three Object3D ağacı aynı reaktif katman değildir. Bu sayfa ref, reactive, computed ve prop akışının mesh alanlarına nasıl yazıldığını anlatır: Proxy sınırı · senkron disiplini · liste kimliği.

Holodepth bu yaprağı Vue reaktivite 101 dersi, R3F JSX katalog turu veya Angular @ViewChild / directive haritasının kopyası olarak yazmaz. R3F deklaratif graf Deklaratif sahne grafı yaprağındadır (args / attach). Angular şablon eşlemesi Şablon → Object3D haritası yaprağındadır (@Input / @for track). Mount kökü Mount & kök sözleşmesi yaprağındadır. Kare döngüsü ve watchEffect derinliği sonraki Vue yaprağındadır. glTF node şeması format izleklerindedir.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «Three nesneleri markRaw ile Proxy dışında tutulur. ref/reactive sahne alanına bilinçli yazılır. watch hedefli, watchEffect otomatik izler. v-for :key remount üretir; kalabalıkta instance kaçışı düşünülür. TresJS deklaratif ile composable imperatif aynı diplomasisi paylaşır. Sonraki kapı kare döngüsü & watchEffect'tir.»

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

Bu sayfa Vue 3 + Three'de reaktif şablon → Object3D haritasını anlatır:

  • markRaw / shallowRef · Proxy sınırı
  • ref / reactive / computed → mesh prop yazımı
  • watch vs watchEffect · prop senkron
  • v-for :key · remount vs instance eşiği
  • TresJS tarzı deklaratif vs composable imperatif

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

Kısa ayrım: Bu sayfa «reaktif state sahneye nasıl map olur?» · R3F deklaratif «JSX kataloğa nasıl map olur?» · Angular «@Input ve şablon döngüsü nasıl map olur?» · Mount «kapı nerede?» · Kare döngüsü «map sonrası kim her kare iter?».

markRaw ve shallowRef: Proxy sınırı

Vue 3, JavaScript nesnelerini Proxy ile sarmalayarak reaktivite kurar. Three.js Scene, Mesh, Material gibi sınıflar iç içe referans taşır ve kendi mutasyon döngülerine sahiptir. Bu nesneleri doğrudan reactive() içine koymak, Vue'nun her alt alanı izlemesine ve gereksiz effect tetiklenmesine yol açar. Holodepth kuralı: sahne grafındaki Three örneklerini reaktif sarmalayıcıya sokmayın; köprü state'i Vue tarafında, GPU nesnesi ham kalır.

markRaw(object) nesneyi reaktif dönüşümden muaf tutar. shallowRef(scene) yalnızca .value atamasını izler; mesh içindeki position.x değişimleri Vue'yu uyarmaz. Bu bilinçli ayrım performans yaprağının ön koşuludur; burada yalnızca «Proxy sahne grafını sarmalamamalı» mührünü vururuz.

Reaktivite UI state içindir; Object3D mutasyonu bilinçli yazılır.

Angular'da benzer risk NgZone ile farklı bir yüzde görünür. R3F reconciler Three referanslarını kendi store'unda tutar. Vue + Three'de sınırı siz çizersiniz: ham Three, reaktif Vue.

ref, reactive, computed → mesh alanı

Şablondaki :position, :color veya composable'dan dönen prop'lar DOM attribute'u değildir; ürünün Object3D alanına köprüdür. Holodepth: primitive state için ref, ilişkili küme için reactive, türetilmiş renk / görünürlük / seçim durumu için computed kullanın; sonra bu değerleri mesh'e set veya alan ataması ile yazın.

Reaktif kaynak · Object3D yazım yüzü
Vue kaynağı Tipik sahne alanı Yazım disiplini
ref([x,y,z]) mesh.position.set Dizi referansını her tick yenilemeyin
reactive({ hue }) material.color.setHSL Material ham; renk state reaktif
computed(() => sel) visible / emissive Türetilmiş; doğrudan mesh'e kopyala
shallowRef(group) Parent Object3D Yalnızca referans değişimini izle

R3F'de aynı ayrım JSX prop ve args kapılarıyla ifade edilir. Angular'da @Input + ngOnChanges. Vue'da soru: «state değişince hangi watcher mesh'e yazar?» Her render'da yeni THREE.Vector3 allocate etmek GC üretir; mevcut vektöre copy veya set edin.

watch ve watchEffect: prop senkron

Vue'da reaktif state ile Three alanı arasındaki köprü çoğu zaman watch veya watchEffect ile kurulur. Holodepth ayrımı nettir: belirli prop'ları hedefliyorsanız watch(() => props.offset, …); kurulum + otomatik izleme gerekiyorsa watchEffect. Kare başına çalışması gereken animasyon bu sayfada değil; sonraki Kare döngüsü & watchEffect yaprağında derinleşir.

İzleyici seçimi · Vue + Three
Araç Ne zaman? Three tuzak
watch Belirli ref/prop değişince bir kez yaz deep: true ile mesh alt alanı izlemek
watchEffect Kurulum + bağımlılık otomatik Her effect'te yeni Mesh yaratmak
watchPostEffect DOM / layout sonrası (nadir) Canvas boyutu senkronu mount yaprağında
rAF döngüsü Sürekli interpolasyon watchEffect ile her kare (yanlış kapı)

Angular ngOnChanges ve R3F reconciler diff'i farklı mekanizmadır; Vue'da «kim yazar?» sorusunu watcher ile cevaplayın. flush: 'post' DOM güncellemesi sonrası senkron gerektiren nadir durumlarda işe yarar; mesh konumu için çoğu zaman doğrudan watch yeterlidir.

computed: türetilmiş sahne durumu

Seçili parça kimliği, filtrelenmiş liste veya birleşik renk gibi türetilmiş değerler computed ile UI ve sahne arasında ortak dil olur. Holodepth: computed çıktısını doğrudan Three nesnesine bağlamayın; computed Vue tarafında kalır, watcher çıktıyı mesh alanına kopyalar. Aksi hâlde Proxy izleri Three iç referanslarına sızabilir.

Örnek akış: selectedId ref → isHighlighted = computed(() => id === selectedId.value) → watch(isHighlighted, …) → material.emissiveIntensity. Bu zincir okunabilir teşhis sağlar; «renk neden değişmedi?» sorusunda önce computed, sonra watcher, en son ham material'a inersiniz.

Üç harita profili: TresJS ve composable

Holodepth Vue + Three'de üç pratik profil görür. Hepsi aynı Proxy sınırını ve parent disiplinini paylaşır; yalnızca yazım yüzü değişir.

  • 01 · Harita

    Composable merkezli

    Şablon
    Yalnız canvas host
    Sahne
    useScene() içinde kurulum
    Risk
    God-composable şişmesi
  • 02 · Harita

    Parça bileşenleri

    Şablon
    v-for + PartMesh
    Parent
    provide/inject veya prop group
    Risk
    :key remount · dispose
  • 03 · Harita

    TresJS tarzı katalog

    Şablon
    <TresMesh> benzeri yapı taşları
    Disiplin
    Altta yine markRaw + parent
    Risk
    Sihirli etiket = gerçek parent sanmak

TresJS ve benzerleri R3F'ye yakın deklaratif yüz sunar; fakat Vue reaktivitesi yine devrededir. Katalog etiketi ezber demeti değildir: altında Object3D üretilir ve Proxy sınırı korunmalıdır. Imperatif composable kaçış kapısıdır; deklaratif okunabilirlik içindir. İkisini aynı projede karıştırırken parent ve dispose sözleşmesini tekilleştirin.

v-for :key, remount ve instance eşiği

v-for="part in parts" :key="part.id" Vue bileşen kimliğidir. :key değişince bileşen yeniden mount olur; altındaki Mesh de çoğu kalıpta yeniden yaratılır. Holodepth: key'i ürün kimliğine bağlayın; index key kalabalıkta remount fırtınası üretir. Angular @for track ile aynı mantık, farklı sözdizimi.

Yüzlerce benzer parça için şablon döngüsü yerine InstancedMesh kaçışı düşünülür. Bu sayfa eşik sinyalini koyar; instancing matematiği Three omurgasındadır. «Önce keyed bileşen dene, ölçek şikâyet edince instance'a in» Holodepth pragmatizmidir.

:key bir view kimliğidir; GPU'da ücretsiz swap değildir.

İç içe bileşenler: slot ve group parent

<Assembly><PartMesh /></Assembly> Vue view hiyerarşisini kurar; Object3D parent'ını otomatik vermez. Holodepth: montaj bileşeni markRaw(new THREE.Group()) yaratır, provide('parentObject', group) ile çocuklara verir veya explicit :parent="group" prop'u kullanır. Angular'daki ng-content projection ile benzer yanılgı: DOM iç içe ≠ sahne parent.

R3F JSX iç içe yazım parent zincirini reconciler kurar. Vue + Three'de bağ açık veya ince kütüphane sarmalayıcısıdır. «Çalıştı» ile «hangi Object3D altında?» sorusunu ayırın.

v-if, v-show ve visible: üç kapı

mesh.visible = false çizimi kesebilir ama nesneyi grafta tutar. v-if="showPart" bileşeni yok eder; onBeforeUnmount dispose borusunu tetikler. v-show DOM/CSS dünyasındadır; canvas host dışında Three parçalarına doğrudan uygulanmaz. Holodepth ürün cümlesi: geçici gizleme mi, ömür sonu mu? Üç kapıyı karıştırmak picking ve bellek sürprizi üretir.

Reaktif visible ref'i watcher ile mesh bayrağına yazmak geçici gizleme profilidir. v-if keyed remount profilidir. Aynı parçada ikisini alternatif sanmayın.

Reaktif itiş: kur bir kez, diff ile güncelle

State değişince Object3D'yi güncellemek doğrudur; her watcher turunda tüm sahneyi yeniden kurmak değildir. Holodepth: kurulum onMounted veya ilk watchEffect'te bir kez; güncelleme hedefli watcher ile. Sürekli new THREE.Mesh üretmek Vue Three'nin klasik mezarlığıdır. Angular'daki «her CD rebuild» tuzağının Vue karşılığı «her effect yeni Mesh»dir.

Template reactive binding'i sahne alanına otomatik yansımaz; bilinçli senkron katmanı şarttır. Bu katmanın kare döngüsü ile nasıl paylaşılacağı sonraki yaprağın konusudur.

Güvenli harita: simüle Vue 3 bağ

Örnekler öğretim amaçlıdır. Vite / SFC derleme ayrıntıları öğretilmez. Host'ta scene provide edildiği varsayılır.

Simüle · PartMesh: markRaw mesh, watch ile prop senkron. 

import { markRaw, onBeforeUnmount, watch, computed } from 'vue'
import * as THREE from 'three'

/** props: parent (Object3D), offset [x,y,z], selectedId, partId */
export function usePartMesh(props) {
  const parent = props.parent // shallowRef / markRaw group · host sağlar
  const mat = markRaw(new THREE.MeshStandardMaterial({
    color: '#9aa6b8', metalness: 0.2, roughness: 0.45,
  }))
  const mesh = markRaw(new THREE.Mesh(
    new THREE.BoxGeometry(1, 0.35, 0.6),
    mat,
  ))
  mesh.name = 'part-mesh'

  const isSelected = computed(() => props.partId === props.selectedId)

  parent.add(mesh)

  watch(
    () => props.offset,
    ([x, y, z]) => { mesh.position.set(x, y, z) },
    { immediate: true },
  )

  watch(isSelected, (on) => {
    mat.color.set(on ? '#5ec8ff' : '#9aa6b8')
  }, { immediate: true })

  onBeforeUnmount(() => {
    parent.remove(mesh)
    mesh.geometry.dispose()
    mat.dispose()
  })

  return { mesh } // dışarıya ham referans · reaktif sarmalama yok
}

Simüle · Assembly: v-for :key ve group parent. 

import { markRaw, onMounted, onBeforeUnmount, provide, shallowRef } from 'vue'
import * as THREE from 'three'

/**
 * Template örneği (SFC):
 *   <PartMesh
 *     v-for="p in parts"
 *     :key="p.id"
 *     :parent="group"
 *     :part-id="p.id"
 *     :offset="p.offset"
 *     :selected-id="selectedId"
 *   />
 * :key = ürün kimliği · index key kullanmayın.
 */
export function useAssembly(scene) {
  const group = shallowRef(markRaw(new THREE.Group()))
  group.value.name = 'assembly'

  provide('assemblyGroup', group)

  onMounted(() => {
    scene.add(group.value)
  })

  onBeforeUnmount(() => {
    scene.remove(group.value)
    // PartMesh composable'ları kendi onBeforeUnmount ile dispose eder.
  })

  return { group }
}

Güvenlik: kullanıcı girdisini mesh.name veya dinamik eval yoluna bağlamayın. Offset dizilerini doğrulamadan GPU'ya yazmayın. parts listesini kimliği belirsiz stringlerden türetmeyin.

Harita tuzakları

  1. reactive(scene): Proxy Three içine sızar, performans çöker.
  2. Her watchEffect'te new Mesh: remount mezarlığı.
  3. :key = index: liste sırasında yanlış remount.
  4. visible ile v-if karışımı: tutarsız ömür politikası.
  5. Slot hiyerarşisi = parent: group provide unutulur.
  6. deep watch mesh.position: gereksiz effect fırtınası.
  7. R3F attach ezberi: Vue'da aynı API yok.
  8. Angular @ViewChild beklentisi: template ref farklı sözleşme.

Holodepth perspektifleri ve sonraki kapı

Ham Three, reaktif Vue

markRaw ve shallowRef sınırını ekip disiplini olarak mühürleyin; «bir kez çalıştı» ile yetinmeyin.

Watcher hedefli, effect ölçülü

Prop senkronu için watch; otomatik kurulum için watchEffect; animasyon için rAF. Kapıları karıştırmayın.

Teşhis maddeleri

  1. Scene/Mesh reactive() içinde mi?
  2. State değişimi set mi, yeni nesne mi?
  3. v-for :key ürün kimliği mi?
  4. Parent group provide/prop ile veriliyor mu?
  5. visible vs v-if politikası net mi?
  6. TresJS etiketi parent sanılıyor mu?
  7. R3F args/attach veya Angular @Input bu sayfaya sızmış mı?

Holodepth içgörüsü

«Ref değiştirdim ama mesh oynamadı» çoğu zaman Proxy sınırı veya watcher eksikliğidir. Önce markRaw, sonra watch, en son parent zincirini sorun.

Harita durağanı anlatır; canlı ürün kare döngüsü ister. Sonraki sayfa Kare döngüsü & watchEffect rAF ile reaktif kaçışın sınırını çizer. Yükleme, picking ve performans sonraki yapraklardadır.