5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
1

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

11.01.2018, 00:34. Показов 9556. Ответов 38

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

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

Getting Started (Three.js)

Песочница: https://plnkr.co/edit/vaiCvJNy... ?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/HUdxpwY3... ?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
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2018, 00:34
Ответы с готовыми решениями:

Babylon JS Не отображается текстура skybox
Я только начал изучать Babylon JS, и столкнулся с проблемой. Изучая данный...

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

Поиск в Google перескакивает в utils.babylon (Firefox)
При любом поиске в гугле сначала выходит собственно результат поиска, а через секунду перескакивает...

Проекты, не видят другие проекты в одном решении
Столкнулся с такой проблемой, что проекты не видят друг друга в одном решении, пишу комплексное...

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

38
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
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/Owc6rAOw... ?p=preview
Исходники архивом: textured-cube.zip
Blender проект: cube.blend.zip
GIMP проект: cube.gimp.zip

Название: textured-cube.png
Просмотров: 568

Размер: 9.8 Кб
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
05.02.2018, 14:47  [ТС] 3
Снеговики из встроенных сфер и конусов на Three.js

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

Проекты на Three.js и Babylon.js
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
01.03.2018, 22:33  [ТС] 4
Загрузка плоскости с Normal Map из Blender'а в Babylon.js

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

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


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

Размер: 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
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
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
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
13.06.2018, 22:49  [ТС] 6
Наверняка есть (или будут) те кто изучает движок Babylon.js, язык TypeScript и при этом хотел бы размещать в песочнице примеры с несколькими файлами, чтобы можно было что-то спрашивать на форуме, прикладывая пример, который демонстрирует вопрос или проблему. Те кто хочет помочь на форуме могли бы запускать пример, тут же вносить изменения, сохранять и отсылать ссылку обратно. Я сделал заготовку из примера из документации "Getting Started", который представлен там на языке TypeScript. Берите пример за основу. Пример состоит из нескольких файлов: main.ts и класс Game.ts https://plnkr.co/edit/yAiNRsqu... ?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
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
01.07.2019, 01:47  [ТС] 7
Пример дружбы TypeScript с Three.js

Пример я переписал на TypeScript из официальной документации, отсюда: https://threejs.org/docs/#manu... ng-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
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
04.06.2020, 08:11  [ТС] 8
Пример загрузки анимированной модели из формата glTF 2.0 на TypeScript и движке Babylon.js

Название: gates-babylonjs-typescript.gif
Просмотров: 439

Размер: 557.7 Кб

Скачать исходники: gates-babylonjs-typescript.zip (6.9 Кб)

Мой пример на бесплатном движке Babylon.js и языке TypeScript, который показывает как загружать анимированную модель из формата glTF 2.0 и располагать проект в песочнице Plunker в нескольких файлах исходного кода

Запустить в песочнице Plunker: https://plnkr.co/edit/WEMBjkkJJbHgVPVJ?preview

Запустить release-версию собранная в bundle.min.js с помощью Browserify и UglifyJS: https://8observer8.github.io/babylonjs-ts/gates/

Для сборки проекта из исходников в релиз (в файл bundle.min.js) и для пошаговой отладки с помощью точек останова читайте мою инструкцию: Пример загрузки анимированной модели из формата glTF 2.0 на TypeScript и движке Babylon.js
Вложения
Тип файла: zip gates-babylonjs-typescript.zip (6.9 Кб, 17 просмотров)
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
19.11.2021, 13:40  [ТС] 9
Skybox на Babylon.js и JavaScript

Название: skybox-babylonjs-js-compressed.gif
Просмотров: 596

Размер: 924.4 Кб

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

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
<!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 Кб, 3 просмотров)
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
20.11.2021, 16:29  [ТС] 10
Skybox на Babylon.js и TypeScript с инструкцией по сборке



- Install globally these packages: `npm i -g typescript uglify-js browserify http-server`
- Install local packages: `npm i`

Debug build:
- public/index.html
HTML5
1
2
3
4
5
    <!-- Debug -->
    <script data-main="js/requireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
- src/client/main.ts
Javascript
1
2
3
4
5
// Debug
main();
 
// Release
// window.onload = () => main();
- `npm run debug`
- Run `http-server` and go to browser: `http://localhost:8080/index.html`

Release build:
HTML5
1
2
3
4
5
    <!-- Debug -->
    <!-- <script data-main="js/requireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
    <!-- Release -->
    <script src="js/bundle.min.js"></script>
- src/client/main.ts
Javascript
1
2
3
4
5
// Debug
// main();
 
// Release
window.onload = () => main();
- `npm run release`
- Run `http-server` and go to browser: `http://localhost:8080/index.html`

