Three.js Interactionyazan CloudAI-X

Three.js Interaction Skill.

Bir hareketi, canvas'ın ve kameranın gerçek koordinatlarını kullanarak amaçlanan 3D nesneye bağlayın.

3D
Three.js

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Three.js InteractionSKILL.md

Görev 3D Çıktılar • Canvas'a göreli nesne seçimi • Uygun bir kamera kontrolü yapılandırması • Seçim, üzerine gelme, sürükleme veya dönüşüm davranışı Başlamadan Önce Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Three.js Interaction: Nesneleri Seçin ve Değiştirin

Işın tabanlı seçim, koordinat dönüşümü, kamera kontrolleri, seçim ve nesne değiştirme.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

Three.js Interaction ışın izlemeyi (raycasting) ve kontrolleri kapsar. Ekran girdisinin nasıl kamera ışınına dönüştüğünü, kesişimlerin nesneleri veya örnekleri (instance) nasıl belirlediğini ve gömülü bir canvas'ın neden tam pencere varsayımları yerine kendi koordinat dönüşümüne ihtiyaç duyduğunu açıklar.

Kamera gezintisi ile nesne değiştirme ayrı işlerdir. Orbit, fly, map, sürükleme ve dönüşüm kontrollerinin rolleri farklıdır. Editör benzeri bir sahnede bu işleyicilerin koordine edilmesi gerekir; böylece bir modeli sürüklemek kamerayı da döndürmez.

Beklenen Çıktılar

Canvas'a göreli nesne seçimi
Uygun bir kamera kontrolü yapılandırması
Seçim, üzerine gelme, sürükleme veya dönüşüm davranışı

Örnek Brief'i Gör

Brief'ten İncelemeye

01
Hedefleri Tanımlayın
Seçilebilir nesneleri listeleyin ve iç içe mesh'lerin ya da örneklerin ayrı hedefler olup olmadığına karar verin.
02
Girdiyi Eşleyin
İşaretçi konumlarını canvas dikdörtgenine göre normalleştirin ve etkin kamera üzerinden ışın gönderin.
03
Kontrolleri Koordine Edin
Değiştirme sırasındaki gezinti çakışmalarını yönetin ve seçim değiştiğinde geri bildirimi eski haline getirin.

02 Kullanım Alanları

Ne Zaman Kullanılır

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

İyi Bir Uyum

Ürün YapılandırıcılarıBir ürün parçasını seçin ve o nesneyi vurgulayın ya da onun üzerinde işlem yapın.
Sahne EditörleriSeçili geometriyi taşımak, döndürmek ve ölçeklemek için dönüşüm veya sürükleme kontrollerini kullanın.

Kontrol Edilecek Sınırlar

Erişilebilirlik Ayrı Bir KonudurYalnızca işaretçi örnekleri klavye veya yardımcı teknoloji erişimini sağlamaz.
Yaşam Döngüsü İncelenmeliKontrol API'lerini doğrulayın ve gerçek uygulamada olay işleyicilerini temizleyin.

Bu Girdileri Getirin

Sahne HiyerarşisiSeçilebilir mesh'leri ve örnekleri belirleyin.
Canvas YerleşimiGerçek gömülü görünümü ve etkin kamerayı sağlayın.
Girdi DavranışıGezinti, değiştirme, dokunma ve alternatif kontrolleri belirtin.

03 Önemli Kararlar

Önemli Kararlar

Doğru Normalleştirme
Canvas'a göreli koordinatlar, seçimin sayfa düzeni içinde kaymasını önler.
Etkileşim Sahipliği
Çakışan kontrolleri devre dışı bırakmak her harekete tek ve net bir amaç verir.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

İlgili threejs-skills dizinini ajan rehberi olarak kullanın. Three.js çalışma zamanı değildir ve sahne varlıklarını kurmaz.

Upstream Kaynak Dosyası

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-interaction/SKILL.md

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

Tek Bir Çıktıyla Başlayın

Skill'i çalıştırmadan önce bu brief'teki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brief

Bu gömülü ürün görüntüleyiciye seçim eklemek için threejs-interaction kullan. Işın izlemeyi yalnızca listelenen parçalara, canvas'a göreli koordinatlarla uygula. Seçilen parçayı vurgula ve orbit kontrollerinin nesne sürüklemeyle çakışmasını önle. Klavye alternatifini ayrıca tanımla.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Düzen değişikliklerinden sonra da seçim doğru kalır.
Sürükleme kamerayı döndürmez.
Eski vurgular ve dinleyiciler açıkça ele alınır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının sağlandığı anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Kaynaktaki davranış ve gereksinimler değişebilir.

Kaynak Sahibi: CloudAI-X
Depo: CloudAI-X/threejs-skills
Skill Dosyası: skills/threejs-interaction/SKILL.md
Lisans: Doğrulanmadı — yeniden kullanmadan önce kaynak şartlarını inceleyin.
İncelenen Sürüm: 2026-10-07 · b1c623076c66

Editoryal Kaynak Özeti

Işın tabanlı seçim, koordinat dönüşümü, kamera kontrolleri, seçim ve nesne değiştirme.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önceki Sorular

Örnekleri ayırt edebilir mi?

Belgelenen kesişim sonucu, InstancedMesh için instanceId alanını içerir.

Tıklamalar gömülü bir canvas'ı neden ıskalayabilir?

Olası nedenlerden biri, canvas dikdörtgeni yerine pencere boyutlarının kullanılmasıdır.

Yalnızca orbit gezintisini mi kapsar?

Hayır. Birkaç kamera kontrol modelinin yanı sıra nesne sürükleme ve dönüşümleri de ele alır.

OpenDesign

Bir Sonraki Tasarım İterasyonuna Yer Açın.

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz At