3D Görüntüleyicide Hotspot ve Bilgi Noktaları Ekleme

Hotspot Nedir?

Hotspot, 3D model üzerinde belirli bir konuma yerleştirilen etkileşimli işaretçidir. Kullanıcı bu noktaya tıkladığında veya üzerine geldiğinde ek bilgi gösterilir: metin, görsel veya video olabilir.

Örneğin bir dizüstü bilgisayar modelinde USB portlarının yanına, ekran çözünürlüğünün üstüne ve klavye alanına hotspot'lar yerleştirilir. Her biri ilgili teknik detayı açıklar.

model-viewer ile Hotspot Ekleme

model-viewer bileşeni, hotspot'lar için yerleşik destek sunar:

<model-viewer src="laptop.glb" camera-controls>

  <button slot="hotspot-ekran"
    data-position="0 0.12 -0.08"
    data-normal="0 0 1">
    <div class="hotspot-bilgi">
      14 inç IPS Ekran, 2560x1600 çözünürlük
    </div>
  </button>

  <button slot="hotspot-port"
    data-position="-0.15 0.01 0"
    data-normal="-1 0 0">
    <div class="hotspot-bilgi">
      2x USB-C (Thunderbolt 4), 1x USB-A 3.0
    </div>
  </button>

</model-viewer>

Hotspot Konumu Belirleme

Hotspot'un doğru konuma yerleşmesi için 3D koordinat ve normal vektör gerekir:

Yöntem 1: Editörde Ölçme

Blender veya benzeri yazılımda model üzerinde istenen noktanın koordinatlarını okuyun. Not alın ve model-viewer data-position değeri olarak girin.

Yöntem 2: model-viewer Editor

model-viewer'ın resmi web sitesinde interaktif bir editör bulunur. Modelinizi yükleyip fare ile tıklayarak hotspot konumlarını belirleyebilirsiniz. Editör gerekli data-position ve data-normal değerlerini otomatik oluşturur.

Tasarım İpuçları

• Az sayıda hotspot kullanın: Çok fazla nokta kullanıcıyı bunaltır. 3-5 hotspot idealdir.
• Kısa ve öz bilgi yazın: Her hotspot'ta bir veya iki cümle yeterli. Detaylı teknik özellikler sayfanın başka bir bölümünde olabilir.
• Görsel tutarlılık sağlayın: Hotspot simgeleri ve bilgi kutucukları site tasarımıyla uyumlu olmalı.
• Mobil dostu boyutlandırın: Hotspot'lar parmakla tıklanabilecek büyüklükte olmalı.
• Animasyon ekleyin: Hafif bir pulse veya parıltı animasyonu hotspot'ların fark edilmesini kolaylaştırır.

CSS Stillendirme

.hotspot-bilgi {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  max-width: 200px;
  display: none;
}
button[slot^="hotspot"]:focus .hotspot-bilgi,
button[slot^="hotspot"]:hover .hotspot-bilgi {
  display: block;
}

Sonuç

Hotspot'lar, 3D ürün görüntüleyicisini pasif bir görselleştirme aracından aktif bir bilgi kaynağına dönüştürür. Özellikle teknik ürünlerde ürün açıklamalarını doğrudan 3D model üzerinde sunmak etkili bir yöntemdir.