Создайте свою собственную игру WebGL Phyfics

Sep 15, 2025

Инструкции

Этот проект будет разделен на разные детали. Мы дадим короткое введение в Heroku, покажем, как использовать Photijs с Threy.js, объясните, как обрабатывать события сокетов на Node.js, а также о том, как мы идем о том, как обращаться с отправленными данными.

20 удивительных примеров WebGL в действии

01. Heroku

Heroku is an easy to use and free to trial node.js web server — Heroku - это простое в использовании и бесплатном для пробного веб-сервера Node.js

Этот проект будет размещен на Heroku , какая облачная платформа для размещения ваших приложений. Он имеет широкий спектр поддерживаемых языков, таких как Ruby, Java, PHP и Python. Мы собираемся использовать Node.js.

Подпишитесь на учетную запись и выберите Node.js. Для этого проекта мы можем использовать основной сервер, который бесплатный. После регистрации вы приедете на вашу приборную панель, где вы можете создать свое приложение. Это создаст поддомен на herokuapp.com.

В качестве метода развертывания вы можете выбрать либо использовать интерфейс командной строки Heroku (CLI) для развертывания с использованием его репозитория GIT или установить соединение до GitHub или Dropbox. Я решил пойти с его CLI; Это потребует установки. Но взамен вы получаете множество новых полезных инструментов, один из них живет отладки через ваш терминал.

Для настройки вашего сервера я рекомендую следовать шагам Как описано здесь Отказ

Чтобы развернуть, вы используете команды GIT по умолчанию. Каждый, который вы используете, срабатывают на сервере сборки, и ваше приложение будет развернуто на сервере Heroku, а затем можно просмотреть в своем поддомере.

После развертывания кода вы можете просмотреть свой проект на [yourProject] .herokuapp.com. Для просмотра журналов используйте команду «heroku logs - хвоста» в вашем терминале. Некоторые из показанных вещей - это то, что подается клиенту - он показывает соединения сокетов, и если вы хотите отладить свой код, вы также можете использовать Console.log для вывода на терминал.

02. Создайте сцену физики

Tap your screen or hit the spacebar to bounce the table up — Нажмите на экран или нажмите на пробел, чтобы отскочить таблицу

Мы будем использовать самые популярные Боевик рамки, Threy.js. , чтобы построить 3D-сцену, содержащую объект, на котором мы прикрепим физику. Библиотека физики выбора Рифик плагин для трех.js. В качестве расширения TRE.JS Physijs использует то же самое соглашение о кодировании, что облегчает использование, если вы уже знакомы с Three.js.

Первое, что бассейн стол. Мы используем Photijs Heightfieldmesh , потому что эта сетка будет читать высоту из плоскометрии. Таким образом, он будет в основном завернуть себя вокруг объекта Three.js.

 таблица VAR = новые три.planegeometry (650, 500, 10, 10);
VAR Tablematerial = Physijs.reatematerial (
  Новые три.meshphongmaterial ({
    Shininess: 1,
    Цвет: 0xb00000,
    emissive: 0x111111,
    сторона: три
  }),
  .8, // трение
  .4 // реституция
);
Таблица = новые Physijs.heightfieldmesh (табличка с табличкой, стойкой, 0);

Так Heightfieldmesh Требуется геометрия, но и материал физики. Мы добавляем две новые функции в материал Three.js. Это то трение и реституция Переменные. Тренение - это сопротивление объекта, и реституция относится к «божественности». Эти две переменные определит, насколько реальная физика будет чувствовать себя в вашей сцене.

