Форум программистов, компьютерный форум, киберфорум
Наши страницы
Программирование графики
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
1

Проекты на Three.js и Babylon.js

11.01.2018, 00:34. Просмотров 1044. Ответов 6

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

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

Getting Started (Three.js)

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

Исходники

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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

Исходники

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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>
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.01.2018, 00:34
Ответы с готовыми решениями:

При обращении к словарю Babylon система зависает
При обращении к словарю Babylon система зависает так, что невозможно даже запустить Диспетчер...

проекты
Пользовательский интерфейс приложения составляют: A) Программные коды, которые разработчик...

Проекты c#
Мужики подскажите какой нибудь сайт, на котором присутствует большое кол-во исходников, всяческих...

Не компилируются проекты
В студии писались проекты, они сохранены. переустановлена система, но студия упорно отказывается...

Проекты и солюшин
У меня такая проблема: как в солюшине связать два и больше проектов чтоб можно било использовать...

6
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
04.02.2018, 13:35  [ТС] 2
Загрузка текстурированного объекта 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
Просмотров: 95

Размер: 9.8 Кб
0
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
05.02.2018, 14:47  [ТС] 3
Снеговики из встроенных сфер и конусов на Three.js

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

Проекты на Three.js и Babylon.js
0
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
01.03.2018, 22:33  [ТС] 4
Загрузка плоскости с Normal Map из Blender'а в Babylon.js

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

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


Название: baking-normal-map.png
Просмотров: 66

Размер: 153.7 Кб

index.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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
Javascript
1
2
3
4
5
6
7
"use strict";
 
function main()
{
    Scene.Create("renderCanvas");
}
window.onload = main;
Scene.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
"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;
}());
0
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
04.03.2018, 18:12  [ТС] 5
Забыл добавить в сообщение выше style.css:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
 
#renderCanvas {
    touch-action: none;
    width: 100%;
    height: 100%;
}
0
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
13.06.2018, 22:49  [ТС] 6
Наверняка есть (или будут) те кто изучает движок Babylon.js, язык TypeScript и при этом хотел бы размещать в песочнице примеры с несколькими файлами, чтобы можно было что-то спрашивать на форуме, прикладывая пример, который демонстрирует вопрос или проблему. Те кто хочет помочь на форуме могли бы запускать пример, тут же вносить изменения, сохранять и отсылать ссылку обратно. Я сделал заготовку из примера из документации "Getting Started", который представлен там на языке TypeScript. Берите пример за основу. Пример состоит из нескольких файлов: main.ts и класс Game.ts https://plnkr.co/edit/yAiNRsquPAYfXbnr8yYU?p=preview

Проекты на Three.js и Babylon.js


index.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
 
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <title>BabylonJS and TypeScript</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 data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
</body>
 
</html>
main.ts
Javascript
1
2
3
4
5
6
7
8
9
10
import { Game } from "./Game";
 
// Create the game using the 'renderCanvas'.
let game = new Game('renderCanvas');
 
// Create the scene.
game.createScene();
 
// Start render loop.
game.doRender();
Game.ts
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
export class Game
{
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.FreeCamera;
    private _light: BABYLON.Light;
 
    constructor(canvasElement : string)
    {
        // Create canvas and engine.
        this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
    }
 
    createScene() : void
    {
        // Create a basic BJS Scene object.
        this._scene = new BABYLON.Scene(this._engine);
 
        // Create a FreeCamera, and set its position to (x:0, y:5, z:-10).
        this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);
 
        // Target the camera to scene origin.
        this._camera.setTarget(BABYLON.Vector3.Zero());
 
        // Attach the camera to the canvas.
        this._camera.attachControl(this._canvas, false);
 
