Öğretici: 3B nesneyle etkileşim kurma

Babylon.js kullanarak bir Karma Gerçeklik deneyimi için 3B nesneler ve etkileşimler oluşturmayı öğrenin. Bu bölümde, nesneyi seçtiğinizde küplerin yüzlerini boyamak gibi basit bir şeyle başlayacaksınız.

Bu öğretici aşağıdaki konuları kapsar:

Etkileşim ekleme
WebXR çevreleyici modunu etkinleştirme
uygulamayı Windows Mixed Reality Simulator'da çalıştırma
Android Chrome'da uygulamayı çalıştırma ve uygulamada hata ayıklama

Başlamadan önce

Önceki öğretici adımında, bir sahne içeren temel bir web sayfası oluşturulmuştu. Barındırma web sayfasının düzenleme için açık olmasını sağlayı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 ekleme

İlk olarak küpü oluşturan kodumuzu güncelleştirelim, böylece küp rastgele bir renkle boyanmış olur. Bunu yapmak için küpümüze malzeme ekleyeceğiz. Malzeme renk ve dokuları belirtmemize olanak tanır ve diğer nesneleri kapsamak için kullanılabilir. Bir malzemenin nasıl görüneceği, sahnede kullanılan ışığa veya ışıklara ve tepki vermek için nasıl ayarlandığına bağlıdır. Örneğin, diffuseColor rengi bağlı olduğu ağın her yerine yayar. Şu kodu ekleyin:
```
const boxMaterial = new BABYLON.StandardMaterial("material", scene);
boxMaterial.diffuseColor = BABYLON.Color3.Random();
box.material = boxMaterial;
```
Küp rastgele bir renkle boyanmış olduğuna göre, şimdi aşağıdakilere bir etkileşim ekleyelim:
- Küp tıklandığında rengi değiştirme
- Renk değiştirildikten sonra küpü taşıma
Etkileşim eklemek için eylemleri kullanmalıyız. Olay tetikleyicisine yanıt olarak bir eylem başlatılır. Örneğin, kullanıcı küpü tıklattığında. Tek yapmamız gereken BABIL'i örnek almak. ActionManager ve belirli bir tetikleyici için bir eylem kaydedin. BABIL. Biri küpe tıkladığında ExecuteCodeAction 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();
    }));
