Проекты на Three.js и Babylon.js - Gamedev - cоздание игр: Unity, OpenGL, DirectX - Страница 2

8Observer8 · 22.11.2021, 17:41

Пример комбинации графики на 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

Пример сборки 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);
        };
}

8Observer8 · 10.06.2022, 10:23

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

Цитата:

http-server -c-1

Для использования текущей директории, а не "public", добавляется точка:

Цитата:

http-server -c-1 .

8Observer8 · 23.06.2022, 09:03

Программирование на языке 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, 12:00

Программирование на языке 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

Подключение 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 · 11.05.2024, 21:26

Простой контроллер от третьего лица на Three.js, OimoPhysics и JavaScript

Камера следует за кораблём. Камеру можно вращать вокруг объекта с помощью зажатой левой кнопкой мыши. Камеру можно приближать и отдалять с помощью колёсика мыши. На сцене есть куб через который корабля не может пройти, потому что вокруг куба статический коллайдер, а вокруг корабля динамический коллайдер в форме сферы.

Песочница: https://plnkr.co/edit/ENV8AfwIztG5YS7g?preview

GitHub репозиторий

ship-movement-oimophysics-rollup-threejs-js.jpg

23.06.2022, 12:00	#15
8Observer8 Старожил Регистрация: 02.01.2011 Сообщений: 3,328	Программирование на языке 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

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Многофайловые проекты	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