Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > разработка игр, графический дизайн и моделирование > Gamedev - cоздание игр: Unity, OpenGL, DirectX
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 22.11.2021, 17:41   #11
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Пример комбинации графики на Babylon.js и физики на Matter.js в классе на TypeScript

Box.ts

Код:
import * as BABYLON from "babylonjs";
import * as Matter from "matter-js";

export default class Box
{
    private _box: BABYLON.Mesh;
    private _body: Matter.Body;
    private RATIO = 100;

    public constructor(x: number, y: number, width: number, height: number,
        depth: number, isStatic: boolean, matterEngine: Matter.Engine, scene: BABYLON.Scene)
    {
        this._box = BABYLON.MeshBuilder.CreateBox("box",
            { width: width, height: height, depth: depth }, scene);
        this._box.position.x = x;
        this._box.position.y = y;

        this._body = Matter.Bodies.rectangle(x * this.RATIO, y * this.RATIO,
            width * this.RATIO, height * this.RATIO, { isStatic: isStatic });
        Matter.World.add(matterEngine.world, this._body);
    }

    public update(): void
    {
        this._box.position.x = this._body.position.x / this.RATIO;
        this._box.position.y = this._body.position.y / this.RATIO;
        this._box.rotation.z = this._body.angle;
    }
}
8Observer8 вне форума Ответить с цитированием
Старый 09.06.2022, 19:11   #12
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Пример сборки JavaScript-проекта с помощью Rollup с ES6-модулями: Cannon-ES, Three.js, OrbitControl, ColladaLoader

Cannon-ES - это физический движок для браузерных 3D-игр и неигровых симуляций физики, разработчики которого были вдохновлены физическим движком Ammo.js, который является прямом портом с C++ физического движка Bullet Physics. Cannon-ES - более легковесный и проще в использовании, чем Ammo.js

