https://github.com/ashconnell/three-interface

Interactive ThreeJS interfaces using HTML and CSS
https://github.com/ashconnell/three-interface

Last synced: 4 months ago
JSON representation

Interactive ThreeJS interfaces using HTML and CSS

• Host: GitHub
• URL: https://github.com/ashconnell/three-interface
• Owner: ashconnell
• License: mit
• Created: 2016-03-12T21:50:16.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-15T05:04:11.000Z (almost 9 years ago)
• Last Synced: 2024-08-25T02:18:52.039Z (4 months ago)
• Language: JavaScript
• Size: 5.64 MB
• Stars: 18
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ThreeJS Interface

A [ThreeJS][three] extension that lets you place interactive HTML and CSS into your scene. This is most useful for WebVR 

as it works with stereoscopic rendering.

## Examples

[Basic Example](http://envokevr.github.io/three-interface/)

[Textbox and Virtual Keyboard](http://envokevr.github.io/three-interface/textbox.html)

## Usage

```javascript

    var html = '
Click Me
';

    var methods = {

        click: function (elem) {

            console.log('element clicked!', elem);

        }

    };

    var options = {

        throttle: 250          // throttle for the renderer in milliseconds, can be disabled with false (default 250ms)

        observe: true,         // watches the element for changes and re-renders (default true)

        alwaysOnTop: false,    // ensures the UI is always on top of everything in the scene (default false) 

        debug: false           // places a small sphere at the click point (default false)

    };

    var ui = new THREE.Interface(html, methods, options);

    scene.add(ui);

```


### Arguments

| Param | Type | Details |

| ----- | ---- | ------- |

| html  | `HTMLElement`, `String` or `Array` | The html to be placed into your scene

| methods | `Object` | a dictionary of interaction methods

| options | `Object` | a dictionary of options

[three]: http://threejs.org/

[css3d]: http://threejs.org/