Source code:

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
23
24
{
  "name": "skybox-babylonjs-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "tsc -p tsconfigs/tsconfig.debug.json",
    "compile": "tsc -p tsconfigs/tsconfig.release.json",
    "bundle": "browserify public/js/main.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": {
    "babylonjs": "^4.2.0",
    "requirejs": "^2.3.6"
  },
  "devDependencies": {
    "@types/requirejs": "^2.1.32"
  }
}
tsconfigs/tsconfig.debug.json
JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": true,
        "types": [
            "babylonjs",
            "requirejs"
        ],
        "lib": [
            "DOM",
            "ES2015"
        ]
    }
}
tsconfigs/tsconfig.release.json
JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "sourceMap": false,
        "types": [
            "node"
        ]
    },
    "exclude": [
        "../src/client/requireConfig.ts"
    ]
}
public/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
33
34
35
36
37
38
39
<!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>Skybox. Babylon.js, TypeScript</title>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            touch-action: none;
            width: 100%;
            height: 100%;
        }
    </style>
 
    <!-- Debug -->
    <script data-main="js/requireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
</body>
 
</html>
src/client/main.ts
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
import Scene3D from "./Scene3D";
 
function main()
{
    new Scene3D("renderCanvas");
}
 
// Debug
main();
 
// Release
// window.onload = () => main();
src/client/requireConfig.ts
Javascript
1
2
3
4
5
6
7
8
requirejs.config({
    baseUrl: "js",
    paths: {
        "babylonjs": "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon"
    }
});
 
requirejs(["main"], () => { });
src/client/Scene3D.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
60
61
import * as BABYLON from "babylonjs";
 
export default class Scene3D
{
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
 
    public constructor(canvasName: string)
    {
        const canvas = document.getElementById(canvasName) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(canvas, true);
        this._scene = this.createScene(canvas);
 
        window.onresize = () => this._engine.resize();
        this.doRender();
    }
 
    private createScene(canvas: HTMLCanvasElement): BABYLON.Scene
    {
        const scene = new BABYLON.Scene(this._engine);
 
        const camera = new BABYLON.ArcRotateCamera("arcCamera",
            BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(70),
            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 }, scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "https://www.cyberforum.ru/images/skybox_px.jpg",
            "https://www.cyberforum.ru/images/skybox_py.jpg",
            "https://www.cyberforum.ru/images/skybox_pz.jpg",
            "https://www.cyberforum.ru/images/skybox_nx.jpg",
            "https://www.cyberforum.ru/images/skybox_ny.jpg",
            "https://www.cyberforum.ru/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;
 
        return scene;
    }
 
    private doRender(): void
    {
        this._engine.runRenderLoop(() => this._scene.render());
    }
}
Вложения
Тип файла: zip skybox-babylonjs-ts.zip (95.9 Кб, 0 просмотров)
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
21.11.2021, 13:49  [ТС] 11
Skybox на Babylon.js и JavaScript со сборщиком Browserify



- Установить глобально эти пакеты: `npm i -g uglify-js browserify http-server`
- Установить локальные пакеты: `npm i`

Debug сборка:

- public/index.html
HTML5
1
2
3
4
    <!-- Debug -->
    <script src="js/bundle.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
- `npm run debug`
- Запускаем `http-server` и переходим в браузер: `http://localhost:8080/index.html`

Release сборка:

- public/index.html
HTML5
1
2
3
4
    <!-- Debug -->
    <!-- <script src="js/bundle.js"></script> -->
    <!-- Release -->
    <script src="js/bundle.min.js"></script>
- `npm run release`
- Запускаем `http-server` и переходим в браузер: `http://localhost:8080/index.html`

Исходный код:

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": "skybox-babylonjs-browserify-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clear": "del /f /q /s .\\public\\js\\*.*",
    "del-bundle": "del /f /q /s .\\src\\client\\bundle.js",
    "bundle-debug": "browserify --debug src/client/main.js -o public/js/bundle.js",
    "bundle-release": "browserify src/client/main.js -o src/client/bundle.js",
    "uglify": "uglifyjs src/client/bundle.js -o public/js/bundle.min.js",
    "debug": "npm run bundle-debug",
    "release": "npm run clear && npm run bundle-release && npm run uglify && npm run del-bundle"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babylonjs": "^4.2.0"
  }
}
.gitignore
Код
node_modules/
public/js/
public/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
33
34
35
36
37
38
<!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>Skybox. Babylon.js, Browserify, JavaScript</title>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
 
    <!-- Debug -->
    <script src="js/bundle.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
</body>
 
</html>
src/client/main.js
Javascript
1
2
3
4
5
6
7
8
const Scene3D = require("./Scene3D");
 
function main()
{
    new Scene3D("renderCanvas");
}
 
window.onload = () => main();
src/client/Scene3D.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
const BABYLON = require("babylonjs");
 
class Scene3D
{
    constructor(canvasName)
    {
        const canvas = document.getElementById(canvasName);
        this._engine = new BABYLON.Engine(canvas, true);
        this._scene = this.createScene(canvas);
 
        window.onresize = () => this._engine.resize();
        this.doRender();
    }
 