Для созданных бассейнов мы не хотим сделать их слишком надувной, поэтому держите номер низким. Как и Three.js, Physijs также имеет серию основных форм, чтобы обойти оригинальную сетку. Сферемеш упаковка Спередоминология даст мяче физику. При инициализации сцены мы называем Bladeball (8) , который будет вызвать следующую функцию ...

 VAR Buildball = Функция (newberball) {
 VAR BallTexture = новые три. Texture ();
 var ballindex = ball.length;

Добавьте текстуру:

 BallTexture = Three.imageutils.loadtexture ('Textures /' + newberball + '_ball.jpg', Функция (изображение) {
     balltexture.image = image;
  });

Создайте материал с поддержкой POSKIJS с приличными свойствами трения и отказов:

VAR Ballmaterial = Physijs.reat Materaterial (
    Новые три .meshlambertmaterial ({{
      Карта: Balltexture,
      Shininess: 10,
      Цвет: 0xdddddd,
      emissive: 0x111111,
      сторона: три. Frontside.
    }),
    .6, // трение
    .5 // реституция
  );

Картирование текстур:

 ballmaterial.map.wraps = ballmaterial.map.prapt = three.repeatawrapaping;
  ballmaterial.map.repeat.Set (1, 1);
 Создайте сфереров с поддержкой по физике и запустите его в воздухе:

  мяч [Ballindex] = Новые Фикиссферемеш (
    Новые три.spheregeetryry (25, 25, 25),
    мячматериал,
    100.
  );
  // y смещение на вершину холста
  шар [Ballindex] .Position.y = 500;
  // Тени
  шар [ballindex] .receivehadow = true;
  мяч [Ballindex] .CaChadow = true;
  // добавить мяч на ваш холст
  Case.add (шар [Ballindex]);
};

Мы добавляем текстуру из файла .jpg. Создайте материал и используйте это для Сферемеш Чтобы создать объект, который мы будем размещать вертикально на вершину, поэтому он падает на экран.

03. Подключение сокетов

The key goal of our game is emulating the physical movements to the screen — Ключевой целью нашей игры эмуляция физических движений на экран

Для связи между сервером и клиентом мы будем использовать Socket.io. Отказ Это одна из самых надежных библиотек, доступных для Node.js. Он построен на вершине API WebSockets.

Теперь физика включена для сетки, которые нам нужен пользовательский ввод, чтобы сделать игру интерактивной. Устройство ввода, которое мы используем, это мобильное устройство. Мобильный браузер - это контроллер, который предоставит данные от акселерометра и гироскопа на рабочий стол, где вы увидите игру.

Во-первых, необходимо сделать соединение между мобильным браузером и браузером на рабочем столе. Каждый раз, когда браузер подключается с нашим приложением Node.js, нам нужно сделать новое соединение. Клиентское боковое соединение настроено с помощью следующего:

 VAR Socket = IO.CONNECT ();

Для отправки сообщений вы используете испускают Функция:

 Socket.emit («Имя события», данные);

И для получения вы используете .на() Функция:

 Socket.on («Имя события», функция () {});

03.1. Настройка настольной игры

Если мы находимся на рабочем столе, мы отправим наши розетки Устройство Emit сообщает наш сервер, рабочий стол - это игра, используя следующую строку кода:

 VAR Socket = io.connect ();
// При первоначальном приветственном сообщении ответить на «Игра» Тип устройства
Socket.on («Добро пожаловать», Функция (данные) {
  Socket.emit («Устройство», {«Тип»: «Игра»});
});

Сервер вернет нам уникальный ключ / игровой код Сгенерировано крипто Отказ Это будет отображено на рабочий стол.

 // генерируют код
var gameCode = crypto.randombytes (3) .tostring ('hex'). Подстрока (0, 4) .tolowercase ();
// обеспечить уникальность
В то время как (GameCode в сокетах) {
  GameCode = crypto.randombytes (3) .tostring ('hex'). Подстрока (0, 4) .tolowercase ();
}
// Хранить код игры - & gt; Сокетная ассоциация
SocketCodes [GameCode] = io.sockets.sockets [socket.id];
Socket.Gamecode = GameCode

Скажите игровому клиенту инициализировать и показать игровой код для пользователя ...

 сокет .emit («инициализация», GameCode);

03.2. Подключите контроллер к игре

Чтобы подключить мобильное устройство к игре, мы будем использовать форму, чтобы отправить код игры с экрана рабочего стола. В форме отправим код игры на сервер для аутентификации.

 Socket.emit («Устройство», {«Тип»: «Контроллер», «GameCode»: GameCode});

Сервер проверит, действует ли код игры и будет настроить соединение с настольной игрой

 Если (Device.gamecode в SkeetCodes) {
  // Сохранить код игры для команд контроллера
  socket.gamecode = device.gamecode.
  // инициализировать контроллер
  Socket.emit («подключен», {});
  // начать игру
  SocketCodes [Device.gamecode] .emit («подключен», {});
}

После того, как соединение все настроен, мы дадим 8-шар небольшой толчок из X и Z со следующей командой ...

 мяч  .Setlinearvelocity (новые три.Vector3 (30, 0, 30));

04. Отправка данных

Теперь, когда соединение установлено, мы хотим отправить переменные гироскопа и акселерометра в игру. Используя окно.ondevicemotion и то Окно.одимости События, у нас есть данные, которые нам нужно для эмулировать те же наклонные движения нашего телефона на стол бассейна. Я решил использовать интервал 100 мс, чтобы излучать эти значения.

setinterval (функция () {
  Socket.emit («Отправить гиро», [MATH. ROOND (ROTY), MATH. ROUND (ROTX), AY, AX]);
}, интервал времени);

На стороне клиента мы будем решать задержку, отменив входящие значения с сервера до наклона таблицы бассейна. Для твингинга мы используем Tweenmax. Отказ

 // обрабатывать входящие данные гироскопа
Socket.on («новый гиро», функция (данные) {
  var degy = данные  & lt; 0? Math.abs (данные ): -data ;
  Tweenmax.to (Table.Rotation, 0,3, {
    X: Degtorad (Degy - 90),
    Y: Degtorad (данные ),
    Легкость: линейный.
    Onupdate: функция () {
        Таблица .__ Gramprotation = True;
    }
  });
});

05. Дополнительные события

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile — Больше шаров равна веселее. Попробуйте ударить пробел или постукивать на экран своего мобильного

Чтобы дать ему немного более интерактивности, я добавил пару дополнительных событий для пользователя. Мы собираемся дать пользователю возможность добавлять дополнительные шарики рядом с 8-мяром, используя номера на клавиатуре.

Еще один состоит в том, чтобы отскочить стол вверх. Для этого вы можете ударить пробел. Но мы также добавляем мероприятие Tap на устройстве контроллера. Это отправит событие на стол бассейна, что поднимет столик и отправит шарики вверх.

Сначала нам нужно поймать клавиатуру ...

 // Создание шариков / шлема на пробел
document.addeventListener («KeyDown», функция (E) {
  if (e.keyCode == 49) {// ключ: 1
    Bladeball (1);
  } еще если (e.KeyCode == 50) {// ключ: 1
    Bladeball (2);
  } else, если (e.keyCode == 51) {// ключ: 1
    Bladeball (3);
  } else is (e.keyCode == 32) {// Ключ: пробел
    Bounceetable ();
  }
});

То стрижка Функция та же функция, которую мы использовали для создания сферы 8-мяч. Мы просто используем разные текстуры, которые будут обернуть сферу. Для толкания стола вверх, мы даем таблицу восходящее движение вдоль оси Y с помощью этого кода ...

 Table.Setlinearvelocity (новые три.Vector3 (0, 500, 0));

Вывод

Add more balls and see how much your browser can handle — Добавьте больше шаров и посмотрите, насколько ваш браузер может обрабатывать

Когда у вас есть концепция для игры или что-то еще, совершенно вероятно, что есть библиотеки, которые могут облегчить вашу жизнь проще. Это демо, которое показывает, как это может работать. Мы надеемся, что это поможет зажечь некоторые творческие идеи или помочь вам в вашем текущем проекте. Увидеть живой пример игры здесь или найти это на Гадость Отказ

Эта статья была первоначально опубликована в выпуске 300 из сеть , самый главный журнал в мире для профессиональных веб-дизайнеров и разработчиков. Купить выпуск 300. или же Подписаться здесь Отказ

Статьи по Теме:

Начните с WebGL, используя Three.js
20 инструментов JavaScript, чтобы взорвать свой разум
Создание интерактивных 3D Visuals с Threy.js

Создайте свою собственную игру WebGL Phyfics

01. Heroku

02. Создайте сцену физики

03. Подключение сокетов

03.1. Настройка настольной игры

03.2. Подключите контроллер к игре

04. Отправка данных

05. Дополнительные события

Вывод

Инструкции - Самые популярные статьи

Как создать суперреалистичное существо фантазий

Как реализовать светлые или темные режимы в CSS

Как структурировать средства массовой информации в Sass

Создать анимированный эффект текста пара

сделать реалистичные 3D волосы и меха в 3DS MAX и V-Ray

Нарисуйте портрет, как старые мастера

Как построить полнотечный веб-сайт в угловом

Как создать красивую акварельную пейзажную роспись

Категории