Öğretici: 3B nesneyle etkileşim kurma

babylon.js kullanarak bir karma gerçeklik deneyimi için 3D nesneler ve etkileşimler oluşturmayı öğrenin. Bu bölümde, nesneyi seçerken bir küpün yüzlerini boyamak gibi basit bir şey ile başlayacaksınız.

Bu öğreticide aşağıdaki konular ele alınmaktadır:

  • Etkileşimler ekleme
  • WebXR derinlikli modunu etkinleştir
  • uygulamayı Windows Mixed Reality benzetici üzerinde çalıştırma
  • Android Chrome 'da uygulamayı çalıştırın ve hata ayıklayın

Başlamadan önce

Önceki öğreticide, sahneye sahip temel bir Web sayfası oluşturulmuştur. Barındırma Web sayfasını düzenlenmek üzere açın.

<html>
<head>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        body,#renderCanvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        
        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3.Black;
            
            const alpha =  Math.PI/4;
            const beta = Math.PI/3;
            const radius = 8;
            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(1, 1, 0));
            
            const box = BABYLON.MeshBuilder.CreateBox("box", {});
            box.position.x = 0.5;
            box.position.y = 1;
            
            return scene;
        };
        
        const sceneToRender = createScene();
        engine.runRenderLoop(function(){
            sceneToRender.render();
        });
    </script>
</body>
</html>

Etkileşim ekle

  1. İlk olarak, küpün bir rastgele renkle boyanması için küpü oluşturan kodumuzu güncelleştirelim. Bunu yapmak için küpümüze malzemeler ekleyeceğiz. Malzeme, renk ve dokuları belirtmemize olanak sağlar ve diğer nesneleri kapsayacak şekilde kullanılabilir. Malzemenin nasıl göründüğü, sahnede kullanılan ışık veya ışılara ve tepki olarak nasıl ayarlandığına bağlıdır. Örneğin, diffuseColor, eklendiği tüm kafesin rengini yayar. Şu kodu ekleyin:

    const boxMaterial = new BABYLON.StandardMaterial("material", scene);
    boxMaterial.diffuseColor = BABYLON.Color3.Random();
    box.material = boxMaterial;
    
  2. Artık küp rastgele bir renkle boyandığına göre şu şekilde bir etkileşim ekleyelim:

    • Küpe tıklandığında rengi değiştirme
    • Renk değiştirildikten sonra küpü taşı

    Etkileşimler eklemek için Eylemlerkullanıyor olması gerekir. Olay tetikleyicisine yanıt olarak bir eylem başlatılır. Örneğin, Kullanıcı küpe tıkladığı zaman. Tüm yapmanız gereken, BABYLON örnekliyoruz. ActionManager ve belirli bir tetikleyici için bir eylem kaydetme. Babylon. ExecuteCodeAction , birisi küpe tıkladığında JavaScript işlevimizi çalıştırır:

    box.actionManager = new BABYLON.ActionManager(scene);
    box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
        BABYLON.ActionManager.OnPickTrigger, 
        function (evt) {
            const sourceBox = evt.meshUnderPointer;
    
            //move the box upright
            sourceBox.position.x += 0.1;
            sourceBox.position.y += 0.1;
    
            //update the color
            boxMaterial.diffuseColor = BABYLON.Color3.Random();
        }));
    
  3. Web sayfasının son kodu şöyle görünür:

    <html>
    <head>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script>
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true);
    
            const createScene = function() {
                const scene = new BABYLON.Scene(engine);
                scene.clearColor = new BABYLON.Color3.Black;
    
                const alpha =  Math.PI/4;
                const beta = Math.PI/3;
                const radius = 8;
                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(1, 1, 0));
    
                const box = BABYLON.MeshBuilder.CreateBox("box", {});
                box.position.x = 0.5;
                box.position.y = 1;
    
                const boxMaterial = new BABYLON.StandardMaterial("material", scene);
                boxMaterial.diffuseColor = BABYLON.Color3.Random();
                box.material = boxMaterial;
    
                box.actionManager = new BABYLON.ActionManager(scene);
                box.actionManager.registerAction(
                    new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, 
                    function (evt) {
                        const sourceBox = evt.meshUnderPointer;
                        sourceBox.position.x += 0.1;
                        sourceBox.position.y += 0.1;
    
                        boxMaterial.diffuseColor = BABYLON.Color3.Random();
                    }));
    
                return scene;
            };
    
            const sceneToRender = createScene();
            engine.runRenderLoop(function(){
                sceneToRender.render();
            });
        </script>
    </body>
    </html>
    

WebXR derinlikli deneyimini etkinleştir

Artık küpümüzde renkleri değiştirdiğimiz için, modern deneyimi denemeye hazırız.

  1. Bu adımda bir zeminsunacağız. Küp, AIR 'te asılı kalacak ve en altta bir kat göreceğiz. Arka planı aşağıdaki gibi ekleyin:

    const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
    

    Bu, basit bir 4x4 ölçüm tabanı oluşturur.

  2. WebXR desteği eklemek için, Promise sonucunu Içeren Createdefaultxrexperienceasyncçağrısı yapmanız gerekir. Bu kodu, Return sahneyiyerine createsahnenin işlevinin sonuna ekleyin;:

    const xrPromise = scene.createDefaultXRExperienceAsync({
        floorMeshes: [ground]
    });
    return xrPromise.then((xrExperience) => {
        console.log("Done, WebXR is enabled.");
        return scene;
    });
    
  3. Createsahfunction şimdi bir sahne yerine Promise döndürürken, createsahnenin ve altyapının. runrenderloop 'ın nasıl çağrıldığını değiştirmemiz gerekiyor. Aşağıdaki kodla, /Script > etiketinden hemen önce bulunan bu işlevlerin geçerli çağrılarını değiştirin:

    createScene().then(sceneToRender => {
        engine.runRenderLoop(() => sceneToRender.render());
    });
    
  4. Web sayfasının son kodu şöyle görünür:

    <html>
    <head>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <style>
            body,#renderCanvas { width: 100%; height: 100%;}
        </style>
    </head>
    <body>
        <canvas id="renderCanvas"></canvas>
        <script>
            const canvas = document.getElementById("renderCanvas");
            const engine = new BABYLON.Engine(canvas, true);
    
            const createScene = function() {
                const scene = new BABYLON.Scene(engine);
                scene.clearColor = new BABYLON.Color3.Black;
    
                const alpha =  Math.PI/4;
                const beta = Math.PI/3;
                const radius = 8;
                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(1, 1, 0));
    
                const box = BABYLON.MeshBuilder.CreateBox("box", {});
                box.position.x = 0.5;
                box.position.y = 1;
    
                const boxMaterial = new BABYLON.StandardMaterial("material", scene);
                boxMaterial.diffuseColor = BABYLON.Color3.Random();
                box.material = boxMaterial;
    
                box.actionManager = new BABYLON.ActionManager(scene);
                box.actionManager.registerAction(
                    new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, 
                    function (evt) {
                        const sourceBox = evt.meshUnderPointer;
                        sourceBox.position.x += 0.1;
                        sourceBox.position.y += 0.1;
    
                        boxMaterial.diffuseColor = BABYLON.Color3.Random();
                    }));
    
                const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
    
                const xrPromise = scene.createDefaultXRExperienceAsync({
                    floorMeshes: [ground]
                });
    
                return xrPromise.then((xrExperience) => {
                    console.log("Done, WebXR is enabled.");
                    return scene;
                });
            };
    
            createScene().then(sceneToRender => {
                engine.runRenderLoop(() => sceneToRender.render());
            });
        </script>
    </body>
    </html>
    
  5. Yukarıdaki kod tarayıcı penceresinde aşağıdaki çıktıyı oluşturur: Webxr sahneyi

Windows Mixed Reality simülatörü üzerinde çalıştır

  1. geçmişte yapmadıysanız Windows Mixed Reality simülatörü etkinleştirin .

  2. Sağ alt köşedeki tam ekran-VR düğmesini seçin: tam ekran VR düğmesi

  3. bu eylem, aşağıda gösterildiği gibi Windows Mixed Reality simülatör penceresini başlatacaktır: karma gerçeklik portalı

  4. Doğru, ileri doğru ve doğru şekilde ilerlemek için klavyenizde W, A, S ve D tuşlarını kullanın. Küpü hedeflemek için benzetim kullanın ve tıklama eylemini gerçekleştirmek için klavyenizde Enter tuşuna basın. Küp rengini değiştirecek ve yeni bir konuma taşıyacaktır.

Not

Küp hedeflenirken, yukarıdaki resimde gösterildiği gibi, Hand Ray (beyaz daire) ucunun küpten kesiştiği gibi olduğundan emin olun. Gelin ve uygulamalı ile kaydetmehakkında daha fazla bilgi edinin.

Android cihazında Çalıştır ve hata ayıkla

Android cihazınızda hata ayıklamayı etkinleştirmek için aşağıdaki adımları gerçekleştirin:

Önkoşullar

  • Geliştirme makinesindeki güvenli bağlamda statik HTML sayfasına hizmet veren bir Web sunucusu (https://veya localhost üzerinde bağlantı noktası iletme yoluyla). Örneğin, NPM paketini statik HTML dosyaları sunan basit bir basit Web sunucusu olarak hizmet eder, daha fazla NPM hizmeti

  • Cihaz başlangıçta Google Play Store ile birlikte gönderilir ve Android 7,0 veya daha yeni bir sürümü çalıştırıyor olmalıdır

  • Hem geliştirme iş istasyonunda hem de cihazda Google Chrome 'un en son sürümü

  • Cihazın WebXR çalıştıracak şekilde doğru şekilde yapılandırıldığını doğrulamak için cihazdaki örnek bir webxr sayfasına göz atın. İletiyi görmeniz gerekir, örneğin:

    Tarayıcınız, Web XR 'yi destekler ve uygun donanıma sahipseniz sanal gerçeklik ve genişletilmiş gerçeklik deneyimlerini çalıştırabilir.

  1. Android cihazında Geliştirici modunu ve USB hata ayıklamayı etkinleştirin. Resmi belgeler sayfasında cihaz üzerindeki Geliştirici seçeneklerini yapılandırma bölümüne bakın.

  2. Daha sonra, Android cihazını USB kablosu aracılığıyla geliştirme makinenize veya dizüstü bilgisayarınıza bağlayın

  3. Geliştirme makinesindeki Web sunucusunun çalıştığından emin olun. Örneğin, Web barındırma sayfanızı (index.html) içeren kök klasöre gidin ve aşağıdaki kodu yürütün (NPM paketini kullandığınız varsayıldığında):

    serve
    
  4. Geliştirme makinenizde Google Chrome 'u açın ve adres çubuğuna şu metni girin:

    Chrome:/cihaz Chrome USB hata ayıklama penceresi

  5. USB cihazlarını bul onay kutusunun etkinleştirildiğinden emin olun

  6. Düğme bağlantı noktası iletme ' ye tıklayın ve bağlantı noktası iletiminin etkin olduğundan ve aşağıda gösterildiği gibi bir localhost: 5000 girdisi Içerdiğinden emin olun: Chrome bağlantı noktası iletme penceresi

  7. Bağlı Android cihazınızda bir Google Chrome penceresi açın ve öğesine gidin http://localhost:5000 ve küpü görmeniz gerekir

  8. Geliştirme makinenizde, Chrome 'da cihazınızı ve şu anda açık olan Web sayfalarının bir listesini görürsünüz: Chrome inceleme penceresi

  9. Bir girdinin yanındaki düğmeyi incelemeye tıklayın : Chrome DevTools hata ayıklama penceresi

  10. Sayfada hata ayıklamak için Chrome DevTools kullanın

Paketler

Aşağıda, bu öğreticiden en önemli olan en önemli kalkış verilmiştir:

  • Babylon.js JavaScript kullanarak derinlikli deneyimler oluşturmayı kolaylaştırır
  • Sanal sahneler oluşturmak için alt düzey kod yazmanız veya yeni bir teknoloji öğrenmeniz gerekmez
  • Kulaklık satın almanız gerekmeden WebXR destekli tarayıcıyla karma gerçeklik uygulamaları oluşturabilirsiniz

Sonraki adımlar

Tebrikler! babylon.js öğreticilerimizi tamamladınız ve nasıl yapılacağını öğrendiniz:

  • Geliştirme ortamı ayarlama
  • Sonuçları göstermek için yeni bir Web sayfası oluşturma
  • Temel 3B öğeleri oluşturmak ve bunlarla etkileşim kurmak için babylon.js API 'SI
  • Windows Mixed Reality benzeticisinde uygulamayı çalıştırma ve test etme

Karma Gerçeklik JavaScript geliştirmesi hakkında daha fazla bilgi için bkz. JavaScript geliştirmeye genel bakış.

Başka bir babylon.js öğreticisini arıyorsanız, babylon.js kullanarak VR alanında bir piyano oluşturmayı öğrenmek için piyano-bina öğreticisi serisini kullanıma alın.