Понимание столкновений и физики с Babylon.js и Oimo.js

Добавьте этот код в ваш проект:

 function CreateMaterials() {
    materialAmiga = new BABYLON.StandardMaterial("amiga", scene);
    materialAmiga.diffuseTexture = new BABYLON.Texture("assets/amiga.jpg", scene);
    materialAmiga.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
    materialAmiga.diffuseTexture.uScale = 5;
    materialAmiga.diffuseTexture.vScale = 5;
    materialWood = new BABYLON.StandardMaterial("wood", scene);
    materialWood.diffuseTexture = new BABYLON.Texture("assets/wood.jpg", scene);
    materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
}
function addListeners() {
    window.addEventListener("keydown", function (evt) {
        // s for sphere
        if (evt.keyCode == 83) {
            for (var index = 0; index < 25; index++) {
                var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 10, 0.5, scene);
                sphere.material = materialAmiga;
                sphere.position = new BABYLON.Vector3(0 + index / 10, 3, 5 + index / 10);
                sphere.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, { mass: 1 });
            }
        }
        // b for box
        if (evt.keyCode == 66) {
            for (var index = 0; index < 10; index++) {
                var box0 = BABYLON.Mesh.CreateBox("Box0", 0.5, scene);
                box0.position = new BABYLON.Vector3(0 + index / 5, 3, 5 + index / 5);
                box0.material = materialWood;
                box0.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, { mass: 4 });
            }
        }
    });
}

Вы можете видеть, что коробки тяжелее сфер на 4.

Примечание: если вам нужно понять, как материал работает в babylon.js, посмотрите на этот модуль: Введение в WebGL 3D с HTML5 и Babylon.js — Понимание материалов и входных данных или поиграйте с нашим специальным примером Playground: Babylon.js Playground — Пример материалов

Добавьте эти две строки кода после строки scene.enablePhysics

 CreateMaterials();
addListeners();

И запустить веб-проект. Перейдите к центру музея и нажмите скорее клавиши «s» или «b». Вы получите этот забавный результат:

Добавление поддержки выбора для нажатия на сетки

Давайте добавим еще одну интересную функцию: возможность щелкнуть один из объектов, чтобы выбросить их. Для этого вам нужно отправить луч из 2D-координат мыши внутри 3D-сцены, проверить, касается ли этот луч одной из интересных сеток, и, если это так, применить к нему импульсную силу, чтобы попытаться переместить его.

Примечание: чтобы понять, как работает комплектация, просмотрите этот модуль MVA: Введение в WebGL 3D с HTML5 и Babylon.js — расширенные функции или поиграйте с нашим онлайн-примером: Babylon.js Playground — Пример комплектации .

Добавьте этот код в addListeners()

 canvas.addEventListener("mousedown", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY, function (mesh) {
        if (mesh.name.indexOf("Sphere0") !== -1 || mesh.name.indexOf("Box0") !== -1) {
            return true;
        }
        return false;
    });
    if (pickResult.hit) {
        var dir = pickResult.pickedPoint.subtract(scene.activeCamera.position);
        dir.normalize();
        pickResult.pickedMesh.applyImpulse(dir.scale(1), pickResult.pickedPoint);
    }
});

Запустите свой код в вашем любимом браузере. Теперь вы можете нажать на свои физические сетки, чтобы играть с ними.

Отображение ограничивающих рамок, чтобы лучше понять всю историю

Наконец, мы собираемся создать сцену отладки, чтобы позволить вам отображать / скрывать коллайдеры и активировать / деактивировать физические свойства на них.

Мы собираемся ввести пользовательский интерфейс в этот div:

 <div id="lcContainer">
    <ul id="listColliders">
    </ul>
</div>

И мы будем использовать эту функцию для обработки пользовательского интерфейса:

 function CreateCollidersHTMLList() {
    var listColliders = document.getElementById("listColliders");
    for (var j = 0; j < meshesColliderList.length; j++) {
        var newLi = document.createElement("li");
        var chkVisibility = document.createElement('input');
        chkVisibility.type = "checkbox";
        chkVisibility.name = meshesColliderList[j].name;
        chkVisibility.id = "colvis" + j;
        var chkPhysics = document.createElement('input');
        chkPhysics.type = "checkbox";
        chkPhysics.name = meshesColliderList[j].name;
        chkPhysics.id = "colphysx" + j;
        (function (j) {
            chkVisibility.addEventListener(
             "click",
             function (event) {
                 onChangeVisibility(j, event);
             },
             false
           );
            chkPhysics.addEventListener(
            "click",
            function (event) {
                onChangePhysics(j, event);
            },
            false
            );
        })(j)
        newLi.textContent = meshesColliderList[j].name + " visibility/physx ";
        newLi.appendChild(chkVisibility);
        newLi.appendChild(chkPhysics);
        listColliders.appendChild(newLi);
    }
    function onChangeVisibility(id, event) {
        if (!meshesColliderList[id].isVisible) {
            meshesColliderList[id].isVisible = true;
            meshesColliderList[id].material.alpha = 0.75;
            meshesColliderList[id].material.ambientColor.r = 1;
        }
        else {
            meshesColliderList[id].isVisible = false;
        }
    }
    function onChangePhysics(id, event) {
        if (!meshesColliderList[id].checkCollisions) {
            meshesColliderList[id].checkCollisions = true;
            meshesColliderList[id].setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, { mass: 0, 
                                                   friction: 0.5, restitution: 0.7 });
        }
        else {
            meshesColliderList[id].checkCollisions = false;
            meshesColliderList[id].setPhysicsState(BABYLON.PhysicsEngine.NoImpostor);
        }
    }
}

Я знаю, он генерирует очень уродливый интерфейс, но мне было лень тратить на него больше времени. Не стесняйтесь улучшать это! :-П

Вызовите эту новую функцию и запустите веб-проект. Теперь, например, отобразим коллайдеры 12 и 17:

Вы также можете, со вторым флажком, включить / отключить физические свойства. Например, если вы отключите физические свойства на коллайдере 12 и запустите сферы, они теперь пройдут через эту стену! Это показано на следующем снимке экрана как сфера, окруженная красным квадратом:

Вывод

Вы можете поиграть с этим примером отладки прямо в вашем браузере здесь: babylon.js Демоверсия отладки Espilit Physics .

Пожалуйста, взгляните также на это удивительное демо, созданное Сэмюэлем Жирардином, которое также использует Oimo.js для некоторых забавных персонажей:

Надеюсь, вам понравился этот урок! Не стесняйтесь пинговать меня в Твиттере, чтобы прокомментировать это.

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Project Spartan и его новым механизмом рендеринга . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows с помощью modern.IE .