    createScene(canvas)
    {
        const scene = new BABYLON.Scene(this._engine);
 
        const camera = new BABYLON.ArcRotateCamera("arcCamera",
            BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(70),
            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 }, scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "https://www.cyberforum.ru/images/skybox_px.jpg",
            "https://www.cyberforum.ru/images/skybox_py.jpg",
            "https://www.cyberforum.ru/images/skybox_pz.jpg",
            "https://www.cyberforum.ru/images/skybox_nx.jpg",
            "https://www.cyberforum.ru/images/skybox_ny.jpg",
            "https://www.cyberforum.ru/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;
 
        return scene;
    }
 
    doRender()
    {
        this._engine.runRenderLoop(() => this._scene.render());
    }
}
 
module.exports = Scene3D;
Вложения
Тип файла: zip skybox-babylonjs-browserify-js.zip (91.5 Кб, 2 просмотров)
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
22.11.2021, 00:48  [ТС] 12
Падающие кубики. Matter.js, Babylon.js, JavaScript

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

Название: falling-boxes-matterjs-bjs-ts.gif
Просмотров: 359

Размер: 183.3 Кб

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!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 = [
            "https://www.cyberforum.ru/images/skybox_px.jpg",
            "https://www.cyberforum.ru/images/skybox_py.jpg",
            "https://www.cyberforum.ru/images/skybox_pz.jpg",
            "https://www.cyberforum.ru/images/skybox_nx.jpg",
            "https://www.cyberforum.ru/images/skybox_ny.jpg",
            "https://www.cyberforum.ru/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 Кб, 5 просмотров)
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
22.11.2021, 17:40  [ТС] 13
Пример комбинации графики на Babylon.js и физики на Matter.js в классе на TypeScript

Box.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
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;
    }
}
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
22.11.2021, 19:42  [ТС] 14
Падающие кубики. Babylon.js, Matter.js, TypeScript

Название: falling-boxes-matterjs-babylonjs-ts.gif
Просмотров: 333

Размер: 268.2 Кб
  • Установите глобально следующие пакеты командой:
    npm i -g typescript uglify-js browserify http-server
  • Перейдите в папку проекта
  • Установите локальные пакеты из package.json командой:
    npm i

Отладочная сборка:
  • public/index.html
    HTML5
    1
    2
    3
    4
    5
    
        <!-- Debug -->
        <script data-main="js/requireConfig"
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
        <!-- Release -->
        <!-- <script src="js/bundle.min.js"></script> -->
  • src/client/main.ts
    Javascript
    1
    2
    3
    4
    5
    
    // Debug
    main();
     
    // Release
    // window.onload = () => main();
  • Запустите команду:

    npm run debug
  • Запустите команду
    http-server
    и перейдите в браузер: http://localhost:8080/index.html

Сборка в релиз Release:
  • public/index.html

    HTML5
    1
    2
    3
    4
    5
    
        <!-- Debug -->
        <!-- <script data-main="js/requireConfig"
            src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> -->
        <!-- Release -->
        <script src="js/bundle.min.js"></script>
  • src/client/main.ts

    Javascript
    1
    2
    3
    4
    5
    
    // Debug
    // main();
     
    // Release
    window.onload = () => main();
  • Запустите команду:

    npm run release
  • Запустите команду
    http-server
    и перейдите в браузер: http://localhost:8080/index.html

Исходники:

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
23
24
25
26
{
  "name": "falling-boxes-matterjs-babylonjs-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "tsc -p tsconfigs/tsconfig.debug.json",
    "compile": "tsc -p tsconfigs/tsconfig.release.json",
    "bundle": "browserify public/js/main.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": {
    "babylonjs": "^4.2.0",
    "matter-js": "^0.16.1",
    "requirejs": "^2.3.6"
  },
  "devDependencies": {
    "@types/matter-js": "^0.14.10",
    "@types/requirejs": "^2.1.32"
  }
}
tsconfigs/tsconfig.debug.json
JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": true,
        "types": [
            "babylonjs",
            "matter-js",
            "requirejs"
        ],
        "lib": [
            "DOM",
            "ES2015"
        ]
    }
}
tsconfigs/tsconfig.json

JSON
1
2
3
4
5
6
7
8
9
{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "../public/js"
    },
    "include": [
        "../src/client/**/*.ts"
    ]
}
tsconfigs/tsconfig.release.json

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "sourceMap": false,
        "types": [
            "node"
        ]
    },
    "exclude": [
        "../src/client/requireConfig.ts"
    ]
}
public/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
33
34
35
36
37
38
39
<!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>Falling Boxes. Babylon.js, Matter.js, TypeScript</title>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            touch-action: none;
            width: 100%;
            height: 100%;
        }
    </style>
 
    <!-- Debug -->
    <script data-main="js/requireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
</body>
 
</html>
src/client/Box.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
import * as BABYLON from "babylonjs";
import * as Matter from "matter-js";
 
