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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 11.01.2018, 00:48   #1
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию Проекты на Three.js и Babylon.js

Предлагаю делиться здесь проектами/примерами на Three.js и Babylon.js

Для затравки выложу примеры из начальных официальных туториалов.

Getting Started (Three.js)

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

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

<head>
    <meta charset="UTF-8">
    <title>Three.js - Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

    <style>
        body {
            margin: 0;
        }

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

<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var animate = function ()
        {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>
Getting Started (Babylon.js)

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

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

<head>
    <meta charset="UTF-8">
    <title>Babylon.js - Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>

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

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

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

    <script>
        window.addEventListener('DOMContentLoaded', function ()
        {
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function ()
            {
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);

                // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function ()
            {
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function ()            
            {
                engine.resize();
            });
        });
    </script>
</body>

</html>
8Observer8 вне форума Ответить с цитированием
Старый 03.02.2018, 14:22   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Three.js замок на острове и двигающиеся вперед-назад лодки.

Лаба сделанная несколько лет назад в вузе.



Код и подробное описание реализации (англ.): https://github.com/AlexP11223/Three.js_IslandCastle

Запустить можно тут: https://alexp11223.github.io/Three.j...tle/index.html
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

Последний раз редактировалось Alex11223; 03.02.2018 в 15:46.
Alex11223 вне форума Ответить с цитированием
Старый 04.02.2018, 13:17   #3
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Вторая лаба.

Тот же замок, но с текстурами и моделями охраны. Рыцари ходят вокруг замка + кнопкой можно добавить еще рыцарей, они выйдут из замка и тоже начнут патрулировать этот радиус.

Текстуры и модели с http://opengameart.org

Для работы нужен HTTP сервер (просто отдающий файлы), или изменение каких-то настроек безопасности браузеров. В то время я использовал Mongose https://cesanta.com/binary.html (его советовал в книге "Learning Three.js" J. Dirksen): там просто кинуть .ехе в папку и запустить.







Код и подробное описание реализации (англ.): https://github.com/AlexP11223/Three.js_GuardedCastle

Запустить можно тут: https://alexp11223.github.io/Three.j...tle/index.html
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.

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

Загрузка текстурированного объекта JSON-формата и текстуры в Three.js из 3D-редактора Blender

Кубик создан в Blender'е (Blender - это бесплатный аналог Maya и 3DsMax). Текстура для кубика создана в GIMP (GIMP - это бесплатный аналог Photoshop'а)

Кубик экспортирован в JSON из Blender'а с помощью плагина: Three.js Blender Export

Песочница: https://plnkr.co/edit/Owc6rAOwaF0WUQjghH8D?p=preview
Исходники архивом: textured-cube.zip
Blender проект: cube.blend.zip
GIMP проект: cube.gimp.zip

textured-cube.png
8Observer8 вне форума Ответить с цитированием
Старый 05.02.2018, 14:49   #5
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Снеговики из встроенных сфер и конусов на Three.js

Демка: https://codepen.io/8Observer8/full/JORMMd
Исходники: snowmen.zip

snowmen.png
8Observer8 вне форума Ответить с цитированием
Старый 01.03.2018, 22:32   #6
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Загрузка плоскости с Normal Map из Blender'а в Babylon.js

Демка на весь экран
Демка в песочнице
Исходники: normal-map.zip

Карта нормалей создана в Blender'е по туториалу: Blender Урок 10 Запекание карт нормалей

baking-normal-map.jpg

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Normal Map</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://dl.dropboxusercontent.com/s/r6uhslpxq36s8vu/babylon.js"></script>
    <script src="js/Scene.js"></script>
    <script src="js/main.js"></script>
</head>

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

</html>
main.js
Код:
"use strict";

function main()
{
    Scene.Create("renderCanvas");
}
window.onload = main;
Scene.js
Код:
"use strict";

// http://www.babylonjs-playground.com/#AVG8L#1