        // Create a basic light, aiming 0,1,0 - meaning, to the sky.
        this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);
 
        // Create a built-in "sphere" shape; with 16 segments and diameter of 2.
        let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1',
                                {segments: 16, diameter: 2}, this._scene);
 
        // Move the sphere upward 1/2 of its height.
        sphere.position.y = 1;
 
        // Create a built-in "ground" shape.
        let ground = BABYLON.MeshBuilder.CreateGround('ground1',
                                {width: 6, height: 6, subdivisions: 2}, this._scene);
    }
 
    doRender() : void
    {
        // Run the render loop.
        this._engine.runRenderLoop(() =>
        {
            this._scene.render();
        });
 
        // The canvas/window resize event handler.
        window.addEventListener('resize', () =>
        {
            this._engine.resize();
        });
    }
}
tsconfig.json
JSON
1
2
3
4
5
6
7
8
9
{
    "files": [
        "main.ts",
        "Game.ts"
    ],
    "compilerOptions": {
        "module": "amd"
    }
}
0
8Observer8
3222 / 1749 / 311
Регистрация: 05.10.2013
Сообщений: 5,453
Записей в блоге: 115
01.07.2019, 01:47  [ТС] 7
Пример дружбы TypeScript с Three.js

Пример я переписал на TypeScript из официальной документации, отсюда: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

Песочница на TypeScript

Исходники в архиве: getting-started-with-threejs-and-typescript.zip

Исходники на GitHub

Исходные файлы


package.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    "name": "getting-started-with-threejs",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "debug": "tsc -p tsconfig.debug.json",
        "compile": "tsc -p tsconfig.release.json",
        "bundle": "browserify public/js/Program.js -o public/js/bundle.js",
        "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
        "release": "npm run compile && npm run bundle && npm run minify"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "three": "^0.106.2"
    },
    "devDependencies": {
        "@types/requirejs": "^2.1.31"
    }
}
tsconfig.debug.json

JSON
1
2
3
{
    "extends": "./tsconfig.json"
}
tsconfig.release.json

JSON
1
2
3
4
5
6
7
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": false
    }
}
style.css

CSS
1
2
3
4
5
6
7
8
body {
    margin: 0;
}
 
canvas {
    width: 100%;
    height: 100%
}
index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
 
    <title>Three.js - Getting Started</title>
 
    <link rel="stylesheet" href="css/style.css">
 
    <!-- Debug and Playground-Plunker Version -->
    <script data-main="js/RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
 
    <!-- Release Version -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
 
</body>
 
</html>
Game.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import * as THREE from "three";
 
export class Game
{
    private _cube: THREE.Mesh;
    private _renderer: THREE.WebGLRenderer;
    private _scene: THREE.Scene;
    private _camera: THREE.PerspectiveCamera;
 
    public constructor()
    {
        this._scene = new THREE.Scene();
 
        this._camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        this._camera.position.z = 5;
 
        this._renderer = new THREE.WebGLRenderer();
        this._renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(this._renderer.domElement);
 
        let geometry = new THREE.BoxGeometry(1, 1, 1);
        let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        this._cube = new THREE.Mesh(geometry, material);
        this._scene.add(this._cube);
    }
 
    public Animate(): void
    {
        requestAnimationFrame(() => this.Animate());
 
        this._cube.rotation.x += 0.1;
        this._cube.rotation.y += 0.1;
 
        this._renderer.render(this._scene, this._camera);
    }
}
Program.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Game } from "./Game";
 
// Playground: https://next.plnkr.co/edit/YXLIamSsUH8k1E3r?preview
 
class Program
{
    public static Main(): void
    {
        let game = new Game();
        game.Animate();
    }
}
 
// Debug and Playground-Plunker Version
Program.Main();
 
// Release Version
// window.onload = () => Program.Main();
RequireConfig.ts

Javascript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "js",
    paths: {
        "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min"
    }
});
 
requirejs(["Program"], (Program) => { });
launch.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/public"
        }
    ]
}
0
01.07.2019, 01:47
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.07.2019, 01:47

Проекты с SQLite
Начал работать с SQLite, все вроде нормально, но выяснились следующие неприятные моменты: - надо...

Проекты не компилируются
Доброго времени суток. Оговорюсь сразу, в программирования я полный ноль, знаю лишь простенькие...

Высоконагруженные проекты
Доброе время суток. Появилась задача создать базу данных, в которой будет содержаться огромное...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru