https://github.com/karimbeyrouti/ember-three-ui

Structure ThreeJS with Ember using templates
https://github.com/karimbeyrouti/ember-three-ui

ember threejs

Last synced: 9 days ago
JSON representation

Structure ThreeJS with Ember using templates

• Host: GitHub
• URL: https://github.com/karimbeyrouti/ember-three-ui
• Owner: karimbeyrouti
• License: mit
• Created: 2019-12-26T14:45:37.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T20:35:13.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T09:22:46.164Z (25 days ago)
• Topics: ember, threejs
• Language: JavaScript
• Homepage: https://karimbeyrouti.github.io/ember-three-ui/
• Size: 3.01 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
ember-three-ui

==============================================================================

This addon enables three.js scene hierarchy to be composed in templates. 

It currently support a small subset of the functionality provided by three.js, there

is lots to add and improve. However, hopefully this is a solid foundation for

future development.

This is the handlebars template for a simple scene:

```handlebars

  

    

    

  

```

and the corresponding JavaScript:

```javascript

import THREE from 'three';

import { inject as service } from '@ember/service';

import Component from '@glimmer/component';

import { tracked } from '@glimmer/tracking';

export default class DemoComponent extends Component {

  @service('ember-three/scene-manager') sceneManager;

  @tracked rotation = new THREE.Vector3();

  cameraPosition = new THREE.Vector3(0, 0, 5);

  geometry = new THREE.BoxGeometry(1, 1, 1);

  material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

  constructor() {

    super(...arguments);

    let emberThree = this.sceneManager.get(this.sceneId);

    emberThree.addRafCallback(this.render, this);

  }

  render() {

    this.rotation.x += 0.01;

    this.rotation.y += 0.01;

    this.rotation = this.rotation;

  }

}

```

[this](https://karimbeyrouti.github.io/ember-three-ui/?id=simple-scene) is what you should see.

Compatibility

------------------------------------------------------------------------------

* Ember.js v2.18 or above

* Ember CLI v2.13 or above

* Node.js v8 or above

Installation

------------------------------------------------------------------------------

```

ember install ember-three-ui

```

Demo

------------------------------------------------------------------------------

https://karimbeyrouti.github.io/ember-three-ui/

Usage

------------------------------------------------------------------------------

...

Contributing

------------------------------------------------------------------------------

See the [Contributing](CONTRIBUTING.md) guide for details.

License

------------------------------------------------------------------------------

This project is licensed under the [MIT License](LICENSE.md).