var Scene = (function ()
{
    var _canvas = null;
    var _engine = null;
    var _scene = null;

    var _Create = function (canvasID)
    {
        _canvas = document.getElementById(canvasID);
        _engine = new BABYLON.Engine(_canvas, true);

        document.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);

        BABYLON.SceneLoader.Load("", "./assets/models/plane.babylon", _engine,
            function (newScene)
            {
                newScene.executeWhenReady(function ()
                {
                    _scene = newScene;
                    var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 1, 0), _scene);
                    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 0, 5, BABYLON.Vector3.Zero(), _scene);
                    camera.minZ = 0.1;
                    camera.wheelPrecision = 100;
                    _scene.activeCamera = camera;
                    camera.attachControl(_canvas, true);
                    //_scene.activeCamera.attachControl(_canvas);
                    var mesh = _scene.meshes[0];
                    var normalTexture = new BABYLON.Texture("./assets/textures/norm.png", _scene);
                    var material = new BABYLON.StandardMaterial("planeMat", _scene);
                    material.diffuseColor = new BABYLON.Color3(0.596, 0.356, 0.164);
                    material.invertNormalMapX = true;
                    material.invertNormalMapY = true;
                    material.bumpTexture = normalTexture;
                    mesh.material = material;

                    // Skybox
                    var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, _scene);
                    skybox.infiniteDistance = true;
                    var skyboxMaterial = new BABYLON.StandardMaterial("skybox", _scene);
                    skyboxMaterial.backFaceCulling = false;
                    var files = [
                        "./assets/textures/skybox/skybox_px.jpg",
                        "./assets/textures/skybox/skybox_py.jpg",
                        "./assets/textures/skybox/skybox_pz.jpg",
                        "./assets/textures/skybox/skybox_nx.jpg",
                        "./assets/textures/skybox/skybox_ny.jpg",
                        "./assets/textures/skybox/skybox_nz.jpg",
                    ];
                    skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, _scene);
                    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
                    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                    skybox.material = skyboxMaterial;

                    _Animate();
                });
            });
    };

    var _Animate = function ()
    {
        _engine.runRenderLoop(function ()
        {
            _scene.render();
        });

        window.addEventListener("resize", function ()
        {
            _engine.resize();
        });
    };

    var mPublic = {
        Create: _Create
    };
    return mPublic;
}());

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

Забыл добавить в сообщение выше style.css:
Код:
html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#renderCanvas {
    touch-action: none;
    width: 100%;
    height: 100%;
}
8Observer8 вне форума Ответить с цитированием
Старый 19.11.2021, 14:44   #8
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Skybox на Babylon.js и JavaScript



Демка в песочнице

Код:
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Skybox. BabylonJS, JavaScript</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon.js"></script>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
 
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", 90 * Math.PI / 180, 70 * Math.PI / 180, 3,
            new BABYLON.Vector3(0, 0.5, 0), scene);
        camera.attachControl(canvas, true);
        camera.wheelPrecision = 100;
        const light = new BABYLON.HemisphericLight("hemisphericLight", new BABYLON.Vector3(0.1, 1, 0.2), scene);
 
        const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 2, height: 2 }, scene);
        const box = BABYLON.MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, scene);
        box.position.y = 0.25;
        const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.5 }, scene);
        sphere.position.y = 0.75;
 
        const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, this.scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", this.scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "images/skybox_px.jpg",
            "images/skybox_py.jpg",
            "images/skybox_pz.jpg",
            "images/skybox_nx.jpg",
            "images/skybox_ny.jpg",
            "images/skybox_nz.jpg",
        ];
        skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, this.scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;
 
        engine.runRenderLoop(() => { scene.render(); });
        window.onresize = () => engine.resize();
    </script>
</body>
 
</html>
Вложения
Тип файла: zip skybox-babylonjs-js.zip (88.9 Кб, 1 просмотров)
8Observer8 вне форума Ответить с цитированием
Старый 22.11.2021, 00:52   #9
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

