Create Your First Game with Timbre

In Progress

<IMG> Mobile Timbre Gif</IMG>

Develop 3D Games on the Web with Timbre.

1. Find Models & Environments

Search for 3D Models that can be remixed or upload your own scene.

<IMG>

• Google Poly
• https://poly.google.com/
• https://www.vectary.com/features/

Copy/Paste the 3D Architecture Web Address from Google Poly’s Website to build your own scenes.

<IMG>

• (Aframe Basics & Inspector) — (CONTROL + ALT + i)
• https://aframe.io/docs/0.8.0/core/entity.html
• https://aframe.io/docs/0.8.0/introduction/visual-inspector-and-dev-tools.html
• https://github.com/archilogic-com/aframe-gblock
• https://aframe.io/docs/0.8.0/components/gltf-model.html

Edit the Environment’s Colors, Atmosphere, and Feeling

<IMG>

• https://github.com/supermedium/aframe-environment-component/blob/master/README.md
• https://github.com/mokargas/aframe-colorwheel-component
• https://www.npmjs.com/package/aframe-simple-sun-sky
• https://aframe.io/docs/0.8.0/components/position.html
• https://aframe.io/docs/0.8.0/components/rotation.html
• https://aframe.io/docs/0.8.0/components/scale.html
• https://aframe.io/docs/0.8.0/components/material.html

Utilize Quality Effects and Shaders on the Web

<IMG>

• https://shaderfrog.com/
• https://github.com/msj121/aframeFrogShaders
• https://www.npmjs.com/package/aframe-mirror-component

Add Video, Gifs, and Film into your Interactive Experience

<IMG>

• https://aframe.io/docs/0.8.0/primitives/a-video.html
• https://github.com/mayognaise/aframe-gif-shader
• https://www.npmjs.com/package/aframe-video-illumination-component
• https://www.npmjs.com/package/aframe-multi-video-component

Add 2D and 3D Graphic Design and Text Elements

<IMG>

• https://aframe.io/docs/0.8.0/primitives/a-text.html
• https://www.npmjs.com/package/aframe-text-geometry-component
• https://aframe.io/docs/0.8.0/primitives/a-text.html
• https://github.com/etiennepinchon/aframe-fonts
• https://fonts.google.com/

2. Design Interactions & Controls

Edit Player Interactions within the world & link players into other interactive experiences.

<IMG>

• Player Cursor Components
• https://www.npmjs.com/package/aframe-event-set-component
• https://www.npmjs.com/package/aframe-href-component
• https://aframe.io/docs/0.8.0/primitives/a-cursor.html
• https://aframe.io/docs/0.8.0/components/cursor.html
• https://www.npmjs.com/package/aframe-ui-components#cursor-feedbackEnvironment
• https://www.npmjs.com/package/aframe-ui-components#target-indicator
• https://www.npmjs.com/package/aframe-ui-components#volumetric-light

Create Events, Behaviors, and Experiences for the Player and 3D Models

<IMG>

• Events
• https://www.npmjs.com/package/aframe-state-component
• https://github.com/donmccurdy/aframe-extras/tree/master/src/pathfinding
• https://github.com/donmccurdy/aframe-inspector-plugin-recast
• https://github.com/protyze/aframe-alongpath-component

Utilize Gesture and In-Game User Input Interfaces

<IMG>

• Onseen Gesture Handler
• https://onsen.io/v2/api/js/ons-dialog.html
• https://github.com/etiennepinchon/aframe-material
• https://www.npmjs.com/package/aframe-material-collection
• https://github.com/brianpeiris/aframe-textarea-component

Easily fix the player collisions and experiment with simple interactive physics simulations in your game.

<IMG>

• Object Collision
• https://github.com/donmccurdy/aframe-physics-system
• https://github.com/donmccurdy/aframe-extras
• https://github.com/wmurphyrd/aframe-physics-extras

Add Challenge, Action, and Combat into your experience

<IMG>

• Combat
• https://github.com/supermedium/aframe-super-shooter-kit

3. Mix & Blend Animations to bring your world to life.

Explanation

• Animation Movement Component
• https://www.npmjs.com/package/aframe-animation-component

<IMG>

Explanation

• Animation Mixer Events

<IMG>

Explanation

• Mixamo

<IMG>

Explanation

• Animation Player Component
• https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders
• https://rexraptor08.github.io/animation-controls/

<IMG>

Explanation

• Navigation Agent/Mesh Pathfinding
• https://github.com/donmccurdy/aframe-inspector-plugin-recast
• https://github.com/donmccurdy/aframe-extras/tree/master/src/pathfinding

<IMG>

Explanation

• Look At
• https://www.npmjs.com/package/aframe-look-at-component

<IMG>

Explanation

• Animation Timeline Component
• https://www.npmjs.com/package/aframe-animation-timeline-component

<IMG>

Explanation

• Entity Generator
• https://github.com/supermedium/superframe/tree/master/components/entity-generator/

<IMG>

<IMG>

