Öğretici: Babylon.js kullanarak WebXR 'de piyano derleme

Gerçek dünyada bir piyano oluşturulması, zaman, beceri ve malzemelerde çok daha fazlasını gerektirir. VR/AR dünyası için bir tane oluşturma hakkında ne olacak?

Bu öğretici serisinde, sanal dünyada 88 anahtar kullanan bir Iano çalıştıran bir karma Gerçeklik Web uygulaması oluşturmak için Babylon.js kullanmayı öğreneceksiniz. Tamamlanmış uygulamada, piyano 'e teleport ile bağlantı kurabiliyor ve karma gerçeklik denetleyicilerinizi kullanarak anahtarları oynatacak.

Bu öğretici serisinde, aşağıdakileri nasıl yapacağınızı öğreneceksiniz:

  • Bir piyano klavyesi oluşturmak için kafesler oluşturun, konumlandırın ve birleştirin
  • Bir Babylon.js modelini bir, bir standsu piyano çerçevesinin içeri aktarma
  • Her bir piyano anahtarına işaretçi etkileşimleri ekleme
  • WebXR 'de teleporsyon ve çoklu işaretçi desteğini etkinleştir

Önkoşullar

Başlarken

Babylon.js sahneyi içerecek HTML Web sayfasını ayarlayarak başlayalım.

  1. Babylonjs-Piano-öğreticisi adlı bir klasör oluşturun ve Visual Studio Code klasörü açın.

    Not

    bir kod düzenleyicisini de izlemek için kullanabilirsiniz, ancak bu öğreticide kolaylık sağlaması için Visual Studio Code kullanacağız.

  2. Klasörü içinde, index.html adlı bir dosya oluşturun ve aşağıdaki şablonu dosyaya ekleyin:

    <html>
        <head>
            <title>Piano in BabylonJS</title>
            <script src="https://cdn.babylonjs.com/babylon.js"></script>
            <style>
                body,#renderCanvas { width: 100%; height: 100%;}
            </style>
        </head>
        <body>
            <canvas id="renderCanvas"></canvas>
            <script type="text/javascript">
                const canvas = document.getElementById("renderCanvas"); 
                const engine = new BABYLON.Engine(canvas, true); 
    
                createScene(engine).then(sceneToRender => {
                    engine.runRenderLoop(() => sceneToRender.render());
                });
    
                // Watch for browser/canvas resize events
                window.addEventListener("resize", function () {
                    engine.resize();
                });
            </script>
        </body>
    </html>
    

    Bu şablonun içeriği hakkında daha fazla açıklama gerekiyorsa, Bu öğreticinin bir önkoşulu olan Merhaba Dünya öğreticisinebakın.

  3. Bu dosyayı bir tarayıcıda açmaya çalışırsanız, konsol işlevin bulunamadığını belirten bir hata gösterir createScene() . Sonraki bölümde işlevini uygulayarak bu hatayı çözelim createScene() .

Sahneyi kurun

  1. index.htmlaynı klasörde scene.jsadlı başka bir dosya oluşturun. Sahneyi ayarlama ve bu dosyada piyano oluşturma ile ilgili JavaScript kodunun tümünü depolayacağız.

  2. createScene()İşlevi createScene()ekleyelim:

    const createScene = async function(engine) {
        const scene = new BABYLON.Scene(engine);
        return scene;
    }
    

    createScene()Zaman uyumsuz bir işlev yapıyoruz. Nedenini öğrenmek için sürekli olarak kalın.

  3. Daha sonra, sahneyi bize görünür hale getirmek için bir ışık ve kamera gerekir. İşlevi güncelleştirin createScene() :

    const createScene = async function(engine) {
        const scene = new BABYLON.Scene(engine);
    
        const alpha =  3*Math.PI/2;
        const beta = Math.PI/50;
        const radius = 220;
        const target = new BABYLON.Vector3(0, 0, 0);
    
        const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
        camera.attachControl(canvas, true);
    
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.6;
    
        return scene;
    }
    

    Burada, neredeyse tamamen aşağı doğru işaret eden ve alanın kaynak noktasını hedefleyen bir Arcrotatecameraoluşturduk. Oluşturduğumuz ışığı, çatına işaret eden ve bir ortam alanının benzetimini yapmak için yararlı olan bir Hemisphericlight . Şiddette, şiddetini azaltarak hafif bir şekilde da sönük.

    Kamera ve ışık oluşturma konusunda bir yenileyici gerekiyorsa, sonraki adıma geçmeden önce Merhaba Dünya öğretici serisinin sahneyi hazırla bölümünü yeniden ziyaret edin.

  4. Son olarak, bir WebXR platformu için geliştirme yaptığımız için, önce aşağıdaki satırı ekleyerek sahnede XR deneyimini etkinleştirmemiz gerekecektir :

    const xrHelper = await scene.createDefaultXRExperienceAsync();
    

    JavaScript içinde, await bir işlev içindeki bir işlevde anahtar sözcüğünü kullanmak için async , üst işlevin de olması gerekir async , bu nedenle createScene işlevi zaman uyumsuz olarak tanımladık. Bu öğretici serisinde daha sonra, xrHelper Babylon.js tarafından desteklenen farklı WebXR özelliklerini etkinleştirmek ve yapılandırmak için bunu kullanacağız.

  5. Tamamlanan scene.js şöyle görünmelidir:

    const createScene = async function(engine) {
        const scene = new BABYLON.Scene(engine);
    
        const alpha =  3*Math.PI/2;
        const beta = Math.PI/50;
        const radius = 220;
        const target = new BABYLON.Vector3(0, 0, 0);
    
        const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);
        camera.attachControl(canvas, true);
    
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        light.intensity = 0.6;
    
        const xrHelper = await scene.createDefaultXRExperienceAsync();
    
        return scene;
    }
    
  6. Artık çalışma işlevimiz olduğuna göre createScene() , createScene() işlevin index.htmltanınabilmesi içinscene.jsdosyasını betik olarakindex.html. Bu kod satırını, <header> HTML dosyasının bölümünün içine ekleyin:

    <html>
        <head>
            <title>Piano in BabylonJS</title>
            <script src="https://cdn.babylonjs.com/babylon.js"></script>
            <script src="scene.js"></script>
            <style>
                body,#renderCanvas { width: 100%; height: 100%;}
            </style>
        </head>
        <body>
            <canvas id="renderCanvas"></canvas>
            <script type="text/javascript">
                const canvas = document.getElementById("renderCanvas");
                const engine = new BABYLON.Engine(canvas, true); 
    
                createScene(engine).then(sceneToRender => {
                    engine.runRenderLoop(() => sceneToRender.render());
                });
    
                // Watch for browser/canvas resize events
                window.addEventListener("resize", function () {
                    engine.resize();
                });
            </script>
        </body>
    </html>
    
  7. Tarayıcınızda index.html açın ve daha önce görtiğimiz hata mesajının artık mevcut olmadığını ve sayfada boş bir Babylon.js sahneye sahip olduğunu fark edersiniz.

Sonraki adımlar