Tetris Fun
with troisJS

Goal

  1. Explore TroisJS
  2. Try out Vue 3 SFC `<script setup>` and Typescript syntax
  3. Build Tetris
  4. Main goal is to Have fun! 

TroisJS

Vue Syntax to declare 3D objects

threeJS

troisJS

 <Box>
      <BasicMaterial color="0x00ff00" />
 </Box>

Setting up the Scene in threeJS

Focus on the script tag->

Hard to figure out object hierarchy at first glance!!!

Setting up the Scene

Access Render Loop 

<template>
<Renderer ref="rendererC" antialias resize="window">
  <!-- content -->
</Renderer>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from "vue";
  const rendererC = ref<RendererPublicInterface>();

  
onMounted(() => {
  const renderer = rendererC.value;
  renderer?.onBeforeRender(() => {
    // do stuff in loop
  });
});
</script>
<template>
  <!-- content -->
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
const renderer = inject<RendererPublicInterface>(
  RendererInjectionKey as symbol
);
  
onMounted(() => {
  renderer?.onBeforeRender(() => {
    // do stuff in loop
  });
});
</script>

<- template ref 

inject ->

What are we building?

Tetris

ringokam.github.io/trois-tetris/

My Components

  • App.vue: root and hold game state (points, # of player, etc)
    • Tetris.vue: tetris game board
    • PlayerModel.vue: the 3D player model
    • Gameover.vue: UI for game over screen
    • OnGoing.vue: UI for on going game (display score)
    • StartGame.vue: UI on menu (select player)
       

UI overlay to display score  and menu ->

our 3D content ->

                                              ->

Create # of Tetris board and player model base on # of players

Tetris gameloop

Block Type and Rotation

meth meth method

My naive Tetris board implementation

Working with fbx model

TroisJS comes with `FbxModel` component which makes importing 3D model a breeze 💨

code from PlayerModel.vue

if animation and texture is not baked into the model

You will need to do a bit of threejs!

 

  1. Import FBX loader and TextureLoader
  2. Once the model is load in, load the texture and animation as well and apply it the model


​

Text

on model load in-> 

load texture-> 

load animation-> 

move animation forward-> 

Goal

  1. Try out Vue 3 SFC `<script setup>` and Typescript syntax
  2. Explore TroisJS
  3. Build Tetris
  4. Main goal is to Have fun! 

Pros

  • Vue!
  • Declarative HTML like syntax
  • Typescript goodness

Cons

  • Heavy reliance on Ref 
  • Early Stage library
  • `h()` aka `createVNode` doesn't seem to work
  • For performance, avoid using vue reactivity 

TroisJS 🤔

Pros

  • Everything is a method
  • Pretty good Typescript support
  • Enable intelisense from vs editor 

Cons

  • Documentation is "okay"
  • Because everything is a method, things doesn't have to be organized

Sidenote: Vue3 with script setup
🧑‍🔬👩‍🔬

Questions???
Thoughts???

Thank you



 

Made with Slides.com