Explanation

• motion capture
• https://www.npmjs.com/package/aframe-motion-capture-components

4. Design Visual Effects

<IMG>

Explanation

• Photopea
• https://www.photopea.com/
• https://www.youtube.com/watch?v=0fZ_ahJl0Oo

<IMG>

Explanation

• Dust Particle Effects
• https://github.com/DougReeder/aframe-dust-component

<IMG>

Explanation

• Sprite Particle Effects
• https://github.com/harlyq/aframe-sprite-particles-component
• https://harlyq.github.io/aframe-sprite-particles-component/

<IMG>

Explanation

• Physics Particle Effects
• https://www.npmjs.com/package/aframe-particle-system-component

<IMG>

Explanation

• Mesh Particle Effects
• https://www.npmjs.com/package/aframe-mesh-particles-component
• https://harlyq.github.io/aframe-mesh-particles-component/

<IMG>

Explanation

• Rain
• https://www.npmjs.com/package/aframe-rain

<IMG>

Explanation

• Blender Particle Player
• https://github.com/supermedium/aframe-particleplayer-component

5. Explore Utilities & Try Creative Tools

<IMG>

Explanation

• In-Game Console Log Viewing
• https://www.npmjs.com/package/aframe-log-component

<IMG>

Explanation

• Color Picker
• https://github.com/mokargas/aframe-colorwheel-component

<IMG>

Explanation

• Preloader
• https://github.com/gladeye/aframe-preloader-component

Develop 3D Experiences & Real Games with Timbre.

Timbre Complete Documentation

User Interface

Onseen.js Documentation (Advanced User Interface)

• Onseen.js Documentation (Advanced User Interface)

Game Engine

• https://aframe.io/docs/0.8.0/introduction/entity-component-system.html
• https://aframe.io/docs/0.8.0/core/entity.html
• https://aframe.io/docs/0.8.0/introduction/faq.html

Game Physics & Collision Detection

• https://github.com/donmccurdy/aframe-physics-system
• https://github.com/donmccurdy/aframe-extras
• https://github.com/wmurphyrd/aframe-physics-extras

Character Entity Pathfinding

• https://github.com/donmccurdy/aframe-inspector-plugin-recast/blob/master/README.md
• https://github.com/donmccurdy/aframe-inspector-plugin-recast
• https://github.com/donmccurdy/aframe-extras/tree/master/src/pathfinding
• https://github.com/donmccurdy/aframe-extras/blob/master/src/pathfinding/system.js
• https://github.com/donmccurdy/aframe-extras/blob/master/src/pathfinding/nav-agent.js
• https://github.com/donmccurdy/aframe-extras/blob/master/src/pathfinding/nav-mesh.js
• https://medium.com/@donmccurdy/creating-a-nav-mesh-for-a-webvr-scene-b3fdb6bed918
• https://rexraptor08.github.io/animation-controls/
• https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

Advanced Physics

• http://schteppe.github.io/cannon.js/docs/
• https://github.com/donmccurdy/aframe-physics-system/search?q=cannon&unscoped_q=cannon
• https://github.com/donmccurdy/aframe-physics-system/search?q=cannon&unscoped_q=cannon

Advanced Animation Blending, Easing, and Mixing

• https://github.com/juliangarnier/anime
• https://www.npmjs.com/package/aframe-animation-component
• https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders
• https://rexraptor08.github.io/animation-controls/

Advanced Rendering

• https://aframe.io/docs/0.8.0/introduction/developing-with-threejs.html
• https://threejs.org/
• https://threejs.org/docs/#api/en/scenes/Scene
• https://threejs.org/docs/#api/en/core/Object3D
• https://threejs.org/examples/#webgl_animation_cloth
• https://threejs.org/examples/#webgl_animation_skinning_morph
• https://threejs.org/examples/#webgl_animation_skinning_blending

Build something revolutionary.

[ QUENTIN PADEN— CEO [of] Timbre ]

https://twitter.com/timbrequentin

https://www.instagram.com/timbresqi/

A-FRAME COMPONENT DOCUMENTATION AHEAD

**(Animation Components)**

Animation Blending & Mixer

• https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

Animation Timeline Component

• https://www.npmjs.com/package/aframe-animation-timeline-component

Animation Anime Component

• https://github.com/juliangarnier/anime

Physics System

• https://github.com/donmccurdy/aframe-physics-system

Extra Physics Components

• https://github.com/wmurphyrd/aframe-physics-extras

Entity Look At Player or Object Component

• https://www.npmjs.com/package/aframe-look-at-component

Entity Randomizer Components

• https://www.npmjs.com/package/aframe-randomizer-components

Entity Move Along Predefined Path

• https://github.com/protyze/aframe-alongpath-component

Entity Motion Capture

• https://www.npmjs.com/package/aframe-motion-capture-components

**(Particle Effects Components)**

Rain

• https://www.npmjs.com/package/aframe-rain

Light

• https://aframe.io/docs/0.8.0/primitives/a-light.html

Mesh Particles

• https://www.npmjs.com/package/aframe-mesh-particles-component

Sprite Particles

• https://github.com/harlyq/aframe-sprite-particles-component

Physics Particles

• https://www.npmjs.com/package/aframe-particle-system-component

Dust Particles

• https://github.com/DougReeder/aframe-dust-component

Lensflare

• https://www.npmjs.com/package/aframe-lensflare-component

Blender Particle Player Component

• https://github.com/supermedium/aframe-particleplayer-component

**(Model & Environment Components)**

Environment

• https://github.com/supermedium/aframe-environment-component/blob/master/README.md

Room Component

• https://www.npmjs.com/package/aframe-room-component

Entity Generator

• https://github.com/supermedium/superframe/tree/master/components/entity-generator/

Pathfinding Navigation Mesh Generator

• https://github.com/donmccurdy/aframe-inspector-plugin-recast

Color Picker

• https://github.com/mokargas/aframe-colorwheel-component

Optimized Pre-Loader

• https://github.com/gladeye/aframe-preloader-component

Optimized Lazy Load

• https://github.com/youmustfight/aframe-asset-lazy-load

Text Wrap

• https://www.npmjs.com/package/aframe-textwrap-component

Gif Shader

• https://github.com/mayognaise/aframe-gif-shader

3D Interactive Modal Menu

• https://github.com/IdeaSpaceVR/aframe-ui-modal-component#readme

3D Text Geometry

• https://www.npmjs.com/package/aframe-text-geometry-component

3D Text Fonts

• https://github.com/etiennepinchon/aframe-fonts
• https://fonts.google.com/
• https://aframe.io/docs/0.8.0/primitives/a-text.html

GTLF Part Workflow

• https://www.npmjs.com/package/aframe-gltf-part-component

In-Game Console Log Viewer

• https://www.npmjs.com/package/aframe-log-component

3D In-Game Material UI

• https://github.com/etiennepinchon/aframe-material

3D In-Game Advanced Material UI

• https://www.npmjs.com/package/aframe-material-collection

3D In-Game Text Area Input UI

• https://github.com/brianpeiris/aframe-textarea-component

Simple Sun and Sky

• https://www.npmjs.com/package/aframe-simple-sun-sky

Set UVs onto a plane geometry

• https://www.npmjs.com/package/aframe-atlas-uvs-component

Video

• https://aframe.io/docs/0.8.0/primitives/a-video.html
• https://www.npmjs.com/package/aframe-video-illumination-component

Multi-Video

• https://www.npmjs.com/package/aframe-multi-video-component

Google Poly GTLF Model Component

• https://github.com/archilogic-com/aframe-gblock

360 Image

• https://aframe.io/docs/0.8.0/primitives/a-sky.html

Image

• https://aframe.io/docs/0.8.0/primitives/a-image.html

Mirror

• https://www.npmjs.com/package/aframe-mirror-component

Shadow

• https://aframe.io/docs/0.8.0/components/shadow.html

Materials

• https://aframe.io/docs/0.8.0/components/material.html

Lights

• https://aframe.io/docs/0.8.0/components/light.html

Sounds

• https://aframe.io/docs/0.8.0/components/sound.html

Shaders

• https://github.com/msj121/aframeFrogShaders

Sprites

• https://github.com/tizzle/aframe-sprite-component

**(Interaction & Player Components)**

Onseen HTML5 Controls

• Onseen UI

Mobile Controls

• https://github.com/Ctrl-Alt-Zen/aframe-mobile-controls/blob/HEAD/components/twoway-motion/README.md
• https://github.com/Ctrl-Alt-Zen/aframe-mobile-controls/blob/HEAD/components/tilt-turn/README.md

FPS Look Controls

• https://www.npmjs.com/package/aframe-fps-look-controls-component

Console Gamepad Controls

• https://github.com/donmccurdy/aframe-extras/tree/master/src/controls
• https://github.com/donmccurdy/aframe-extras/blob/master/src/controls/gamepad-controls.js

Movement Controls

• https://aframe.io/docs/0.8.0/components/wasd-controls.html

Orbit Controls

• https://www.npmjs.com/package/aframe-orbit-controls

In-Game Hyperlink Component

• https://www.npmjs.com/package/aframe-href-component

Cursor Components

• https://www.npmjs.com/package/aframe-ui-components#cursor-feedbackEnvironment
• https://www.npmjs.com/package/aframe-ui-components#target-indicator
• https://www.npmjs.com/package/aframe-ui-components#volumetric-light
• https://aframe.io/docs/0.8.0/primitives/a-cursor.html
• https://aframe.io/docs/0.8.0/components/cursor.html

Event State Management

• https://www.npmjs.com/package/aframe-state-component

Event Set from Entity Component

• https://www.npmjs.com/package/aframe-event-set-component

First Person Combat

• https://github.com/supermedium/aframe-super-shooter-kit

Build something revolutionary.

[ QUENTIN PADEN — CEO [of] Timbre ]