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

Запись от 8Observer8 размещена 23.06.2022 в 11:52

Показов 1426 Комментарии 0

Метки javascript, three.js

Содержание блога

Установите редактор кода 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

Метки javascript, three.js

Размещено в Без категории

« Программирование на языке TypeScript с помощью Parcel на примере Three.js и Cannon-ES Главная страница Несколько базовых изменений в PyQt6 и PySide6 касательно графики на шейдерном OpenGL »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

8Observer8 8Observer8 вне форума

Регистрация 05.10.2013
Адрес Саратов
Сообщений 8,103
Записей в блоге 243

Новые блоги и статьи Все статьи Все блоги /
Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .	Перемещение строк из ТЧ в другой документ с учетом текущего пробега Maks 17.08.2026 Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .
Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия

Наверх

Сообщение форума

Отменить изменения

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

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