Форум программистов, компьютерный форум, киберфорум
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Программирование на языке JavaScript с помощью Rollup на примере Three.js и Cannon-ES

Запись от 8Observer8 размещена 23.06.2022 в 11:52
Обновил(-а) 8Observer8 23.06.2022 в 12:01

  • Установите редактор кода 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
Размещено в Без категории
Показов 259 Комментарии 0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru