Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 2.59 KB

README.md

File metadata and controls

61 lines (42 loc) · 2.59 KB

Прототип трехмерного графического редактора с возможностью совместного редактирования в реальном времени

Автор: Ярослав Сергиенко

Демо

http://95.179.131.108:3333

  • Каждый подключающийся пользователь получает случайный цвет своей кисти.
  • Левой кнопки мыши можно рисовать в плоскости перед камерой.
  • Правой кнопкой вращается камера.
  • Колесом прокрутки камера движется вперед-назад (не путать с увеличением).
  • До синхронизации с сервером каждый мазок кисти рисуется пустым внутри (что-то вроде optimistic update)
  • Сервер хранит данные в виде кольцевого буффера заданного размера (по умолчанию 5 000 мазков).

Технологии

  • Socket.io
  • Flask (Python 3) на сервере.
  • React, Webpack etc. (Create React App)
  • Typescript
  • Storybook
  • TSLint, Prettier
  • ramda, gl-matrix

Запуск

cd backend && FLASK_APP=server.py BUFFER_SIZE=5000 flask run -h 0.0.0.0 -p 3333

Компиляция статичной сборки из исходных кодов

Если фронтэнд предполагается раздавать с того же сервера, на котором находится бэкенд, следует набрать:

REACT_APP_BACKEND=/ npm run build

Иначе следует указать адрес сервера, к которому следует обращаться:

REACT_APP_BACKEND=http://95.179.131.108:3333 npm run build

Также следует обратить внимание на поле homepage файла package.json. Оно должно соотетствовать префиксу, с которого будет раздаваться папка dist.

Авто-обновляющаяся версия для разработки

REACT_APP_BACKEND=http://95.179.131.108:3333 npm start

Storybook

Для большего удобства разработки рекомендуется использовать Storybook:

STORYBOOK_BACKEND=http://95.179.131.108:3333 npm start

Он будет запущен на 6006 порту и будет использовать API с 3333 порта.