├── .gitignore
├── LICENSE
├── README.md
├── dist
├── .gitkeep
├── aframe-sprite-component.js
└── aframe-sprite-component.min.js
├── examples
├── basic
│ ├── hotspot.png
│ └── index.html
├── build.js
├── index.html
└── main.js
├── index.js
├── package.json
└── scripts
└── unboil.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .sw[ponm]
2 | examples/node_modules/
3 | gh-pages
4 | node_modules/
5 | npm-debug.log
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Kevin Ngo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## aframe-sprite-component
2 |
3 | An implementation of the Sprite primitive from ThreeJS – a bitmap image always facing the camera – for [A-Frame](https://aframe.io).
4 |
5 | Have a look at the [examples](https://tizzle.github.io/aframe-sprite-component/)
6 |
7 | ### API
8 |
9 | | Property | Description | Default Value |
10 | | -------- | ----------- | ------------- |
11 | | src | String – the name of the image to use in the SpriteMaterial | '' |
12 | | resize | String – resize vector to scale the Sprite | '1 1 1' |
13 |
14 |
15 | ### Installation
16 |
17 | #### Browser
18 |
19 | Install and use by directly including the [browser files](dist):
20 |
21 | ```html
22 |
23 | A-Frame using a Sprite
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ```
45 |
46 | #### npm
47 |
48 | Install via npm:
49 |
50 | ```bash
51 | npm install aframe-sprite-component
52 | ```
53 |
54 | Then register and use.
55 |
56 | ```js
57 | require('aframe');
58 | require('aframe-sprite-component');
59 | ```
60 |
--------------------------------------------------------------------------------
/dist/.gitkeep:
--------------------------------------------------------------------------------
1 | `npm run dist` to generate browser files.
2 |
--------------------------------------------------------------------------------
/dist/aframe-sprite-component.js:
--------------------------------------------------------------------------------
1 | /******/ (function(modules) { // webpackBootstrap
2 | /******/ // The module cache
3 | /******/ var installedModules = {};
4 |
5 | /******/ // The require function
6 | /******/ function __webpack_require__(moduleId) {
7 |
8 | /******/ // Check if module is in cache
9 | /******/ if(installedModules[moduleId])
10 | /******/ return installedModules[moduleId].exports;
11 |
12 | /******/ // Create a new module (and put it into the cache)
13 | /******/ var module = installedModules[moduleId] = {
14 | /******/ exports: {},
15 | /******/ id: moduleId,
16 | /******/ loaded: false
17 | /******/ };
18 |
19 | /******/ // Execute the module function
20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21 |
22 | /******/ // Flag the module as loaded
23 | /******/ module.loaded = true;
24 |
25 | /******/ // Return the exports of the module
26 | /******/ return module.exports;
27 | /******/ }
28 |
29 |
30 | /******/ // expose the modules object (__webpack_modules__)
31 | /******/ __webpack_require__.m = modules;
32 |
33 | /******/ // expose the module cache
34 | /******/ __webpack_require__.c = installedModules;
35 |
36 | /******/ // __webpack_public_path__
37 | /******/ __webpack_require__.p = "";
38 |
39 | /******/ // Load entry module and return exports
40 | /******/ return __webpack_require__(0);
41 | /******/ })
42 | /************************************************************************/
43 | /******/ ([
44 | /* 0 */
45 | /***/ function(module, exports) {
46 |
47 | AFRAME.registerComponent('sprite', {
48 |
49 | schema: {
50 | src: {
51 | default: ''
52 | },
53 | resize:{
54 | default: '1 1 1'
55 | }
56 | },
57 |
58 |
59 | init: function()
60 | {
61 | this.textureLoader = new THREE.TextureLoader();
62 | },
63 |
64 |
65 | play: function()
66 | {
67 | console.log( this.data.src );
68 |
69 | this.map = this.textureLoader.load(this.data.src);
70 |
71 | this.material = new THREE.SpriteMaterial({
72 | map: this.map
73 | });
74 |
75 | this.sprite = new THREE.Sprite(this.material);
76 |
77 | resizeData = this.data.resize.split(' ');
78 | this.sprite.scale.set( resizeData[0], resizeData[1], resizeData[2] );
79 |
80 | this.el.setObject3D('mesh', this.sprite);
81 | },
82 |
83 |
84 | remove: function() {
85 | console.log('remove sprite');
86 | if (this.mesh) this.el.removeObject3D('mesh');
87 | }
88 |
89 | });
90 |
91 | AFRAME.registerPrimitive('a-sprite', {
92 | defaultComponents: {
93 | sprite: {}
94 | },
95 | mappings: {
96 | src: 'sprite.src',
97 | resize: 'sprite.resize'
98 | }
99 | });
100 |
101 |
102 | /***/ }
103 | /******/ ]);
--------------------------------------------------------------------------------
/dist/aframe-sprite-component.min.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(i){if(s[i])return s[i].exports;var r=s[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var s={};return t.m=e,t.c=s,t.p="",t(0)}([function(e,t){AFRAME.registerComponent("sprite",{schema:{src:{"default":""},resize:{"default":"1 1 1"}},init:function(){this.textureLoader=new THREE.TextureLoader},play:function(){console.log(this.data.src),this.map=this.textureLoader.load(this.data.src),this.material=new THREE.SpriteMaterial({map:this.map}),this.sprite=new THREE.Sprite(this.material),resizeData=this.data.resize.split(" "),this.sprite.scale.set(resizeData[0],resizeData[1],resizeData[2]),this.el.setObject3D("mesh",this.sprite)},remove:function(){console.log("remove sprite"),this.mesh&&this.el.removeObject3D("mesh")}}),AFRAME.registerPrimitive("a-sprite",{defaultComponents:{sprite:{}},mappings:{src:"sprite.src",resize:"sprite.resize"}})}]);
--------------------------------------------------------------------------------
/examples/basic/hotspot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tizzle/aframe-sprite-component/53cb1a7df30f0713845170eaae1a80c450f4a0c8/examples/basic/hotspot.png
--------------------------------------------------------------------------------
/examples/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | A-Frame Example Component - Basic
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | A-Frame Example Component
4 |
5 |
22 |
23 |
24 | A-Frame Example Component
25 | Basic
26 | This is a basic example.
27 |
28 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
1 | require('aframe');
2 | require('../index.js');
3 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | AFRAME.registerComponent('sprite', {
2 |
3 | schema: {
4 | src: {
5 | default: ''
6 | },
7 | resize:{
8 | default: '1 1 1'
9 | }
10 | },
11 |
12 |
13 | init: function()
14 | {
15 | this.textureLoader = new THREE.TextureLoader();
16 | },
17 |
18 |
19 | play: function()
20 | {
21 | console.log( this.data.src );
22 |
23 | this.map = this.textureLoader.load(this.data.src);
24 |
25 | this.material = new THREE.SpriteMaterial({
26 | map: this.map
27 | });
28 |
29 | this.sprite = new THREE.Sprite(this.material);
30 |
31 | resizeData = this.data.resize.split(' ');
32 | this.sprite.scale.set( resizeData[0], resizeData[1], resizeData[2] );
33 |
34 | this.el.setObject3D('mesh', this.sprite);
35 | },
36 |
37 |
38 | remove: function() {
39 | console.log('remove sprite');
40 | if (this.mesh) this.el.removeObject3D('mesh');
41 | }
42 |
43 | });
44 |
45 | AFRAME.registerPrimitive('a-sprite', {
46 | defaultComponents: {
47 | sprite: {}
48 | },
49 | mappings: {
50 | src: 'sprite.src',
51 | resize: 'sprite.resize'
52 | }
53 | });
54 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "aframe-sprite-component",
3 | "version": "0.1.1",
4 | "description": "A ThreeJS Sprite for A-Frame.",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "browserify examples/main.js -o examples/build.js",
8 | "dev": "budo examples/main.js:build.js --dir examples --port 8000 --live --open",
9 | "dist": "webpack index.js dist/aframe-sprite-component.js && webpack -p index.js dist/aframe-sprite-component.min.js",
10 | "lint": "semistandard -v | snazzy",
11 | "postpublish": "npm run dist",
12 | "preghpages": "npm run build && shx rm -rf gh-pages && shx mkdir gh-pages && shx cp -r examples/* gh-pages",
13 | "ghpages": "npm run preghpages && ghpages -p gh-pages",
14 | "unboil": "node scripts/unboil.js"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/tizzle/aframe-sprite-component.git"
19 | },
20 | "keywords": [
21 | "aframe",
22 | "aframe-component",
23 | "aframe-vr",
24 | "vr",
25 | "mozvr",
26 | "webvr"
27 | ],
28 | "author": "Till Hinrichs ",
29 | "license": "MIT",
30 | "bugs": {
31 | "url": "https://github.com/tizzle/aframe-sprite-component/issues"
32 | },
33 | "homepage": "https://github.com/tizzle/aframe-sprite-component#readme",
34 | "devDependencies": {
35 | "aframe": "^0.2.0",
36 | "browserify": "^13.0.0",
37 | "browserify-css": "^0.9.1",
38 | "budo": "^8.2.2",
39 | "ghpages": "^0.0.8",
40 | "inquirer": "^1.0.2",
41 | "randomcolor": "^0.4.4",
42 | "semistandard": "^8.0.0",
43 | "shelljs": "^0.7.0",
44 | "shx": "^0.1.1",
45 | "snazzy": "^4.0.0",
46 | "webpack": "^1.13.0"
47 | },
48 | "semistandard": {
49 | "ignore": [
50 | "examples/build.js",
51 | "dist/**"
52 | ]
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/scripts/unboil.js:
--------------------------------------------------------------------------------
1 | /* global find, ls, sed */
2 | require('shelljs/global');
3 | var exec = require('child_process').exec;
4 | var inquirer = require('inquirer');
5 |
6 | // You can manually add configuration options here if you don't want to go through the
7 | // interactive script or if the interactive script is not working.
8 | var CONFIG = {
9 | // What is your component's short-name? (e.g., `rick-roll` for aframe-rick-roll-component).
10 | shortname: '',
11 | // What is your component's long-name? (e.g., `Rick Roll` for A-Frame Rick Roll Component).
12 | longname: '',
13 | // Where is your component on GitHub (e.g., yourusername/aframe-rick-roll-component).
14 | repo: '',
15 | // Who are you? (e.g., Jane John ).
16 | author: ''
17 | };
18 |
19 | // ---
20 |
21 | exec("sed '1,/--trim--/d' README.md | tee README.md");
22 |
23 | if (CONFIG.shortname && CONFIG.longname && CONFIG.repo) {
24 | run(CONFIG);
25 | process.exit(0);
26 | }
27 |
28 | var q1 = {
29 | name: 'shortname',
30 | message: 'What is your component\'s short-name? (e.g., `rick-roll` for aframe-rick-roll-component, ``)',
31 | type: 'input'
32 | };
33 |
34 | var q2 = {
35 | name: 'longname',
36 | message: 'What is your component\'s long-name? (e.g., `Rick Roll` for A-Frame Rick Roll Component)',
37 | type: 'input'
38 | };
39 |
40 | var q3 = {
41 | name: 'repo',
42 | message: 'Where is your component on Github? (e.g., yourusername/aframe-rick-roll-component)',
43 | type: 'input'
44 | };
45 |
46 | var q4 = {
47 | name: 'author',
48 | message: 'Who are you? (e.g., Jane John )',
49 | type: 'input'
50 | };
51 |
52 | inquirer.prompt([q1, q2, q3, q4], run);
53 |
54 | function run (ans) {
55 | ls(['index.js', 'package.json', 'README.md']).forEach(function (file) {
56 | sed('-i', 'aframe-example-component', 'aframe-' + ans.shortname + '-component', file);
57 | sed('-i', 'Example Component', ans.longname + ' Component', file);
58 | sed('-i', 'Example component', ans.longname + ' component', file);
59 | sed('-i', "'example'", "'" + ans.shortname + "'", file);
60 | });
61 |
62 | ls('README.md').forEach(function (file) {
63 | sed('-i', 'example component', ans.longname + ' component', file);
64 | sed('-i', 'example=', ans.shortname + '=', file);
65 | });
66 |
67 | find('examples').filter(function (file) { return file.match(/\.html/); }).forEach(function (file) {
68 | sed('-i', 'Example Component', ans.longname + ' Component', file);
69 | sed('-i', 'ngokevin/aframe-component-boilerplate', ans.repo, file);
70 | });
71 |
72 | ls(['package.json', 'README.md']).forEach(function (file) {
73 | sed('-i', 'aframe-example-component', 'aframe-' + ans.shortname + '-component', file);
74 | sed('-i', 'ngokevin/aframe-component-boilerplate', ans.repo, file);
75 | sed('-i', 'Kevin Ngo ', ans.author, file);
76 | });
77 | }
78 |
--------------------------------------------------------------------------------