3D CAD modeli web sitenize nasıl eklenir? 4 yöntemin karşılaştırması
3D CAD modelini web sitenize eklemek için montajı STEP dosyası olarak dışa aktarın, glTF ya da GLB formatında hafif bir görüntüleme modeline dönüştürün ve bu modeli ürün sayfanızdaki bir web görüntüleyicide gösterin. CAD dosyanızın kendisini hiçbir zaman yayımlamanız gerekmez: Tarayıcı yalnızca görüntüleme modelini indirir. Tutamen'in 42 parçalı ICM-21 soğutma sıvısı manifoldunda bu, STEP dosyasından üretilmiş 2,0 MB'lık bir indirmedir.
STEP, yaygın CAD sistemlerinin hepsinin dışa aktarabildiği tarafsız 3D dosya formatıdır (ISO 10303). glTF, Khronos Group'un web'de 3D için geliştirdiği açık formattır; GLB ise tek dosyada toplanmış glTF formatıdır. Birinden diğerine giden dört yol, esas olarak alıcınızın neler yapabildiği, neyi teslim ettiğiniz ve sistemi kimin çalışır durumda tuttuğu bakımından ayrılır.
Bir web sitesi STEP dosyasını neden doğrudan gösteremez?
STEP dosyası bir ürünü kesin matematiksel yüzeylerle tanımlar; tarayıcı ise yalnızca düz üçgenler çizebilir. Önce her yüzün küçük üçgenlerle kaplanması gerekir (“mesh” denince kastedilen çokgenler); bu adıma tessellation (üçgenleme) denir. Üçgen sayısı arttıkça eğriler yumuşar, dosya da büyür; bu yüzden iyi bir dönüştürücü, eğrilerin tam ekranda yumuşak göründüğü noktada durur.
Dönüştürme, sayfanın neler yapabileceğini de belirler. İyi bir görüntüleme modeli her parçayı ayrı, adlandırılmış ve malzemesi atanmış halde tutar; böylece montaj parçalarına ayrılabilir ve her parçaya tıklanabilir. Tekrarlanan parçaları bir kez saklar: ICM-21 dosyasında 214.168 üçgen bulunur, ekranda ise 654.948 üçgen çizilir. Özellik ağacı, eskiz ya da parametre taşımaz; bu yüzden kütle ve hacim gibi değerler önce kesin CAD modelinden ölçülür ve iyi bir sayfa, ikisi farklı olduğunda teknik veri sayfasının esas alındığını belirtir.
Zincirin Proofscene'in dört canlı modeli için ürettiği sonuçlar, sayfalarının yüklediği dosyalardan ölçülmüştür:
| Model | Parçalar | Çizilen üçgen | GLB dosyası | İndirme boyutu |
|---|---|---|---|---|
| Tutamen ICM-21, sıvı soğutma manifoldu | 21 çeşit, 42 adet | 654.948 | 3,6 MB | 2,0 MB |
| STRAVIK SX 50-160*, uçtan emişli santrifüj pompa | 59 çeşit, 115 adet | 404.202 | 6,9 MB | 3,7 MB |
| HALVORN BV25*, iki parçalı tam geçişli küresel vana | 14 | 271.900 | 5,3 MB | 2,4 MB |
| ARTIXO RA90*, harmonik dişlili robot eklem aktüatörü | 32 çeşit, 131 adet | 455.821 | 7,2 MB | 3,5 MB |
İndirme boyutu, ziyaretçinin beklediği kısımdır; çevresindeki sayfa ve görüntüleyici yaklaşık yarım megabayt ekler. *STRAVIK, HALVORN ve ARTIXO, Proofscene'in başka sektörleri göstermek için kendi bünyesinde modellediği hayali markalardır; ICM-21 ise Tutamen'in STEP dosyasından oluşturulmuş gerçek ürünüdür.
CAD modelini web sitenize eklemenin dört yolu nedir?
Dört yol şunlardır: ücretsiz bir online görüntüleyicinin yerleştirme kodu, barındırılan bir 3D platform ya da konfigüratör, Google'ın model-viewer'ı gibi açık bir web bileşeni üzerinde kendiniz kurduğunuz bir sayfa ve CAD dosyanızdan sizin için hazırlanan etkileşimli bir ürün sayfası. Endüstriyel bir ürün için karar verirken belirleyici olan sorulara göre bu yolların karşılaştırması şöyledir:
| Ücretsiz görüntüleyici (yerleştirme kodu) | Barındırılan 3D platform | model-viewer ile kendi geliştirmeniz | Sizin için hazırlanan ürün sayfası |
|---|---|---|---|
| Alıcının yapabilecekleri | |||
| Döndürme ve yakınlaştırma; bazı görüntüleyiciler ölçüm ya da kesit aracı ekler | Döndürme, yakınlaştırma, etiketler, telefonda çoğu zaman AR; konfigüratör renk ve seçenek belirlemeyi ekler | Döndürme, yakınlaştırma, etiketler, AR, dosyaya kaydedilmiş animasyonlar; fazlası sizin yazacağınız kod | Parçalarına ayırma, kesip açma, röntgenle bakma, akışı çalıştırma, verisi için her parçaya tıklama, ölçüm |
| Elinizden çıkan | |||
| Çoğu zaman STEP dosyasının kendisi, başkasının sunucularında | Bir görüntüleme modeli ya da platformun sizin için dönüştürdüğü CAD dosyası, platformun sunucularında | Yalnızca hazırladığınız görüntüleme modeli, kendi sunucunuzda | Tarayıcıya bir görüntüleme modeli; STEP dosyası yalnızca hazırlayan ekibe, isterseniz gizlilik sözleşmesi (NDA) kapsamında |
| Tarayıcının yüklediği | |||
| Görüntüleyicinin kendi uygulaması ve modeliniz, kendi sitesinden çerçeve içinde | Platformun oynatıcısı ve modeliniz | model-viewer betiği ve GLB dosyanız | Sayfa, görüntüleyicisi ve sıkıştırılmış bir model: dört canlı model için 2,0-3,7 MB |
| Sizin emeğiniz | |||
| Düşük: yükleyin, yerleştirme kodunu yapıştırın | Düşük-orta: yükleyin, görünümleri ve etiketleri ayarlayın | Yüksek: dönüştürün, sadeleştirin, ışıklandırın, kodlayın ve telefonlarda test edin | Düşük: CAD dosyasını ve teknik veri sayfasını gönderin, özel bir bağlantıyı inceleyin |
| Ürün değiştiğinde | |||
| Yeni dosyayı yükleyin | Yeni modeli yükleyin; yerleştirme kodu abonelik sürdükçe çalışır | Kendiniz yeniden dönüştürün, sadeleştirin ve test edin | Yeni CAD verisinden yeniden oluşturulur |
Ürününüze hangi yol uyar?
Ücretsiz bir görüntüleyici, tek bir müşteri için tek bir parçaya hızlıca göz atmaya uygundur. En hızlı yoldur ve en çok şeyi teslim ettiğiniz yoldur; çünkü ücretsiz bir CAD görüntüleyici doğrudan STEP dosyanızla çalışır.
Barındırılan bir platform, görünüşü ve seçenekleriyle satılan, alıcının bir renk ya da ölçü seçtiği ürünlere uygundur. Bu alıcı seçimini bir konfigüratörde yapar.
model-viewer ile kendiniz geliştirmek, zamanı olan bir web ekibine ve yalnızca döndürülmesi gereken basit parçalara uygundur. Google'ın three.js kütüphanesi üzerine kurulu ücretsiz web bileşeni model-viewer, döndürme, etiketler ve AR konusunda iyi çalışır. Bedeli, her ürünü dönüştürmek, sadeleştirmek, ışıklandırmak ve test etmek, her değişiklikte de bunu tekrarlamaktır; kesit, röntgen modu ya da tıklanabilir bir parça listesi içinse kodu sizin yazmanız gerekir.
Sizin için hazırlanan etkileşimli bir ürün sayfası, değeri gövdenin içinde olan mühendislik ürünlerine (pompalar, vanalar, manifoldlar, robot eklemleri) ve her rakamı kontrol eden alıcılara uygundur. Proofscene bunu kendi sitenize tek bir iframe etiketiyle ya da markaniz.proofscene.com adresinde barındırılan bir sayfa olarak kurar; Tutamen'in ICM-21 modeli, STEP dosyasının geldiği gün yayına girdi.

Ürününüz bu son gruba giriyorsa STEP dosyasını ve teknik veri sayfasını gönderin ve ürününüzü 3D'ye taşıyın. Size özel hazırlanan ürün sayfaları Proofscene Business ve Enterprise planlarına dahildir; ekibimiz, çalışmaya başlamadan önce neyi hazırlayacağını ve ne zaman yayında olacağını size söyler.
Alıcılar modelle neler yapabilmeli?
Mühendislik ürünlerinin alıcıları içini görmek ve rakamları kontrol etmek ister; bu yüzden model yalnızca döndürmeye değil, ürünü parçalarına ayırmaya, kesip açmaya, içini görmeye ve her parçanın verisini okumaya da izin vermelidir. Bunların her biri, şimdi açabileceğiniz canlı bir modelde çalışır:
- Patlatılmış görünüm. HALVORN BV25 küresel vana, montaj sırasına göre 14 parçaya ayrılır.
- Kesit ve akış. STRAVIK SX 50-160 pompayı ikiye bölün ve 15-40 m³/h arasında istediğiniz debide çalıştırın.
- Röntgen. ARTIXO RA90 robot ekleminin gövdesinin içinden motoru, 50:1 harmonik dişliyi ve çıkış rulmanını görün.
- Parça verileri ve ölçüm. Adını, malzemesini ve adedini görmek için Tutamen ICM-21 modelinin herhangi bir parçasına tıklayın, gerçek kenarlar arasında ölçüm yapın ve soğutma sıvısını teknik veri sayfasındaki dağılımla akıtın.
- Paylaşım. Her görünüm için bir bağlantı ve QR kod; kendi başına keşfetmeyecek ziyaretçiler için de kısa bir rehberli tur.
Lansman filmleri aynı modelden oluşturulabilir: 3D ürün animasyonu sayfasına ya da etkileşimli bir 3D ürün sayfasının tarayıcıda parçalarına ayrıldığı 35 saniyelik filme göz atın.
3D modelin telefonlarda hızlı çalışması nasıl sağlanır?
Modeli birkaç megabaytta tutun, ziyaretçi ona ulaştığında yükleyin ve sayfanın model olmadan da kolayca okunabildiğinden emin olun. İlk yüklenen bir model, alıcıların görmeye geldiği metni ve görselleri bekletir.
- Dosyayı sıkıştırın. glTF sayıları daha az baytta saklayabilir ve geometriyi Draco ya da meshopt uzantılarıyla sıkıştırabilir; sunucu da dosyayı sıkıştırılmış olarak göndermelidir. Proofscene'in modelleri yüzey yönlerini 16 bitlik sayılarla saklar ve gzip ile sıkıştırılmış olarak iletilir: ICM-21 modelinin 3,6 MB'lık GLB dosyası 2,0 MB olarak ulaşır.
- Üçgenleri alıcıların baktığı yere harcayın. Diş detayları, küçük radyuslar ve kimsenin açmadığı parçaların içi telefona zaman kaybettirir ve hiçbir şey katmaz.
- Önce sabit bir görsel gösterin. 3D modeli, sayfa kaydırılırken ekranda görünür hale geldiğinde ya da kullanıcı dokunduğunda yükleyin; model-viewer bunu bir poster görseli ve gecikmeli yüklemeyle yapar.
- Kaydırmayı engellemeyin. Proofscene'in yerleştirilen görüntüleyicileri sayfayla birlikte kayar ve yalnızca Ctrl tuşuyla ya da iki parmak hareketiyle yakınlaştırılır; telefonlarda kontrol alanları açılır panellere dönüşür, böylece ürün görünür kalır.
- Bilgileri metinde tutun. Arama motorları ve yapay zeka asistanları modeli değil sayfayı okur; bu yüzden açıklamayı, parça adlarını ve teknik özellikleri HTML koduna yazın. Proofscene'in herkese açık demo sayfaları 3D model için yapılandırılmış veri ekler; 3D çalıştıramayan bir tarayıcı da bu metni alır.
Model herkese açık bir sayfadayken CAD dosyanız güvende mi?
Evet, çünkü görüntüleme modeli sizin CAD dosyanız değildir: Ekran hassasiyetinde üçgenler içerir; özellik ağacı, eskiz, parametre ya da kesin yüzey içermez, dışarıda bıraktığınız iç ayrıntıların hiçbiri de onda yoktur. Yayımlamadan önce önemli olanı koruyun:
- Ticari açıdan hassas her şeyi, örneğin bir iç kanalı ya da conta profilini, sadeleştirin veya çıkarın.
- STEP dosyasını, ziyaretçilerinin orijinal dosyayı indirebildiği bir görüntüleyiciye asla yüklemeyin.
- Yayına almadan önce şifre korumalı bir bağlantı üzerinde inceleyin ve CAD dosyanızla çalışan kişiyle gizlilik sözleşmesi (NDA) imzalayın. Proofscene bu şekilde çalışır; CAD dosyalarınızın ve içeriğinizin sahibi siz olmaya devam edersiniz.
İlgili yazılar
Tutamen ICM-21 modelinin STEP dosyasından canlı bir ürün sayfasına nasıl ulaştığını okuyun, dört modelin hepsini etkileşimli 3D ürün demosu sayfasında deneyin ya da 3D ürün görüntüleyicinin web sitenize eklendiği 36 saniyelik filmi izleyin.
CAD modelini web sitenize eklemek: sık sorulan sorular
Bir CAD modeli ürün sayfasına eklenmeden önce pazarlama ve ürün ekiplerinin sorduklarına kısa yanıtlar.
Ürününüzü 3D'ye taşıSTEP dosyasını doğrudan web siteme yükleyebilir miyim?
Ziyaretçilerin 3D olarak görmesi için hayır. Tarayıcılar üçgen çizer; bu yüzden STEP dosyasının önce bir görüntüleme modeline, genellikle bir GLB dosyasına dönüşmesi gerekir. STEP dosyasını indirilebilir olarak sunmak, her ziyaretçiye CAD dosyanızın tamamını vermek demektir.
Web sitesindeki bir 3D model hangi dosya formatında olmalı?
GLB, glTF formatının tek dosyalık biçimidir: three.js, Google'ın model-viewer'ı ve çoğu web görüntüleyici bu formatla çalışır, Draco ya da meshopt ile de sıkıştırılabilir. iPhone'da AR için ayrıca bir USDZ kopyası gerekir; model-viewer bunu AR düğmesine basıldığında oluşturabilir.
Web sitesi için 3D model ne kadar büyük olmalı?
Telefonlarda çalışması gereken bir ürün sayfası için birkaç megabayt makul bir üst sınırdır. Proofscene'in dört canlı modelinin her biri 2,0-3,7 MB arasında indirilir; buna sayfa ve görüntüleyicisi için yaklaşık yarım megabayt eklenir.
3D model ürün sayfamı yavaşlatır mı?
Sayfa önce sabit bir görsel gösterir, modeli kaydırma ya da dokunma anında yükler ve teknik özellikleri metninde tutarsa yavaşlatmaz.
Bu yöntem WordPress, Webflow veya Shopify'da çalışır mı?
Evet. Her yol bir iframe ya da script etiketiyle sonuçlanır; özel HTML kabul eden her site oluşturucu bunu barındırabilir. Proofscene ayrıca sayfanın tamamını WordPress, Webflow, Shopify, HubSpot, React ya da düz HTML ile hazırlayabilir.