Fun with
BabylonJS + Vue + TS
What is BabylonJS?
🤔
- 3D Game engine
- Open source and maintained by Microsoft
- Javascript and Typescript
- Power by WebGL
What is a 3D game object -> ?
🤔
Mesh
Mesh: Shapes of a 3D Object
Material
Skin of a 3D Object
Transform
Location, Rotation, Scale
Light! Camera! Action!
Scene
- Think of a scene as a "Scene" in a movie set.
- it consists of light(s), camera(s), and 3D objects
- It is the job of the 3D engine to render a Scene
Light! Camera! Action!
Scene
- Light(s) light up your scene
- There are different type of light in Babylonjs
- Point light
- Directional light
- Hemispheric Light
- etc...
- Be careful with light! Shadow calculation affect performance.
Light! Camera! Action!
Scene
- Camera is our eyes into the 3D world
- Babylonjs have many different camera systems
- Arc Rotate Camera
- Free Camera
- Touch Camera
- Universal camera
- WebXR Camera
Light! Camera! Action!
Scene
Actions in BablyonJS are triggers and events that us to interact with the scene. ex:
- keyboard events
- mesh collision
- mouse click
- touch screen
Hierarchy
similar to DOM node tree,
3D engine consist tree of nodes
Hierarchy
Why is node tree important?!
- Share Transformation Information
- LocalSpace vs World Space
- Grouping of Nodes
Animation System
Animation = transformation over frame (time?)
What about Vue?
I saw typescript, BabylonJS...but
Vue UI Layer
BablyonJS
Reactive State
Quick Demo
Fun with BabylonJS + Vue + TS
By ringo kam