Инструкция:
  • Установите Rollup командой: npm i -D rollup
  • Используйте следующую команду для отладки: rollup -cmw
  • Для сборки в релиз установите глобально UglifyJS командой: npm i uglify-js -g
  • Используйте следующую команду для сборки в релиз: uglifyjs public/js/bundle.js -o public/js/bundle.min.js
  • В качестве локального сервера можно поставить следующий пакет: npm i http-server
  • Для запуска локального сервера можно открыть новый терминал в редакторе кода VSCode: "View" > "Terminal" (или сочетанием клавиш: Ctrl+`) и введите команду в терминале: http-server -c-1 (ключ "-c-1" используется, чтобы деактивировать кеширование браузера). Перейдите в браузер и введите адрес: localhost:8080

Пример с ES-модулями можно опубликовать в песочнице
Исходники: falling-box-threejs-cannon-es-js.zip (7.6 Кб)



rollup.config.js

Код:
export default {
    input: "./src/client/main.js",
    output: {
        file: "public/js/bundle.js"
    }
}
public/index.html

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.141.0/build/three.module.js",
                "collada-loader": "https://unpkg.com/three@0.141.0/examples/jsm/loaders/ColladaLoader.js",
                "orbit-controls": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js",
                "cannon-es": "https://cdn.jsdelivr.net/npm/cannon-es@0.19.0/dist/cannon-es.js"
            }
        }
    </script>

    <script type="module" src="js/bundle.js"></script>
</body>

</html>
src/client/main.js

Код:
import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
import * as CANNON from "cannon-es";

let scene;
const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -10, 0) });
const rigidBodies = [];

function init()
{
    initScene();
    createGround();
    createBox({ x: 0, y: 5, z: 0.5 });
    createBox({ x: 0.5, y: 2, z: 0 });
}
init();

function createGround()
{
    const pos = { x: 0, y: 0, z: 0 };
    const scale = { x: 50, y: 2, z: 50 };
    const quat = { x: 0, y: 0, z: 0, w: 1 };
    const mass = 0;

    // Three.js section

    const ground = new THREE.Mesh(
        new THREE.BoxBufferGeometry(),
        new THREE.MeshPhongMaterial({ color: 0xa0afa4 }));

    ground.position.set(pos.x, pos.y, pos.z);
    ground.scale.set(scale.x, scale.y, scale.z);

    ground.receiveShadow = true;

    scene.add(ground);

    // Cannon-ES section

    const colShape = new CANNON.Box(new CANNON.Vec3(scale.x / 2, scale.y / 2, scale.z / 2));
    const body = new CANNON.Body({ mass: mass });
    body.position.set(pos.x, pos.y, pos.z);
    body.quaternion.set(quat.x, quat.y, quat.z, quat.w);
    body.addShape(colShape);

    world.addBody(body);
}

function createBox(pos)
{
    const scale = { x: 1, y: 1, z: 1 };
    const quat = { x: 0, y: 0, z: 0, w: 1 };
    const mass = 10;

    // Three.js section

    const box = new THREE.Mesh(
        new THREE.BoxGeometry(1, 1, 1),
        new THREE.MeshPhongMaterial({ color: 0xe77732 }));
    scene.add(box);

    box.position.set(pos.x, pos.y, pos.z);
    box.scale.set(scale.x, scale.y, scale.z);

    box.castShadow = true;
    box.receiveShadow = true;

    scene.add(box);

    // Cannon-ES section

    const colShape = new CANNON.Box(new CANNON.Vec3(scale.x / 2, scale.y / 2, scale.z / 2));
    const body = new CANNON.Body({ mass: mass });
    body.position.set(pos.x, pos.y, pos.z);
    body.quaternion.set(quat.x, quat.y, quat.z, quat.w);
    body.addShape(colShape);

    world.addBody(body);

    box.userData.physicsBody = body;
    rigidBodies.push(box);
}

function updatePhysics()
{
    world.fixedStep();

    for (let i = 0; i < rigidBodies.length; i++)
    {
        let objThree = rigidBodies[i];
        let objCannon = objThree.userData.physicsBody;

        objThree.position.copy(objCannon.position);
        objThree.quaternion.copy(objCannon.quaternion);
    }
}

function initScene()
{
    // Create the scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfd1e5);

    // Add hemisphere light
    let hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.1);
    hemiLight.color.setHSL(0.6, 0.6, 0.6);
    hemiLight.groundColor.setHSL(0.1, 1, 0.4);
    hemiLight.position.set(0, 50, 0);
    scene.add(hemiLight);

    // Add directional light
    let dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.color.setHSL(0.1, 1, 0.95);
    dirLight.position.set(-1, 1.75, 1);
    dirLight.position.multiplyScalar(100);
    scene.add(dirLight);

    dirLight.castShadow = true;

    dirLight.shadow.mapSize.width = 2048;
    dirLight.shadow.mapSize.height = 2048;

    let d = 50;

    dirLight.shadow.camera.left = -d;
    dirLight.shadow.camera.right = d;
    dirLight.shadow.camera.top = d;
    dirLight.shadow.camera.bottom = -d;

    dirLight.shadow.camera.far = 13500;

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0xbfd1e5);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    renderer.gammaInput = true;
    renderer.gammaOutput = true;

    renderer.shadowMap.enabled = true;

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
    camera.position.set(2, 4, 7);

    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);

    (function anim()
    {
        requestAnimationFrame(anim);
        orbitControls.update();
        updatePhysics();
        renderer.render(scene, camera);
    })();

    window.onresize =
        () =>
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        };
}
Вложения
Тип файла: zip falling-box-threejs-cannon-es-js.zip (7.6 Кб, 0 просмотров)

Последний раз редактировалось 8Observer8; 10.06.2022 в 13:07.
8Observer8 вне форума Ответить с цитированием
Старый 10.06.2022, 10:23   #13
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Ключ "-c-1" используется, чтобы деактивировать кеширование браузера:
Цитата:
http-server -c-1
Для использования текущей директории, а не "public", добавляется точка:

Цитата:
http-server -c-1 .
8Observer8 вне форума Ответить с цитированием
Старый 23.06.2022, 09:03   #14
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Программирование на языке TypeScript с помощью Parcel на примере Three.js и Cannon-ES
  • Установите редактор кода VSCode и Node.js
  • Установите глобально пакеты TypeScript и Parcel командами в терминале: npm i -g typescript parcel
  • Создайте пустую папку для проекта и создайте в ней файл package.json командой: npm init -y
  • Установите Three.js и Cannon-ES командой: npm i three cannon-es
  • Добавьте в package.json команды:
    Код:
      "scripts": {
        "start": "parcel src/index.html --dist-dir public --open",
        "build": "parcel build src/index.html"
      },
  • Создайте папку src и добавьте в неё два файла:

    src/index.html

    Код:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script type="module" src="main.ts"></script>
    </body>
    
    </html>
    src/main.ts

    Код:
    import * as Three from "three";
    import * as CANNON from "cannon-es";
    
    console.log(new Three.Vector3(1, 2, 3));
    console.log(new CANNON.Vec3(3, 3, 3));
  • Откройте терминал в VSCode (в меню: "View" > "Terminal") и введите команду: npm run start
  • Автоматически будет открыт браузер. Откройте консоль браузера, например, в Chrome нужно нажать Ctrl+Shift+J. В консоли вы увидите вывод:
    Цитата:
    Vector3*{isVector3: true, x: 1, y: 2, z: 3}
    main.ts:5 Vec3*{x: 3, y: 3, z: 3}
Каждый раз, когда вы будете изменять и сохранять код, то браузер будет автоматические обновлять содержимое. Parcel собирает очень быстро - от нескольких десятков или нескольких сотен миллисекунд.

Следующим образом можно добавить в код на TypeScript модули ColladaLoader (для загрузки 3D-моделей с анимациями формата .dae, например, созданных в бесплатном 3D-редакторе Blender) и OrbitControls (для вращения/приближения/отдаления камеры с помощью мыши вокруг точки в 3D-пространстве)

src/main.ts

Код:
import { ColladaLoader } from "./node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls";

console.log(ColladaLoader);
console.log(OrbitControls);
Либо так, если у вас, как у меня, папка с пакетами находится выше по уровню вложенности:

Код:
import { ColladaLoader } from "../../../node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "../../../node_modules/three/examples/jsm/controls/OrbitControls";

console.log(ColladaLoader);
console.log(OrbitControls);

Последний раз редактировалось 8Observer8; 23.06.2022 в 10:46.
8Observer8 вне форума Ответить с цитированием
Старый 23.06.2022, 12:00   #15
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Программирование на языке JavaScript с помощью Rollup на примере Three.js и Cannon-ES
  • Установите редактор кода VSCode и Node.js
  • Создайте пустую папку для проекта и перейдите в неё с помощью терминала
  • Введите в терминале команду: code . (не забудьте добавить точку, эта команда запустит VSCode в текущей директории)
  • Откройте терминал в VSCode (в меню: "View" > "Terminal" (или Ctrl+`)) и установите глобально пакеты Rollup и http-server для этого введите в терминале: npm i -g rollup http-server
  • Создайте в VSCode две папки: public и src
  • В папке public создайте файл index.html:
    Код:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <title>Document</title>
    </head>
    
    <body>
        <script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.js"></script>
    
        <script type="importmap">
            {
                "imports": {
                    "three": "https://unpkg.com/three@0.141.0/build/three.module.js",
                    "collada-loader": "https://unpkg.com/three@0.141.0/examples/jsm/loaders/ColladaLoader.js",
                    "orbit-controls": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js",
                    "cannon-es": "https://cdn.jsdelivr.net/npm/cannon-es@0.19.0/dist/cannon-es.js"
                }
            }
        </script>
    
        <script type="module" src="js/bundle.js"></script>
    </body>
    
    </html>
  • В папке src создайте файл main.js:

    Код:
    import * as THREE from "three";
    import * as CANNON from "cannon-es";
    import { ColladaLoader } from "collada-loader";
    import { OrbitControls } from "orbit-controls";
    
    const vec = new THREE.Vector3(1, 2, 3);
    console.log(vec);
    const vec2 = new CANNON.Vec3(3, 3, 3);
    console.log(vec2);
    
    console.log(ColladaLoader);
    console.log(OrbitControls);
  • В корне проекта создайте файл rollup.config.js:
    Код:
    export default {
        input: "./src/main.js",
        output: {
            file: "public/js/bundle.js"
        }
    }
  • Введите в терминале команду: rollup -cmw (при сохранении изменений в коде будет автоматически создаваться bundle.js)
  • Откройте ещё один терминал в VSCode, для этого нажмите кнопку + (плюс) в правом верхнем углу текущего терминала
  • В новом терминале введите команду: http-server -c-1
  • Перейдите в браузер и введите адрес: localhost:8080
  • Откройте консоль браузера, для этого, например, в Chrome нужно нажать сочетание клавиш: Ctrl+Shift+J. В консоли браузера отобразится результат выполнения программы
  • Для того, чтобы собрать в релиз нужно в первом терминале остановить выполнение rollup (нажать Ctrl+C) и ввести команду: rollup -c
8Observer8 вне форума Ответить с цитированием
Старый 06.06.2023, 17:21   #16
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Подключение Babylon.js с помощь importmap

Код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <a href="https://forum.babylonjs.com/t/problems-loading-babylon-via-es-modules/2031">Topic</a>
    <br>
    <br>
    <div id="output"><div>

    <canvas id="renderCanvas"></canvas>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "@babylonjs/core": "https://unpkg.com/@babylonjs/core@6.3.1",
                "@babylonjs/core/": "https://unpkg.com/@babylonjs/core@6.3.1/"
            }
        }
    </script>

    <script type="module">
        import { Engine } from "@babylonjs/core/Engines/engine.js";
        import { Scene } from "@babylonjs/core/scene.js";

        const canvas = document.getElementById("renderCanvas");
        const engine = new Engine(canvas, true);
        console.log(engine);
        const scene = new Scene(engine);
        console.log(Scene);
    </script>

    <!-- <script type="module" src="js/bundle.js"></script> -->
</body>

</html>
8Observer8 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Многофайловые проекты SomeGuy Паскаль, Turbo Pascal, PascalABC.NET 3 22.05.2016 16:48
проекты komra2 C# (си шарп) 9 16.02.2016 18:52
Многофайловые проекты. inc Общие вопросы C/C++ 1 25.04.2012 16:57
разработать проекты.... Virus Помощь студентам 2 20.06.2007 17:53