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

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

Показов 1323 Комментарии 1

Метки three.js, typescript

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

Установите редактор кода VSCode и Node.js
Установите глобально пакеты TypeScript и Parcel командами в терминале: npm i -g typescript parcel
Создайте пустую папку для проекта, перейдите в неё в терминале и создайте в ней файл package.json командой: npm init -y
Введите в терминале команду: code . (не забудьте добавить точку, эта команда запустит VSCode в текущей директории)
Установите Three.js и Cannon-ES командой: npm i three cannon-es

Добавьте в package.json команды:

Code
1
2
3
4
  "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);

Метки three.js, typescript

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

« Пример сборки JavaScript-проекта с помощью Rollup с ES6-модулями: Cannon-ES, Three.js, OrbitControl, ColladaLoader Главная страница Программирование на языке JavaScript с помощью Rollup на примере Three.js и Cannon-ES »

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

Всего комментариев 1

Комментарии

Следующим образом можно добавить в код на 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);

Запись от 8Observer8 размещена 23.06.2022 в 10:45 8Observer8 на форуме

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

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

Новые блоги и статьи Все статьи Все блоги /
Модель здравосохранения 18. Чем здоровее работник, тем быстрее выгорает anaschu 24.05.2026 Имитационная модель корпоративного здравоохранения: что показывает математика Сегодня в модели рабочего коллектива на AnyLogic появились три новые механики — выгорание через накопленную усталость,. . .	Модель здравосохранения 17. Планы на выгорание anaschu 23.05.2026 Вот конкретная схема реализации: В классе Работник добавить: накопленнаяУсталость — растёт каждый час работы, снижается в перерывы и болезни коэффициентПрезентеизма — снижает продуктивность. . .	Изменение цветов в палитре gif файла aka фавикона russiannick 23.05.2026 Изменение цветов в палитре gif файла, юзаемого как фавиконка в составе html-файла, помещенная в base64, средствами нативного Java Script, навеянное сном в майский день. Для работы необходим браузер,. . .	Модель здравосохранения 16. Слишком хорошие и здоровые сотрудники уходят, недовольные зарплатой anaschu 23.05.2026 Отладка увольнений и настройка производительности Сегодня во второй половине дня разобрались с механикой увольнений и настроили коэффициент сложности заданий. Вот что было сделано. . . .
Как я стал коммунистом))) Модель сохранения здоровья сотрудников, запись блога номер 15 anaschu 23.05.2026 Внезапно хорошее здоровье сотрудников не нужно капиталистам?))	Модель здравоСохранения 15. Как мы чинили AnyLogic модель рабочего коллектива: сочленение диаграммы состояний болезней и поломок в ресурспул anaschu 23.05.2026 Как мы чинили AnyLogic модель рабочего коллектива Сегодня разобрались с пятью багами, из-за которых модель либо падала с ошибкой, либо давала совершенно бессмысленные результаты. Каждый баг был. . .	Диалоги с ИИ zorxor 23.05.2026 Насколько я понимаю - Вы - Искусственный Интеллект. Это так? Да, всё верно. Я — искусственный интеллект. Я представляю собой большую языковую модель, созданную для помощи в самых разных задачах. . . .	Модель здравосохранения 14. Собираем всю модель вместе. anaschu 22.05.2026 Модель собрана. В будущих постах на видео я покажу, как она работает. В этом посте запускаем её, проверяем результаты и разбираем что можно с ней делать дальше. Перед запуском проверяем. . .

Наверх

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

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

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

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