export default class Box
{
    protected _box: BABYLON.Mesh;
    private _body: Matter.Body;
    private _ratio: number;
 
    public constructor(x: number, y: number, width: number, height: number,
        depth: number, isStatic: boolean, ratio: number, 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._ratio = ratio;
 
        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;
    }
}
src/client/main.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
import Scene3D from "./Scene3D";
 
function main()
{
    new Scene3D("renderCanvas");
}
 
// Debug
main();
 
// Release
// window.onload = () => main();
src/client/requireConfig.ts

Javascript
1
2
3
4
5
6
7
8
9
requirejs.config({
    baseUrl: "js",
    paths: {
        "babylonjs": "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon",
        "matter-js": "https://cdn.jsdelivr.net/npm/matter-js@0.14.2/build/matter.min"
    }
});
 
requirejs(["main"], () => { });
src/client/Scene3D.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
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
89
90
91
92
93
94
95
96
97
98
99
100
import * as BABYLON from "babylonjs";
import * as Matter from "matter-js";
import Box from "./Box";
import Sphere from "./Sphere";
 
export default class Scene3D
{
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _matterEngine: Matter.Engine;
    private _box1: Box;
    private _box2: Box;
    private RATIO = 100;
 
    public constructor(canvasName: string)
    {
        this._matterEngine = Matter.Engine.create();
        this._matterEngine.world.gravity.y = -1;
 
        const canvas = document.getElementById(canvasName) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(canvas, true);
        this._scene = this.createScene(canvas);
 
        window.onresize = () => this._engine.resize();
 
        this.createWallsAndFloor();
        this.createPhysicsSimulation();
 
        this.doRender();
    }
 
    private createScene(canvas: HTMLCanvasElement): BABYLON.Scene
    {
        const scene = new BABYLON.Scene(this._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);
 
        this._box1 = new Box(2, 4, 1, 1, 1, false, this.RATIO, this._matterEngine, scene);
        this._box2 = new Box(-1.5, 4, 1, 1, 1, false, this.RATIO, this._matterEngine, scene);
 
        const staticSphere = new Sphere(2, 0.5, 1, true, this.RATIO, this._matterEngine, scene);
        const staticBox = new Box(-2, 0.5, 1, 1, 1, true, this.RATIO, this._matterEngine, scene);
        const ground = new Box(0, -0.5, 10, 1, 2, true, this.RATIO, this._matterEngine, scene);
 
        const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "https://www.cyberforum.ru/images/skybox_px.jpg",
            "https://www.cyberforum.ru/images/skybox_py.jpg",
            "https://www.cyberforum.ru/images/skybox_pz.jpg",
            "https://www.cyberforum.ru/images/skybox_nx.jpg",
            "https://www.cyberforum.ru/images/skybox_ny.jpg",
            "https://www.cyberforum.ru/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;
 
        return scene;
    }
 
    private createWallsAndFloor(): void
    {
        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(this._matterEngine.world, [ground, staticSphereBody, staticBoxBody]);
    }
 
    private doRender(): void
    {
        this._engine.runRenderLoop(() => this._scene.render());
    }
 
    private createPhysicsSimulation(): void
    {
        setInterval(
            () =>
            {
                this.updatePhysics();
            }, 15);
    }
 
    private updatePhysics(): void
    {
        Matter.Engine.update(this._matterEngine);
        this._box1.update();
        this._box2.update();
    }
}
src/client/Sphere.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
import * as BABYLON from "babylonjs";
import * as Matter from "matter-js";
 
export default class Sphere
{
    protected _sphere: BABYLON.Mesh;
    private _body: Matter.Body;
    private _ratio: number;
 
    public constructor(x: number, y: number, diameter: number,
        isStatic: boolean, ratio: number, matterEngine: Matter.Engine, scene: BABYLON.Scene)
    {
        this._sphere = BABYLON.MeshBuilder.CreateSphere("sphere",
            { diameter: diameter }, scene);
        this._sphere.position.x = x;
        this._sphere.position.y = y;
 
        this._ratio = ratio;
 
        this._body = Matter.Bodies.circle(x * this._ratio, y * this._ratio,
            diameter / 2 * this._ratio, { isStatic: isStatic });
        Matter.World.add(matterEngine.world, this._body);
    }
 
    public update(): void
    {
        this._sphere.position.x = this._body.position.x / this._ratio;
        this._sphere.position.y = this._body.position.y / this._ratio;
        this._sphere.rotation.z = this._body.angle;
    }
}
Вложения
Тип файла: zip falling-boxes-matterjs-babylonjs-ts.zip (101.5 Кб, 0 просмотров)
0
219 / 22 / 2
Регистрация: 12.06.2021
Сообщений: 205
Записей в блоге: 2
21.01.2022, 07:19 15
Примеры работы камеры на babylon из меню выбираете с какого ракурса показать сцену.
Камера №1: https://codepen.io/Smith37/pen/zYEVdJZ
Камера №2: https://codepen.io/Smith37/pen/MWEMvPy
Проекты на Three.js и Babylon.js
1
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
21.01.2022, 12:50  [ТС] 16
Olga28, всегда, когда даёте ссылки на песочницы, то копируйте весь код на форум, а если есть текстуры и модели, то прикладывайте их тоже, например, в виде архива. Так как внешние ссылки могут со временем умереть или вы случайно затрёте изначальный код.