```

Web sayfasının son kodu aşağıdaki gibi 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 çevreleyici deneyimi etkinleştirme

Küpümüz renkleri değiştirdiğini göre, çevreleyici deneyimi denemeye hazırız.

Bu adımda bir zemin tanıtacağız. Küp havada asılı olacak ve altta bir zemin göreceğiz. Zemini aşağıdaki gibi ekleyin:
```
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4});
```
Bu, 4x4 metrelik basit bir zemin oluşturur.

WebXR desteği eklemek için Promise sonucuna sahip createDefaultXRExperienceAsync çağrısı yapmamız gerekir. Bu kodu dönüş sahnesi yerine createScene işlevinin sonuna ekleyin;:

const xrPromise = scene.createDefaultXRExperienceAsync({
    floorMeshes: [ground]
});
return xrPromise.then((xrExperience) => {
    console.log("Done, WebXR is enabled.");
    return scene;
});

createScene işlevi artık sahne yerine bir promise döndüreceğinden createScene ve engine.runRenderLoop'un çağrılma şeklini değiştirmemiz gerekir. /script etiketinden hemen önce bulunan bu işlevlerin <geçerli çağrılarını aşağıdaki kodla değiştirin:>
```
createScene().then(sceneToRender => {
    engine.runRenderLoop(() => sceneToRender.render());
});
```

Web sayfasının son kodu aşağıdaki gibi 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>

Yukarıdaki kod tarayıcı penceresinde aşağıdaki çıkışı oluşturur:

Windows Mixed Reality Simülatöründe Çalıştırma

Daha önce yapmadıysanız Windows Mixed Reality Simülatörünü etkinleştirin.
Sağ alt köşedeki Tam Ekran VR düğmesini seçin:
Bu eylem aşağıda gösterildiği gibi Windows Mixed Reality Simülatörü penceresini başlatır:
Buna göre ileri, sola ve sağa doğru ilerlemek için klavyenizdeki W, A, S ve D tuşlarını kullanın. Küpü hedeflemek için simülasyon elini kullanın ve tıklama eylemini gerçekleştirmek için klavyenizdeki Enter tuşuna basın. Küp rengini değiştirir ve yeni bir konuma geçer.

Not

Küpü hedeflerken, yukarıdaki resimde gösterildiği gibi el ışınının (beyaz daire) ucunun küple kesiştiğinden emin olun. Ellerle nokta ve işleme hakkında daha fazla bilgi edinin.

Android cihazda çalıştırma ve hata ayıklama

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

Önkoşullar

Geliştirme makinesinde güvenli bağlamda (https:// veya localhost üzerinde bağlantı noktası iletme yoluyla) statik html sayfası sunan bir web sunucusu. Örneğin kaldıraç, npm paketini statik html dosyalarına hizmet veren basit basit web sunucusu olarak sunma, daha fazla npm hizmeti olup olmadığını denetleyin
Cihaz başlangıçta Google Play Store ile birlikte gönderildi ve Android 7.0 veya daha yeni bir sürümünü ç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'yi çalıştıracak şekilde doğru yapılandırıldığını doğrulamak için cihazda örnek bir WebXR sayfasına göz atın. İletiyi görmeniz gerekir, örneğin:

Tarayıcınız WebXR'yi destekler ve uygun donanıma sahipseniz Sanal Gerçeklik ve Artırılmış Gerçeklik deneyimlerini çalıştırabilir.

Android cihazda geliştirici modunu ve USB hata ayıklamasını etkinleştirin. Android sürümünüz için bunun nasıl yapıldığını görmek için resmi belge sayfasında Cihaz içi geliştirici seçeneklerini yapılandırma bölümüne bakın
Ardından, Android cihazını USB kablosuyla geliştirme makinenize veya dizüstü bilgisayarınıza bağlayın
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 servis ettiğiniz varsayılarak):
```
serve
```
Geliştirme makinenizde Google Chrome'ı açın ve adres çubuğuna aşağıdaki metni girin:

chrome://inspect#devices
USB cihazlarını bul onay kutusunun etkinleştirildiğinden emin olun
Bağlantı noktası iletme düğmesine tıklayın ve Bağlantı noktası iletmenin etkinleştirildiğinden ve aşağıda gösterildiği gibi localhost:5000 girdisi içerdiğinden emin olun:
Bağlı Android cihazınızda bir Google Chrome penceresi açın ve adresine göz atın http://localhost:5000 ve küpü görmeniz gerekir
Geliştirme makinenizde, Chrome'da cihazınızı ve şu anda burada açılmış olan web sayfalarının listesini görürsünüz:
Bir girişin http://localhost:5000yanındaki İncele düğmesine tıklayın:
Sayfada hata ayıklamak için Chrome Geliştirici Araçları'nı kullanma

Paketler

Bu öğreticide yer alan en önemli hususlar şunlardır:

Babylon.js, JavaScript kullanarak çevreleyici 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
Mikrofonlu kulaklık satın almanıza gerek kalmadan WebXR destekli tarayıcı ile Karma Gerçeklik uygulamalar oluşturabilirsiniz

Sonraki adımlar

Tebrikler! Babylon.js öğretici serimizi tamamladınız ve şunları yapmayı öğrendiniz:

Geliştirme ortamı ayarlama
Sonuçları görüntülemek için yeni bir web sayfası oluşturma
Temel 3B öğeleri oluşturmak ve bunlarla etkileşim kurmak için Babylon.js API'si
Uygulamayı bir Windows Mixed Reality Simülatöründe çalıştırma ve test etme

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

Başka bir Babylon.js öğretici arıyorsanız, Babylon.js kullanarak VR alanında piyano oluşturmayı öğrenmek için Piyano Oluşturma Öğretici Serisi'ne göz atın.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2023-03-21