Create A 3D Card Game Using Three.js And GSAP
In this tutorial we're going to create a card game based on the E-Card from the anime Kaiji: the ultimate survivor.
We're going to use plain Javascript with Three.js and GSAP.
---
Timestamps:
00:00 Introduction
00:21 The rules of the game
01:11 Setting up
03:58 Preparing the scene
06:14 Creating the cards
13:39 Player cards animations
17:17 Opponent cards animations
19:47 Fixing a couple of issues
22:32 Cards reset for another round
28:12 Exchange of the emperor & slave
29:38 Score UI
34:01 Final text animation & rematch
41:23 Adding sound effects
42:51 Outro
---
Three.js playlist
https://www.youtube.com/playlist?list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho
---
Three.js Tutorial For Absolute Beginners
https://youtu.be/xJAfLdUgdc4
How To Create Realistic Scenes In Three.js - Tone Mapping, HDR, Gamma Correction, sRGB Color Space
https://youtu.be/6XvqaokjuYU
---
The boilerplate that I'm using in my tutorials
https://github.com/WaelYasmina/ThreeBoilerplate
Project Assets
https://drive.google.com/file/d/1fOI7_XS-gZz19SGlif7GFhQ3e6FkGBq9/view?usp=share_link
---
GitHub repo
https://github.com/WaelYasmina/ecard
---
Pen by LLUIS
https://codepen.io/lluisalen/pen/pozMmZx
---
Cards' textures
https://www.deviantart.com/greysonx/art/KAIJI-E-Card-Full-Set-527035594
Zawa sound effect
https://www.myinstants.com/en/instant/zawa-zawa/
---
Generating random whole numbers in JavaScript in a specific range
https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
How to randomize (shuffle) a JavaScript array
https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Create A 3D Card Game Using Three.js And GSAP», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.