Не забывайте форматировать код. Плохо форматированный код тяжело читать. Один из самых лучших редакторов кода для браузерных игр и разработки сайтов - VSCode (https://code.visualstudio.com/). Для автоматического форматирования кода используйте сочетание клавиш: Alt + Shift + F

Мне не нравится CodePan. Лучше используйте Plunker: https://plnkr.co/ Я попробовал большое количество песочниц и Plunker - самая лучшая. В неё можно копировать код файлами и загружать игровые ассеты перетаскиванием с помощью мыши: текстуры, звуковые файлы, 3D-модели, спрайт листы и т.д. Plunker - это отличное место для демонстраций каких-то фишек и проблем для форума. Ниже я перенёс ваши примеры на Plunker, отформатировал код в VSCode (Alt + Shift + F) и скопировал код на форум.

Камера №1: https://plnkr.co/edit/iKVLGEt7OTOi59Iz?preview

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
<!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>Babylon FPS</title>
 
    <link rel="stylesheet" href="css/style.css">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://1olgastorm.github.io/pointerLock.js"></script>
    <script src="js/main.js"></script>
</head>
 
<body>
 
    <canvas id="renderCanvas"></canvas>
</body>
 
</html>
js/main.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
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 ()
    {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0, 0, .2);
 
        var camera1 = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 20, -50), scene);
        camera1.setTarget(BABYLON.Vector3.Zero());
        camera1.attachControl(canvas, true);
 
        var camera2 = new BABYLON.ArcRotateCamera("camera2", -Math.PI / 4, 1.1, 65, BABYLON.Vector3.Zero());
        camera2.target = BABYLON.Vector3.Zero();
 
        var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
        light.groundColor = BABYLON.Color3.Gray();
 
        var faceColors = new Array(6);
 
        faceColors[0] = new BABYLON.Color4(1, 1, 0, 1);
        faceColors[1] = new BABYLON.Color4(0, 0, 1, 1);
        faceColors[2] = new BABYLON.Color4(1, 0, 0, 1);
        faceColors[3] = new BABYLON.Color4(1, 0, 1, 1);
        faceColors[4] = new BABYLON.Color4(0, 1, 1, 1);
        faceColors[5] = new BABYLON.Color4(1, 1, 1, 1);
 
        var options = {
            width: 10,
            height: 10,
            depth: 10,
            faceColors: faceColors
        };
 
        var box = BABYLON.MeshBuilder.CreateBox('box', options, scene);
        box.position.y = .5;
 
        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 500.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        var skyURL = "https://www.babylonjs-playground.com/textures/skybox3";
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(skyURL, scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;
 
 
        // add buttons
        var buttonbox = document.createElement('div');
        buttonbox.id = "buttonbox";
        buttonbox.style.position = "absolute";
        buttonbox.style.top = "140px";
        buttonbox.style.left = "85%";
        buttonbox.style.border = "5pt inset blue";
        buttonbox.style.padding = "2pt";
        buttonbox.style.paddingRight = "2pt";
        buttonbox.style.width = "10em";
        buttonbox.style.display = "block";
        document.body.appendChild(buttonbox);
 
 
        var tTag = document.createElement('div');
        tTag.id = "choose";
        tTag.textContent = "Cams:";
        tTag.style.textAlign = "center";
        tTag.style.border = "2pt solid gold";
        tTag.style.marginLeft = "1.5pt";
        tTag.style.marginTop = "3pt";
        tTag.style.marginBottom = "2pt";
        tTag.style.backgroundColor = "dodgerblue";
        tTag.style.width = "96%";
        tTag.style.fontSize = "1.0em";
        tTag.style.color = "white";
        buttonbox.appendChild(tTag);
 
 
        var b8 = document.createElement('button');
        b8.id = "uni";
        b8.textContent = "Universal Cam";
        b8.style.display = "block";
        b8.style.width = "100%";
        b8.style.fontSize = "1.1em";
        b8.style.cursor = "pointer";
        buttonbox.appendChild(b8);
        b8.onclick = function ()
        {
            setCamUniversal();
        }
 
        var b9 = document.createElement('button');
        b9.id = "arc";
        b9.textContent = "ArcRotate Cam";
        b9.style.display = "block";
        b9.style.width = "100%";
        b9.style.fontSize = "1.1em";
        b9.style.cursor = "pointer";
        buttonbox.appendChild(b9);
        b9.onclick = function ()
        {
            setCamArcRotate();
        }
 
        scene.onDispose = () =>
        {
            if (document.getElementById('buttonbox'))
            {
                document.getElementById('buttonbox').parentNode.removeChild(document.getElementById('buttonbox'));
            }
        }
 
        //-----------------------------------------------------------
        // camera activators
 
        var setCamUniversal = function ()
        {
            scene.activeCamera = camera1;
            camera1.attachControl(canvas, true);
        };
        var setCamArcRotate = function ()
        {
            scene.activeCamera = camera2;
            camera2.attachControl(canvas, true);
        };
 
        return scene;
    };
 
    // call the createScene function
    var scene = createScene();
    createPointerLock(scene);
    // run the render loop
    engine.runRenderLoop(function ()
    {
        scene.render();
    });
 
    // the canvas/window resize event handler
    window.addEventListener('resize', function ()
    {
        engine.resize();
    });
});
css/style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
Камера №2: https://plnkr.co/edit/xTTbcMNm7Gavb9YZ?preview

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>Babylon FPS</title>
 
    <link rel="stylesheet" href="css/style.css">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://1olgastorm.github.io/pointerLock.js"></script>
    <script src="js/main.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
