Öğretici: Babylon.js kullanarak ilk WebXR uygulamanızı oluşturma

  • Makale

Bu öğreticide, Babylon.js ve Visual Studio Code kullanarak temel bir Karma Gerçeklik uygulamasının nasıl oluşturulacağı gösterilir. Oluşturacağınız uygulama bir küp oluşturur, diğer yüzleri görünüme getirmek için küpü döndürmenize ve etkileşimler eklemenize olanak sağlar. Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:

  • Geliştirme ortamı ayarlama
  • Temel 3B öğeleri oluşturmak için Babylon.js API'si
  • Yeni web sayfası oluşturma
  • 3B öğelerle etkileşim kurma
  • Uygulamayı bir Windows Mixed Reality Simülatöründe çalıştırma

Önkoşullar

Başlarken

Bu projeyi sıfırdan oluşturmak için bir Visual Studio Code (VSCode) projesiyle başlayın.

Not

VSCode kullanmak zorunlu değildir, ancak öğretici boyunca kolaylık sağlamak için bu kodu kullanacağız. Daha deneyimli JavaScript geliştiricileri, en basit Not Defteri'ni bile tercih ettikleri diğer düzenleyicileri kullanabilir.

  1. Babylon.js tek dosyayı indirin veya resmi Babylon.js web sitesinde bulunabilecek çevrimiçi bir sürümü kullanın. Babylon.js projesinin tamamını GitHub'dan da kopyalayabilirsiniz

  2. Boş bir dosya oluşturun ve html sayfası olarak kaydedin, örneğin index.html

  3. Temel bir html işaretlemesi oluşturun ve Babylon.js javascript dosyasına başvurun. Son kod aşağıda gösterildiği gibi:

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
    </head>
<body>
</body>
</html>

  4. Babylon.js içeriğini işlemek için gövde içine bir tuval HTML öğesi ekleyin. Tuvalin, daha sonra JavaScript'ten bu HTML öğesine erişmenizi sağlayan bir id özniteliğine sahip olduğunu unutmayın.

    <html>
    <head>
        <title>Babylon.js sample code</title>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

  5. Tuval, web sayfasının tamamını kaplar. Bu, web sayfamızı tamamlar. Bu noktada web sayfası hazırdır. Henüz çevreleyici bir deneyim olmasa da, herhangi bir tarayıcıda açabilir ve hata gösterilmediğinden emin olabilirsiniz.

Sonraki adımlar

Sonraki Öğretici: 2. Sahne hazırlama