{"id":16318058,"url":"https://github.com/willviles/ember-3d","last_synced_at":"2025-03-22T21:31:41.235Z","repository":{"id":45680870,"uuid":"77612260","full_name":"willviles/ember-3d","owner":"willviles","description":"Fast \u0026 organized 3D WebGL scene creation in Ember CLI using Three.js.","archived":false,"fork":false,"pushed_at":"2017-05-03T07:59:08.000Z","size":55,"stargazers_count":20,"open_issues_count":5,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T14:53:46.700Z","etag":null,"topics":["animation-3d","ember","ember-3d","ember-addon","threejs","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/willviles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-29T12:57:10.000Z","updated_at":"2024-05-30T02:54:19.000Z","dependencies_parsed_at":"2022-07-30T11:48:03.138Z","dependency_job_id":null,"html_url":"https://github.com/willviles/ember-3d","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/willviles%2Fember-3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/willviles","download_url":"https://codeload.github.com/willviles/ember-3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245022581,"owners_count":20548563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-3d","ember","ember-3d","ember-addon","threejs","webgl"],"created_at":"2024-10-10T22:09:51.394Z","updated_at":"2025-03-22T21:31:40.913Z","avatar_url":"https://github.com/willviles.png","language":"JavaScript","readme":"Ember 3D [![npm](https://img.shields.io/npm/v/ember-3d.svg)](https://www.npmjs.com/package/ember-3d)\n======\n\nEmber 3D is an Ember addon for using [Three.js](https://github.com/mrdoob/three.js) - an easy to use, lightweight, javascript 3D library.\n\nIt is designed to:\n* Prescribe a solid file structure to Three.js code using ES6 modules.\n* Enable fast creation of Three.js [scenes](#scenes), [renderers](#renderers), [cameras](#cameras), [lighting](#lighting) and [objects](#objects) using a well defined set of abstractions.\n\n## Installation\n\n`ember install ember-3d`\n\nEmber 3D includes a shim for the Three.js library. Installing Ember 3D will allow you to use imports from the `three` module, like so:\n\n```javascript\nimport { BoxGeometry, Mesh, MeshPhongMaterial, Scene } from 'three';\n```\n\n### Requirements\n\n**Ember CLI \u003e=2.9.0**\n\nThe shim uses `app.import`'s new [AMD transformation](https://github.com/ember-cli/ember-cli/pull/5976) feature released in Ember CLI [2.9.0](https://github.com/ember-cli/ember-cli/blob/master/CHANGELOG.md#290).\n\n**Ember.js \u003e=2.7.0**\n\nDue to the use of the `uniqBy` method, this lib needs ember.js 2.7.0 or upwards.\n\n## Folder structure\n\nEmber 3D adds a folder named `3d` to your project's `app` folder. Ember 3D expects projects to be structured in the following manner:\n\n```\napp/\n├── 3d/\n|   └── scene-id/\n|       ├── camera.js\n|       ├── interactions/\n|           └── interaction-id.js\n|       ├── lighting.js\n|       ├── objects/\n|           └── object-id.js\n|       ├── renderer.js\n|       └── scene.js\n```\n\n## Components\n\nTo add a 3D scene to a template, use the `3d-scene` component with a dasherized version of the scene id:\n\n```handlebars\n{{3d-scene id=\"scene-id\"}}\n```\n\n## Scenes\n\nThe [BaseSceneMixin](https://github.com/willviles/ember-3d/blob/master/addon/scenes/base.js) simply creates a Three.js scene from the renderer defined in `renderer.js` \u0026 camera defined in `camera.js` and appends it to the DOM.\n\n```javascript\n// app/scene-id/scene.js\nimport SceneMixin from 'ember-3d/scenes/base';\n\nexport default SceneMixin.extend();\n```\n\n## Renderers\n\nEmber 3D's [WebGLRendererMixin](https://github.com/willviles/ember-3d/blob/master/addon/renderers/webgl.js) extends the [BaseRendererMixin](https://github.com/willviles/ember-3d/blob/master/addon/renderers/base.js), which automatically resizes the renderer on dimension changes of the `3d-scene`.\n\n```javascript\n// app/scene-id/renderer.js\nimport WebGLRendererMixin from 'ember-3d/renderers/webgl';\n\nexport default WebGLRendererMixin.extend({\n  options: {\n    alpha: true,\n    shadowMap: { enabled: true }\n  }\n});\n```\n\n## Cameras\n\nEmber 3D allows for the creation of two types of Three.js camera, `perspectiveCamera` and `orthographicCamera`.\n\n### Perspective Camera\n\nThe [PerspectiveCameraMixin](https://github.com/willviles/ember-3d/blob/master/addon/cameras/perspective.js) creates a Three.js `PerspectiveCamera`. The camera's `aspect` value is dynamically updated when the `3d-scene` dimensions change.\n\n```javascript\n// app/scene-id/camera.js\nimport PerspectiveCameraMixin from 'ember-3d/cameras/perspective';\n\nexport default PerspectiveCameraMixin.extend({\n  viewAngle: 75,\n  near: 1,\n  far: 10000,\n  setAspectDynamically: true,\n  position: {\n    x: 0,\n    y: 0,\n    z: 1000\n  }\n});\n```\n\n### Orthographic Camera\n\nThe [OrthographicCameraMixin](https://github.com/willviles/ember-3d/blob/master/addon/cameras/orthographic.js) creates a Three.js `OrthographicCamera`. Left, right, top and bottom frustums are dynamically updated when the `3d-scene` dimensions change.\n\n```javascript\n// app/scene-id/camera.js\nimport OrthographicCameraMixin from 'ember-3d/cameras/orthographic';\n\nexport default OrthographicCameraMixin.extend({\n  near: 1,\n  far: 10000,\n\n  position: {\n    x: 50,\n    y: 75,\n    z: 1000\n  }\n});\n```\n\n## Lighting\n\nThe [BaseLightingMixin](https://github.com/willviles/ember-3d/blob/master/addon/lighting/base.js) offers a simple method of registering lighting onto the Three.js scene using the `addLighting` function.\n\n```javascript\n// app/scene-id/lighting.js\nimport BaseLightingMixin from 'ember-3d/lighting/base';\n\nexport default BaseLightingMixin.extend({\n\n  addLighting() {\n    // Add lighting using:\n    // get(this, 'scene').add(YOUR_LIGHTING);\n  }\n\n});\n```\n\n## Objects\n\nThe [BaseObjectMixin](https://github.com/willviles/ember-3d/blob/master/addon/objects/base.js) prescribes a set of functions for registering 3D objects on your Three.js scene. It also exposes an `animate` function for animating your objects. The `BaseObjectMixin` can't be used to create objects itself, but you can use one of the following mixins extended from it:\n\n### Mesh\n\nTriangular polygon mesh based objects can be created and attached to the scene using the [MeshObjectMixin](https://github.com/willviles/ember-3d/blob/master/addon/objects/mesh.js). For example, the following code creates a cube and animates it:\n\n```javascript\n// app/scene-id/objects/cube.js\nimport Ember from 'ember';\nimport MeshObjectMixin from 'ember-3d/objects/mesh';\nimport { BoxGeometry, MeshBasicMaterial } from 'three';\n\nconst { get } = Ember;\n\nexport default MeshObjectMixin.extend({\n\n  geometry: new BoxGeometry(700, 700, 700, 10, 10, 10),\n  material: new MeshBasicMaterial({color: 0xfffff, wireframe: true}),\n\n  animate() {\n    let cube = get(this, 'object');\n\n    function loop() {\n      requestAnimationFrame(loop);\n      cube.rotation.x += 0.01;\n      cube.rotation.y += 0.01;\n    }\n\n    loop();\n  }\n\n});\n```\n\n### Group\n\nThe [GroupObjectMixin](https://github.com/willviles/ember-3d/blob/master/addon/objects/group.js) enables complex object building. Multiple meshes can be attached to a group, like so:\n\n```javascript\n// app/scene-id/objects/cube-group.js\nimport GroupObjectMixin from 'ember-3d/objects/group';\nimport { BoxGeometry, Mesh, MeshPhongMaterial } from 'three';\n\nexport default GroupObjectMixin.extend({\n\n  buildObject() {\n\n    // Add our cube to the group\n    let cube = this.createObject('cube');\n\n    this.addToGroup([\n      cube,\n      this.one(),\n  \t  this.two()\n    ]);\n\n  },\n\n  one() {\n  \tconst geometry = new BoxGeometry(60,50,50,1,1,1);\n  \tconst material = new MeshPhongMaterial({color: 0xf25346 });\n  \treturn new Mesh(geometry, material);\n\n  },\n\n  two() {\n    let one = this.one();\n    one.position.x = 50;\n    return one;\n\n  }\n\n});\n```\n\nOut-of-the-box support for other Three.js object types will be added in the near future.\n\n## Interactions\n\nInteractions offer a structured way to manage methods of interaction with your scene.\n\n### Mouse Move\n\nThe [MouseMoveInteractionMixin](https://github.com/willviles/ember-3d/blob/master/addon/interactions/mouse-move.js) listens to movements of the mouse and sets `mouseX` and `mouseY` properties on the component, accessible by all Ember 3D modules. The mixin can also return normalized positive or negative values based upon the height and width of the scene.\n\n```javascript\n// app/scene-id/interactions/mouse-move.js\nimport MouseMoveInteractionMixin from 'ember-3d/interactions/mouse-move';\n\nexport default MouseMoveInteractionMixin.extend({\n  normalizeMouseValues: true\n});\n```\n\nMore interactions will be added in the near future.\n\n## Plugins\n\nEmber 3D offers plugins for any features not included in the Three.js core module.\n\n* Orbit Controls [ember-3d-orbit-controls](https://github.com/willviles/ember-3d-orbit-controls) by [@willviles](https://github.com/willviles)\n\n## Using Three.js\n\nFor more information on how to use Three.js, please refer to the [documentation](https://threejs.org/docs/).\n\n## Contributing\n\nEmber 3D is in its infancy. It will seek to be a flexible and elegant addon for creating complex 3D scenes. Please feel free to contribute.\n\n### Feature requests\n\nCreate feature requests [here](https://github.com/willviles/ember-3d/issues/new) and please tag your issue with `feature-request`.\n\n\u003c!-- ## Installation\n\n* `git clone \u003crepository-url\u003e` this repository\n* `cd ember-3d`\n* `npm install`\n* `bower install`\n\n## Running\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillviles%2Fember-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillviles%2Fember-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillviles%2Fember-3d/lists"}