</body>
 
</html>
js/main.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
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 ()
    {
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0, 0, .2);
 
        var camera = new BABYLON.ArcRotateCamera("CameraX", -Math.PI / 4, 1.1, 165, BABYLON.Vector3.Zero());
        camera.attachControl(canvas, true);
 
        var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
        light.groundColor = BABYLON.Color3.Gray();
 
        var faceColors = new Array(6);
 
        faceColors[0] = new BABYLON.Color4(1, 1, 0, 1);
        faceColors[1] = new BABYLON.Color4(0, 0, 1, 1);
        faceColors[2] = new BABYLON.Color4(1, 0, 0, 1);
        faceColors[3] = new BABYLON.Color4(1, 0, 1, 1);
        faceColors[4] = new BABYLON.Color4(0, 1, 1, 1);
        faceColors[5] = new BABYLON.Color4(1, 1, 1, 1);
 
        var options = {
            width: 10,
            height: 10,
            depth: 10,
            faceColors: faceColors
        };
 
        var box = BABYLON.MeshBuilder.CreateBox('box', options, scene);
        box.position.y = .5;
 
        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 500.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        var skyURL = "https://www.babylonjs-playground.com/textures/skybox2";
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(skyURL, scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;
 
 
        // add buttons
        var buttonbox = document.createElement('div');
        buttonbox.id = "buttonbox";
        buttonbox.style.position = "absolute";
        buttonbox.style.top = "60px";
        buttonbox.style.left = "85%";
        buttonbox.style.border = "5pt inset blue";
        buttonbox.style.padding = "2pt";
        buttonbox.style.paddingRight = "2pt";
        buttonbox.style.width = "10em";
        buttonbox.style.display = "block";
        document.body.appendChild(buttonbox);
 
 
        var tTag = document.createElement('div');
        tTag.id = "choose";
        tTag.textContent = "Cam Positions:";
        tTag.style.textAlign = "center";
        tTag.style.border = "2pt solid gold";
        tTag.style.marginLeft = "1.5pt";
        tTag.style.marginTop = "3pt";
        tTag.style.marginBottom = "2pt";
        tTag.style.backgroundColor = "dodgerblue";
        tTag.style.width = "96%";
        tTag.style.fontSize = "1.0em";
        tTag.style.color = "white";
        buttonbox.appendChild(tTag);
 
 
        var b8 = document.createElement('button');
        b8.id = "setLateralLeft";
        b8.textContent = "setLateralLeft";
        b8.style.display = "block";
        b8.style.width = "100%";
        b8.style.fontSize = "1.1em";
        buttonbox.appendChild(b8);
        b8.onclick = function ()
        {
            setCamLateralLeft();
        }
 
        var b9 = document.createElement('button');
        b9.id = "setLateralright";
        b9.textContent = "setLateralRight";
        b9.style.display = "block";
        b9.style.width = "100%";
        b9.style.fontSize = "1.1em";
        buttonbox.appendChild(b9);
        b9.onclick = function ()
        {
            setCamLateralRight();
        }
 
        var b10 = document.createElement('button');
        b10.id = "setAnterior";
        b10.textContent = "setAnterior";
        b10.style.display = "block";
        b10.style.width = "100%";
        b10.style.fontSize = "1.1em";
        buttonbox.appendChild(b10);
        b10.onclick = function ()
        {
            setCamAnterior();
        }
 
        var b11 = document.createElement('button');
        b11.id = "setPosterior";
        b11.textContent = "setPosterior";
        b11.style.display = "block";
        b11.style.width = "100%";
        b11.style.fontSize = "1.1em";
        buttonbox.appendChild(b11);
        b11.onclick = function ()
        {
            setCamPosterior();
        }
 
        var b12 = document.createElement('button');
        b12.id = "setSuperior";
        b12.textContent = "setSuperior";
        b12.style.display = "block";
        b12.style.width = "100%";
        b12.style.fontSize = "1.1em";
        buttonbox.appendChild(b12);
        b12.onclick = function ()
        {
            setCamSuperior();
        }
 
        var b13 = document.createElement('button');
        b13.id = "setInferior";
        b13.textContent = "setInferior";
        b13.style.display = "block";
        b13.style.width = "100%";
        b13.style.fontSize = "1.1em";
        buttonbox.appendChild(b13);
        b13.onclick = function ()
        {
            setCamInferior();
        }
 
        var b14 = document.createElement('button');
        b14.id = "setDefault";
        b14.textContent = "setDefault";
        b14.style.display = "block";
        b14.style.width = "100%";
        b14.style.fontSize = "1.1em";
        buttonbox.appendChild(b14);
        b14.onclick = function ()
        {
            setCamDefault();
        }
 
        scene.onDispose = () =>
        {
            if (document.getElementById('buttonbox'))
            {
                document.getElementById('buttonbox').parentNode.removeChild(document.getElementById('buttonbox'));
            }
        }
 
        //-----------------------------------------------------------
        // camera movers
 
        var animateCameraTargetToPosition = function (cam, speed, frameCount, newPos)
        {
            var ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            BABYLON.Animation.CreateAndStartAnimation('at5', cam, 'target', speed, frameCount, cam.target, newPos, 0, ease);
        }
 
        var animateCameraToPosition = function (cam, speed, frameCount, newPos)
        {
            var ease = new BABYLON.CubicEase();
            ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
            BABYLON.Animation.CreateAndStartAnimation('at4', cam, 'position', speed, frameCount, cam.position, newPos, 0, ease);
        }
 
        var speed = 45;
        var frameCount = 200;
 
        var setCamDefault = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 0, 0));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(-45, 55, -45));
        };
        var setCamLateralLeft = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(5, 15, 0));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(-85, 15, 0));
        };
        var setCamLateralRight = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(-5, 15, 0));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(85, 15, 0));
        };
        var setCamPosterior = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 15, -5));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 15, 85));
        };
        var setCamAnterior = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 15, 5));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 15, -85));
        };
        var setCamSuperior = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(.001, -5, .001));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, 85, 0));
        };
        var setCamInferior = function ()
        {
            animateCameraTargetToPosition(camera, speed, frameCount, new BABYLON.Vector3(.001, 5, .001));
            animateCameraToPosition(camera, speed, frameCount, new BABYLON.Vector3(0, -85, 0));
        };
 
        var forceRebuild = function () { camera.rebuildAnglesAndRadius(); };
        scene.onBeforeRenderObservable.add(forceRebuild);
 
        scene.executeWhenReady(function ()
        {
            setCamDefault();
        });
 
        return scene;
    };
 
    // call the createScene function
    var scene = createScene();
    createPointerLock(scene);
    // run the render loop
    engine.runRenderLoop(function ()
    {
        scene.render();
    });
 
    // the canvas/window resize event handler
    window.addEventListener('resize', function ()
    {
        engine.resize();
    });
});
css/style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
08.06.2022, 15:46  [ТС] 17
Исходники примера "Снеговики из встроенных сфер и конусов на Three.js" из сообщения #3



HTML5
1
2
3
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/uuhsly6ivcrrmbv/OrbitControls.js"></script>
    <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
CSS
1
2
3
4
5
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
function createScene()
{
    var stats = new Stats();
    document.body.appendChild(stats.domElement);
 
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(new THREE.Color(0x00bfff));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
    var scene = new THREE.Scene();
 
    var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight);
    camera.position.set(2, 2, 6.5);
    scene.add(camera);
 
    var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
    orbitControls.target.set(1.2, 1, 0);
 
    var light = new THREE.AmbientLight(0xffffff, 0.7);
    scene.add(light);
 
    var light2 = new THREE.DirectionalLight(0xffffff, 1);
    light2.position.set(3, 2, 3);
    light2.castShadow = true;
    scene.add(light2);
 
    var groundGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
    var groundMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
    var ground = new THREE.Mesh(groundGeometry, groundMaterial);
    ground.rotation.x = -90 * Math.PI / 180;
    ground.receiveShadow = true;
    scene.add(ground);
 
    function render()
    {
        orbitControls.update();
        stats.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();
 
    return scene;
}
 
function drawSnowman(x, y, z, scene)
{
    var bodyRadius = 1;
    var body = new THREE.Mesh(new THREE.SphereGeometry(bodyRadius, 16, 16), new THREE.MeshPhongMaterial());
    body.position.set(x, y + bodyRadius, z);
    body.castShadow = true;
    body.receiveShadow = true;
    scene.add(body);
 
    var headRadius = 0.5;
    var head = new THREE.Mesh(new THREE.SphereGeometry(headRadius, 16, 16), new THREE.MeshPhongMaterial());
    head.position.set(x, y + bodyRadius * 2 + headRadius - headRadius / 5, z);
    head.castShadow = true;
    head.receiveShadow = true;
    scene.add(head);
 
    var noseHeight = 0.5;
    var nose = new THREE.Mesh(new THREE.ConeGeometry(0.2, 1, 16), new THREE.MeshPhongMaterial({ color: 0xffa500 }));
    nose.position.set(x, head.position.y, z + headRadius);
    nose.rotation.x = 90 * Math.PI / 180;
    nose.castShadow = true;
    nose.receiveShadow = true;
    scene.add(nose);
 
    var eyeRadius = 0.07;
    var eyeAngle = 35;
 
    var leftEye = new THREE.Mesh(new THREE.SphereGeometry(eyeRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
    leftEye.position.set(
        x + headRadius * Math.sin(THREE.Math.degToRad(eyeAngle)) * Math.cos(THREE.Math.degToRad(eyeAngle)),
        headRadius * Math.sin(THREE.Math.degToRad(eyeAngle)) * Math.sin(THREE.Math.degToRad(eyeAngle)) + head.position.y,
        z + headRadius * Math.cos(THREE.Math.degToRad(eyeAngle)));
    scene.add(leftEye);
 
    var rightEye = new THREE.Mesh(new THREE.SphereGeometry(eyeRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
    rightEye.position.set(
        x + headRadius * Math.sin(THREE.Math.degToRad(-eyeAngle)) * Math.cos(THREE.Math.degToRad(-45)),
        headRadius * Math.sin(THREE.Math.degToRad(-eyeAngle)) * Math.sin(THREE.Math.degToRad(-eyeAngle)) + head.position.y,
        z + headRadius * Math.cos(THREE.Math.degToRad(-eyeAngle)));
    scene.add(rightEye);
 
    var buttonRadius = 0.1;
    var buttonAngle = 25;
 
    var button0 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
    button0.position.set(
        x,
        bodyRadius * Math.sin(THREE.Math.degToRad(buttonAngle)) + body.position.y,
        z + bodyRadius * Math.cos(THREE.Math.degToRad(buttonAngle)));
    scene.add(button0);
 
    var button1 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
    button1.position.set(
        x,
        body.position.y,
        z + bodyRadius);
    scene.add(button1);
 
    var button2 = new THREE.Mesh(new THREE.SphereGeometry(buttonRadius), new THREE.MeshPhongMaterial({ color: 0x000000 }));
    button2.position.set(
        x,
        bodyRadius * Math.sin(THREE.Math.degToRad(-buttonAngle)) + body.position.y,
        z + bodyRadius * Math.cos(THREE.Math.degToRad(-buttonAngle)));
    scene.add(button2);
}
 
window.onload = function()
{
    var scene = createScene();
 
    drawSnowman(0, 0, 0, scene);
    drawSnowman(2.5, 0, 1.5, scene);
};
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
09.06.2022, 19:11  [ТС] 18
Пример сборки JavaScript-проекта с помощью Rollup с модулями ES6: Cannon-ES и Three.js

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. Перейдите в браузер и введите адрес: localhost:8080

Пример с ES-модулями можно опубликовать в песочнице



rollup.config.js

Javascript
1
2
3
4
5
6
export default {
    input: "./src/client/main.js",
    output: {
        file: "public/js/bundle.js"
    }
}
public/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
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
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);
        };
}
Миниатюры
Проекты на Three.js и Babylon.js
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.06.2022, 10:43  [ТС] 19
Программирование на языке TypeScript с помощью Parcel на примере Three.js и Cannon-ES

Запись в блоге, которая может меняться: Программирование на языке 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

    PHP/HTML
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    <!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

    Javascript
    1
    2
    3
    4
    5
    
    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

Javascript
1
2
3
4
5
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);
Либо так, если у вас, как у меня, папка с пакетами находится выше по уровню вложенности:

Javascript
1
2
3
4
5
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);
0
5158 / 2770 / 465
Регистрация: 05.10.2013
Сообщений: 7,321
Записей в блоге: 147
23.06.2022, 12:10  [ТС] 20
Rollup, Three.js и Cannon-ES

Запись в блоге, которая может меняться: Программирование на языке 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:
    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
    
    <!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:

    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    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:
    Javascript
    1
    2
    3
    4
    5
    6
    
    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
0
23.06.2022, 12:10
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.06.2022, 12:10
Помогаю со студенческими работами здесь

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

Проекты с ООП
Здравствуйте, мне захотелось выполнить какой-нибудь проект с использованием принципов ООП для...

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

Объединить проекты
Есть 3 проекта и есть основная форма. Как сделать чтобы при нажатии на кнопку в форме открывался...

Не запускаются проекты
Дважды переустанавливал студию. Устанавливал разные студии. Но все тоже самое - уже не знаю, что...

Соединить проекты
Могу ли я соединить проекты, В первомприложение парсинг и.т.д, а во втором coredata с таблицами...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru