Core concepts

David Paul Rosser edited this page Jun 15, 2013 · 3 revisions
Clone this wiki locally

Core concepts

Over the course of this guide i'll be going over the basic fundamentals of the library.

Required files

Platonic requires two files to display content - A css and html file.

I use jade for the templates, feel free to use an alternative template engine to accomplish the same task.

scene.styl

@import "stylus-platonic"

.platonic-viewport .scene .mesh

    &.cube
        cube(mesh-id: 0)

scene.jade

!!! 5
html

    head

        link(rel="stylesheet", href="css/scene.css")

    body

        .platonic-viewport

            .scene

                .mesh.cube(data-mesh-id="0")
                    - for(i = 0; i < 6; i++)
                        .face(data-face-id="#{i}")

The viewport

.platonic-viewport

The viewport is the container for the scene and it sets the perspective for the 3D content.

The viewport can be customised with user defined variables. See the global config for the list of variables.

The scene

.scene

The scene is the container for all scene objects (geometry, user interface components...)

It should be considered as the world space.

Scene objects

.mesh
.group
.ui-component

Scene objects live within the scene. All of them except .group define visual content.

Transformations

By default each scene object is under the world transformation of the scene. Scene object's have an absolute position style and are positioned in the center of the scene.

Using a .group container can give multiple scene objects a single transformation allowing them to individually keep their own transformation.

Namespaces

Platonic uses data attributes for unique selector styles to link the css of the object to the html.

For each different scene object of the type, the id should be different to avoid style conflicts.

.mesh[data-mesh-id="0"]
.face[data-face-id="0"]
.particle[data-particle-id="0"]
.group[data-group-id="0"]
.ui-component[data-component-id="0"]