Giter VIP home page Giter VIP logo

kivy3dgui's Introduction

kivy3dgui

Kivy 3D. A pure Kivy library to display and interact with Kivy widgets in a 3D mesh.

If you want to help with the development you can mail me: [email protected]

It's easy to test, just download the code a run the examples. Enjoy it!!!

You can watch a video example here. Another video for Tour3D Example.

Work in progress

The 3D Editor is in the early stage. Baby steps, many issues :) anyway, you can test it at editor_3d branch.

How to use

Step 1

Start by importing the Layout3D. This layout manages 3D Nodes but behaves just like a normal Kivy FloatLayout.

#:kivy 1.0
#: import Layout3D kivy3dgui.layout3d

Step 2

Create a Layout3D, which you can also do from Python.

Layout3D:
    id: par #id for Layout3D, could be referenced just like any Kivy Widget
    size_hint: (1.0, 1.0)
    canvas_size: (1366, 768) # Canvas resolution
    post_processing: False # Post-processing effects (bloom, hdr,...)

You can change the position of the camera using the 'lookat' property, which sets the gluLookAt transformation. It defaults to (0, 0, 10, 0, 0, 0, 0, 1, 0).

Step 3

Create nodes and add them to the Layout3D. Nodes are used to apply 3D effects, transformations and display 3D meshes in Kivy layouts.

Nodes may be a set of 3D meshes (obj format is only supported at now). Be sure to set the UV mapping correctly. If you add a FloatLayout to the node it will be used as a texture for the meshes and you will be able to interact with the widgets that are seen on the surface of the meshes, no matter the shape: touch events are accurately translated to preserve behavior.

The possibilities are endless. Just use your imagination.

    Node:
        id: Node1
        name: 'Node 0'
        rotate: (90, 0.3, 1, 0)  # Angle and x, y, z axis of the rotation matrix
        scale: (0.4, 0.4, 0.4)  # x, y, z of scaling matrix
        translate: (20, -10.0, -110)  # x, y, z of translation matrix
        effect: True
        meshes: ("./data/obj/sphere.obj", ) #List of meshes (obj only)

For more detail on these parameters and matrices, please see the glRotate matrix, glScale matrix and glTranslate documentation.

Step 4

Create interaction widgets. The root widgets for Nodes must be a Layout3D. All its children will use this as the texture for the set of meshes. As mentioned, you will be able to interact with the widgets.

        FloatLayout:
            canvas:
                Color:
                    rgb: 1, 1, 1,0.1
                Rectangle:
                    size: self.size
                    pos: self.pos
                    source: "./data/imgs/background.jpg"
            size_hint: (1.0, 1.0)
            Button:
                pos_hint: {"x":0, "y":0 }
                size_hint: (None, None)
                text: "Hello"

Screenshot

kivy3dgui's People

Contributors

kpiorno avatar zen-code avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.