Падающие кубики. Matter.js, Babylon.js, JavaScript

Кубики падают на статические объекты.



index.html

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

<head>
    <meta charset="UTF-8">

    <title>Falling Boxes. MatterJS, BabylonJS, JavaScript</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/matter-js@0.14.2/build/matter.min.js"></script>

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

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>

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

    <script>
        let boxBody1, boxBody2;
        let matterEngine;

        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("arcCamera",
            BABYLON.Tools.ToRadians(-90), BABYLON.Tools.ToRadians(90),
            15, new BABYLON.Vector3(0, 3, 0), scene);
        camera.attachControl(canvas, true);
        camera.wheelPrecision = 100;
        const light = new BABYLON.HemisphericLight("hemisphericLight", new BABYLON.Vector3(0.1, 1, -0.3), scene);

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

        const box1 = BABYLON.MeshBuilder.CreateBox("box1", { width: 1, height: 1, depth: 1 }, scene);
        box1.position.x = 2;
        box1.position.y = 4;

        const box2 = BABYLON.MeshBuilder.CreateBox("box2", { width: 1, height: 1, depth: 1 }, scene);
        box2.position.x = -1.5;
        box2.position.y = 4;

        const staticSphere = BABYLON.MeshBuilder.CreateSphere("staticSphere", { diameter: 1 }, scene);
        staticSphere.position.x = 2;
        staticSphere.position.y = 0.5;

        const staticBox = BABYLON.MeshBuilder.CreateBox("staticBox", { width: 1, height: 1, depth: 1 }, scene);
        staticBox.position.x = -2;
        staticBox.position.y = 0.5;

        const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "images/skybox_px.jpg",
            "images/skybox_py.jpg",
            "images/skybox_pz.jpg",
            "images/skybox_nx.jpg",
            "images/skybox_ny.jpg",
            "images/skybox_nz.jpg",
        ];
        skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;

        engine.runRenderLoop(() => { scene.render(); });

        matterEngine = Matter.Engine.create();
        matterEngine.world.gravity.y = -1;
        this.createWallsAndFloor();
        this.createPhysicsSimulation();

        window.onresize = () => engine.resize();

        function createWallsAndFloor()
        {
            boxBody1 = Matter.Bodies.rectangle(200, 400, 100, 100);
            boxBody2 = Matter.Bodies.rectangle(-150, 400, 100, 100);
            const staticSphereBody = Matter.Bodies.circle(200, 50, 50, { isStatic: true });
            const staticBoxBody = Matter.Bodies.rectangle(-200, 50, 100, 100, { isStatic: true });
            const ground = Matter.Bodies.rectangle(0, -50, 500, 100, { isStatic: true });
            Matter.World.add(matterEngine.world, [ground, boxBody1, boxBody2,
                staticSphereBody, staticBoxBody]);
        }

        function createPhysicsSimulation()
        {
            setInterval(
                () =>
                {
                    this.updatePhysics();
                }, 15);
        }

        function updatePhysics()
        {
            Matter.Engine.update(matterEngine);

            box1.position.x = boxBody1.position.x / 100;
            box1.position.y = boxBody1.position.y / 100;
            box1.rotation.z = boxBody1.angle;

            box2.position.x = boxBody2.position.x / 100;
            box2.position.y = boxBody2.position.y / 100;
            box2.rotation.z = boxBody2.angle;
        }
    </script>
</body>

</html>
Вложения
Тип файла: zip falling-boxes-matterjs-bjs-js.zip (89.8 Кб, 1 просмотров)
8Observer8 вне форума Ответить с цитированием
Старый 22.11.2021, 17:41   #10
8Observer8
Старожил
 
Аватар для 8Observer8
 
Регистрация: 02.01.2011
Сообщений: 3,322
По умолчанию

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

Box.ts

[JS]
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;
}
}
[/JS]
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