├── .ackrc ├── .gitignore ├── .jshintrc ├── .nojekyll ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist ├── aframe-core.js ├── aframe-core.js.map └── aframe-core.min.js ├── docs ├── architecture.md ├── components.md ├── components │ ├── camera.md │ ├── cursor.md │ ├── fog.md │ ├── geometry.md │ ├── light.md │ ├── loader.md │ ├── look-at.md │ ├── look-controls.md │ ├── material.md │ ├── position.md │ ├── raycaster.md │ ├── rotation.md │ ├── scale.md │ ├── sound.md │ ├── visible.md │ └── wasd-controls.md └── elements │ ├── animation.md │ ├── assets.md │ ├── entity.md │ ├── mixin.md │ └── scene.md ├── examples ├── _images │ ├── logo-mozilla-white.svg │ ├── pano │ │ ├── cubes.jpg │ │ ├── louvre.jpg │ │ └── tintamarre.jpg │ └── textures │ │ ├── carpet.jpg │ │ ├── marble.jpg │ │ ├── milkyway │ │ ├── README.md │ │ ├── nx.jpg │ │ ├── ny.jpg │ │ ├── nz.jpg │ │ ├── px.jpg │ │ ├── py.jpg │ │ └── pz.jpg │ │ ├── sun.jpg │ │ └── trefoil.png ├── _js │ ├── .gitkeep │ ├── a-example-link.js │ └── document-register-element.js ├── _sounds │ └── click.ogg ├── _style │ └── index.css ├── animation │ └── index.html ├── controls │ └── index.html ├── cube │ └── index.html ├── cursor │ └── index.html ├── cylinders │ └── index.html ├── fog │ └── index.html ├── geometries │ └── index.html ├── geometry-gallery │ └── index.html ├── geometry-translation │ └── index.html ├── index.html ├── lights │ └── index.html ├── look-at │ └── index.html ├── mixin │ └── index.html ├── model │ ├── index.html │ └── models │ │ ├── monster.dae │ │ ├── monster.jpg │ │ └── teapot.obj ├── opacity │ └── index.html ├── panoexplorer │ ├── images │ │ ├── city.jpg │ │ ├── sechelt.jpg │ │ ├── thumb-city.png │ │ ├── thumb-cubes.png │ │ └── thumb-sechelt.png │ └── index.html ├── physical │ └── index.html ├── texture │ └── index.html ├── towers │ └── index.html ├── video │ └── index.html └── visibility │ └── index.html ├── index.html ├── lib ├── VRLoader.js ├── three.js └── vendor │ ├── Raycaster.js │ ├── rStats.js │ └── wakelock │ ├── util.js │ └── wakelock.js ├── package.json ├── scripts └── gh-pages.js ├── src ├── components │ ├── camera.js │ ├── cursor.js │ ├── fog.js │ ├── geometry.js │ ├── index.js │ ├── light.js │ ├── loader.js │ ├── look-at.js │ ├── look-controls.js │ ├── material.js │ ├── position.js │ ├── raycaster.js │ ├── rotation.js │ ├── scale.js │ ├── sound.js │ ├── visible.js │ └── wasd-controls.js ├── constants │ ├── animation.js │ └── index.js ├── core │ ├── a-animation.js │ ├── a-assets.js │ ├── a-cubemap.js │ ├── a-entity.js │ ├── a-mixin.js │ ├── a-node.js │ ├── a-register-element.js │ ├── a-scene.js │ └── component.js ├── index.js └── utils │ ├── coerce.js │ ├── coordinates.js │ ├── debug.js │ ├── index.js │ └── src-loader.js ├── style ├── aframe-core.css └── rStats.css └── tests ├── README.md ├── __init.test.js ├── components ├── camera.test.js ├── cursor.test.js ├── fog.test.js ├── geometry.test.js ├── light.test.js ├── look-at.test.js ├── material.test.js ├── sound.test.js └── visible.test.js ├── core ├── a-animation.test.js ├── a-entity.test.js ├── a-scene.test.js └── component.test.js ├── helpers.js ├── karma.conf.js └── utils ├── coerce.test.js ├── coordinates.test.js └── objects.test.js /.ackrc: -------------------------------------------------------------------------------- 1 | --ignore-dir=.cache/ 2 | --ignore-dir=build/ 3 | --ignore-dir=dist/ 4 | --ignore-dir=gh-pages/ 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | .DS_Store 3 | build 4 | gh-pages/ 5 | node_modules 6 | npm-debug.log* 7 | -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ngokevin/aframe-core/139cc9d85cae2aff688bdc58d40c6a33af9a1ed4/.nojekyll -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - '0.12' 5 | 6 | install: 7 | - npm install 8 | - ./node_modules/.bin/mozilla-download ./firefox/ --product firefox --branch mozilla-central 9 | - export FIREFOX_NIGHTLY_BIN="./firefox/firefox/firefox-bin" 10 | 11 | before_script: 12 | - export DISPLAY=:99.0 13 | - sh -e /etc/init.d/xvfb start 14 | 15 | script: 16 | - $CI_ACTION 17 | 18 | env: 19 | global: 20 | - TEST_SUITE=unit 21 | matrix: 22 | - CI_ACTION="npm run test:ci" 23 | 24 | branches: 25 | only: 26 | - master 27 | - dev -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Before contributing code, please note: 2 | 3 | * You agree to license your contributions under the [license](LICENSE). 4 | * Follow [jshint](http://eslint.org/docs/rules/) [see our rules](.jshintrc). 5 | 6 | Thank you for contributing code. Read on for instructions. 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright © 2015 A-Frame. 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Archived repo for what was previously the core of A-Frame before it was moved into the A-Frame repository proper. 2 | -------------------------------------------------------------------------------- /docs/architecture.md: -------------------------------------------------------------------------------- 1 | title: "Entity-Component Architecture" 2 | --- 3 | 4 | A-Frame is based on an entity-component architecture, a pattern common in game 5 | development that emphasizes composability: 6 | 7 | - An **entity* is a general purpose object in the scene (e.g., player, enemy, tree, sky). 8 | - A **component** consists of attributes that modifies the behavior or functionality of an 9 | entity. 10 | 11 | An entity can have multiple components, and an entity's behavior can be changed 12 | at runtime by adding, removing, or modifying components. As we will see below, 13 | this will provide great flexibility over traditional inheritance patterns. 14 | 15 | ## Analogy 16 | 17 | As an abstract example, imagine a car is an entity: 18 | 19 | - We can add an "color" component which affects the color of the car. 20 | - We can add an "engine" component which has attributes such as "horsepower" or 21 | "weight" which affect the speed of the car. 22 | - We might add a "tire" component which has attributes such as "grip" which 23 | affects the traction of the car. 24 | 25 | These components would be able to be mixed and matched and even be used with 26 | with other vehicles such as airplanes, motorcycles, or boats (where we don't 27 | specify a "tire" component). 28 | 29 | ## Usage 30 | 31 | In A-Frame: 32 | 33 | - Entities are HTML elements, ``````. 34 | - Components are HTML attributes that are set on the entity. 35 | - Component attributes are defined by using a CSS-like syntax. 36 | 37 | For example, to create a pink cube, which requires the `geometry` and 38 | `material` components: 39 | 40 | ```html 41 | 43 | ``` 44 | 45 | For all the web developers, the syntax might seem new, or even odd, but the 46 | composability makes it powerful to be able to customize entities in the system. 47 | Perhaps we want our cube to give off light, we can simply add the `light` 48 | component. 49 | 50 | ```html 51 | 53 | ``` 54 | 55 | Perhaps we want our cube to also emit a sound. We can add the `sound` 56 | component. And we want to move the cube a little, we can use the `position` 57 | component. 58 | 59 | ```html 60 | 63 | ``` 64 | 65 | We see that components make it very easy to compose entities with mixtures of 66 | behavior and functionality. And everyone can write their own components to 67 | modify entities however they desire. For example, someone might write a 68 | `vibrate` component that makes the entity vibrate, regardless of what kind of 69 | entity it is. Although it might seem verbose, it provides a core foundation for 70 | abstract on top of. 71 | -------------------------------------------------------------------------------- /docs/components/camera.md: -------------------------------------------------------------------------------- 1 | title: "Camera" 2 | category: component 3 | --- 4 | 5 | The camera component defines from what perspective the user views the scene. 6 | It is often paired with control-related components such that user input moves 7 | and rotates the camera. 8 | 9 | ```html 10 | 11 | 12 | 13 | ``` 14 | 15 | | Attribute | Description | Default Value | 16 | |-----------|--------------------------------------------------------------------------------------|----------------| 17 | | far | Camera frustum far clipping plane. | 10000 | 18 | | fov | Field of view, in degrees | 80 | 19 | | near | Camera frustum near clipping plane. | 0.5 | 20 | -------------------------------------------------------------------------------- /docs/components/cursor.md: -------------------------------------------------------------------------------- 1 | title: "Cursor" 2 | category: component 3 | --- 4 | 5 | The cursor component defines interaction with the scene through clicking and 6 | gazing, by using a raycaster to determine which object has been clicked. When the mouse 7 | is clicked, the closest visible entity intersecting the cursor will have a DOM click event 8 | triggered. 9 | 10 | For example, we define a cursor in the shape of a ring positioned on the center 11 | of the screen. Whenever the cursor clicks on the cube, we can listen the the 12 | click event. This might feel familiar to web developers. 13 | 14 | ```html 15 | 17 | 20 | ``` 21 | 22 | ```js 23 | document.querySelector('#cube').addEventListener('click', function () { 24 | this.setAttribute('material', 'color', 'red'); 25 | console.log('I was clicked!'); 26 | }); 27 | ``` 28 | 29 | | Attribute | Description | Default Value | 30 | |-------------|--------------------------------------------------------------------------|----------------| 31 | | fuse | Whether cursor should also be fuse-based. | false | 32 | | maxDistance | Maximum distance to check for intersections on entities for clicks. | 5 | 33 | | timeout | How long to wait in milliseconds to trigger a click event if fuse-based. | 1500 | 34 | 35 | ## Fuse-Based Cursor 36 | 37 | If the cursor is set to be fuse-based, the cursor will trigger a click if the 38 | user gazes at one entity for a set amount of time. Imagine a laser strapped to 39 | the user's head, and the laser extends out into the scene. After the timeout, 40 | whatever entity the laser intersects first will be clicked. 41 | 42 | Fuse-based interactions can feel natural for VR and do not require any 43 | additional input devices other than the headset. 44 | -------------------------------------------------------------------------------- /docs/components/fog.md: -------------------------------------------------------------------------------- 1 | title: "Fog" 2 | category: component 3 | --- 4 | 5 | The fog component defines how entities get obscured in fog given distance from 6 | the camera. Note that the fog component is a global component that applies only 7 | to the `````` element. 8 | 9 | ```html 10 | 11 | ``` 12 | 13 | Given the type of fog distribution, different attributes will apply. 14 | 15 | | Attribute | Description | Default Value | 16 | |-----------|--------------------------------------------------------------------------------------|----------------| 17 | | type | Type of fog distribution. Can be `linear` or `exponential`. | linear | 18 | | color | Color of fog. For example, if set to black, far away objects will be rendered black. | #000 | 19 | 20 | ## Linear Fog 21 | 22 | Linear fog grows linearly denser with distance. 23 | 24 | | Attribute | Description | Default Value | 25 | |-----------|--------------------------------------------------------------------------------------------|----------------| 26 | | near | Minimum distance to start applying fog. Objects closer than this won't be affected by fog. | 1 | 27 | | far | Maximum distance to stop applying fog. Objects farther than this won't be affected by fog. | 1000 | 28 | 29 | ## Exponential Fog 30 | 31 | Exponential fog grows exponentially denser with distance. 32 | 33 | | Attribute | Description | Default Value | 34 | |-----------|--------------------------------------------------------------------------------------------|----------------| 35 | | density | How quickly the fog grows dense. | 0.00025 | 36 | -------------------------------------------------------------------------------- /docs/components/light.md: -------------------------------------------------------------------------------- 1 | title: "Light" 2 | category: component 3 | --- 4 | 5 | The light component defines the entity as a source of light. Light affects all 6 | materials that have not specified a flat shading model with `shader: flat`. 7 | Note that lights are computationally expensive and that we should limit the 8 | number of lights in the scene. 9 | 10 | ```html 11 | 12 | ``` 13 | 14 | By default, A-Frame scenes inject default lighting, an ambient light and a 15 | directional light. These default lights are visible in the DOM with the 16 | `data-aframe-default-light` attribute. However, whenever any lights are added, 17 | the default lights are removed from the scene. 18 | 19 | We will go through the different types of lights and their respective 20 | attributes one-by-one. 21 | 22 | | Attribute | Description | Default Value | 23 | |-----------|-----------------------------------------------------------------|---------------| 24 | | type | One of `ambient`, `directional`, `hemisphere`, `point`, `spot`. | directional | 25 | | color | Light color. | #fff | 26 | 27 | ## Ambient 28 | 29 | Ambient lights are applied to all entities in the scene globally. They are 30 | defined only by the `color` attribute. And position, rotation, scale have no 31 | effect on ambient lights. 32 | 33 | It is recommended to have some form of ambient light such that shadowed areas 34 | are not completely black and to mimic indirect lighting. 35 | 36 | ```html 37 | 38 | ``` 39 | 40 | ## Directional 41 | 42 | Directional lights can be thought of as a light source infinitely far away, but 43 | shining from a specific direction, like the sun. Thus, absolute position do not 44 | have an effect on the intensity of the light on an entity. We can specify the 45 | direction using the `position` component. 46 | 47 | The example below creates a light source shining from the upper-left at a 48 | 45-degree angle. Note that because only the vector matters, `position="-100 100 49 | 0"` and `position="-1 1 0"` are equivalent. 50 | 51 | ```html 52 | 53 | ``` 54 | 55 | | Attribute | Description | Default Value | 56 | |-----------|-----------------|---------------| 57 | | intensity | Light strength. | 1.0 | 58 | 59 | ## Hemisphere 60 | 61 | Hemisphere lights can be thought of as an ambient light, but with two colors of 62 | light, one from above (`color`) and one from below (`groundColor`). This can be 63 | useful for scenes with two distnct lighting colors (e.g., a grassy field under 64 | a gray sky). 65 | 66 | ```html 67 | 68 | ``` 69 | 70 | | Attribute | Description | Default Value | 71 | |-------------|-------------------------|---------------| 72 | | groundColor | Light color from below. | #fff | 73 | | intensity | Light strength. | 1.0 | 74 | 75 | ## Point 76 | 77 | Point lights, unlike directional lights, are omni-directional and affect 78 | materials depending on its position and distance. They can be thought of as a 79 | light bulb. The closer the light bulb gets to an object, the greater the object 80 | is lit. 81 | 82 | ```html 83 | 85 | ``` 86 | 87 | | Attribute | Description | Default Value | 88 | |-------------|------------------------------------------------------------------------------------------------------------|---------------| 89 | | decay | Amount the light dims along the distance of the light. | 1.0 | 90 | | distance | Distance where intensity becomes 0. If `distance` is 0, then the point light does not decay with distance. | 0.0 | 91 | | intensity | Light strength. | 1.0 | 92 | 93 | ## Spot 94 | 95 | Spot lights are like point lights in the sense that they affect materials 96 | depending on its position and distance, but spot lights are not 97 | omni-directional. They mainly cast light in one direction, like the Bat-Signal. 98 | 99 | ```html 100 | 101 | ``` 102 | 103 | | Attribute | Description | Default Value | 104 | |-------------|------------------------------------------------------------------------------------------------------------|---------------| 105 | | angle | Maximum extent of spot light from its direction, in degrees. | 60 | 106 | | decay | Amount the light dims along the distance of the light. | 1.0 | 107 | | distance | Distance where intensity becomes 0. If `distance` is 0, then the point light does not decay with distance. | 0.0 | 108 | | exponent | Rapidity of falloff of light from its target direction. | 10.0 | 109 | | intensity | Light strength. | 1.0 | 110 | -------------------------------------------------------------------------------- /docs/components/loader.md: -------------------------------------------------------------------------------- 1 | title: "Loader" 2 | category: component 3 | --- 4 | 5 | The loader component defines the appearance of the entity by loading in a 3D 6 | model. 7 | 8 | Note that this component may be subject to change due to design decisions and 9 | support landing for the GLTF format. 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | | Attribute | Description | 16 | |-----------|-------------------------------| 17 | | format | Format of the 3D model asset. | 18 | | src | URL to a 3D asset. | 19 | -------------------------------------------------------------------------------- /docs/components/look-at.md: -------------------------------------------------------------------------------- 1 | title: "Look-At" 2 | category: component 3 | --- 4 | 5 | The look-at component defines the behavior for an entity to dynamically face 6 | towards another entity or position. The look-at component can take either a 7 | static position or a query selector to another entity. 8 | 9 | Example applications might include having a monster stare at the player: 10 | 11 | ```html 12 | 14 | 15 | / 16 | ``` 17 | 18 | Or maybe having a dog look at a running squirrel: 19 | 20 | ```html 21 | 23 | 24 | 25 | 26 | 27 | ``` 28 | 29 | Described in the table below are possible types of values: 30 | 31 | | Value | Description | 32 | |-----------|--------------------------------------------------------------------- 33 | | position | An XYZ coordinate. The entity will face towards a static position. | 34 | | selector | A query selector indicating another entity to track. If the other entity is moving then the look-at component will track the moving entity. | 35 | -------------------------------------------------------------------------------- /docs/components/look-controls.md: -------------------------------------------------------------------------------- 1 | title: "Look Controls" 2 | category: component 3 | --- 4 | 5 | The look-controls component defines the behavior of an entity to 6 | 7 | - Track the rotation of a VR headset 8 | - Rotate when the mouse is clicked and dragged. 9 | - Rotate when a touchscreen is tapped and dragged. 10 | 11 | Notice that look-controls acts upon the VR headset, mouse, *and* touchscreen 12 | inputs. A-Frame controls are grouped together based upon configuration and behavior 13 | rather than by device. 14 | 15 | The look-controls component is generally meant to be registered alongside the 16 | camera component. 17 | 18 | ```html 19 | 20 | ``` 21 | 22 | | Attribute | Description | Default Value | 23 | |-----------|----------------------------------------------------- 24 | | enabled | Whether look controls are enabled. | true | 25 | -------------------------------------------------------------------------------- /docs/components/material.md: -------------------------------------------------------------------------------- 1 | title: "Material" 2 | category: component 3 | --- 4 | 5 | The material component defines the appearance of an entity. It can define 6 | attributes such as color, opacity, or texture. A geometry component is usually 7 | defined alongside the material component. 8 | 9 | Here is an example defining a red material on a box geometry, creating a red 10 | cube. 11 | 12 | ```html 13 | 14 | ``` 15 | 16 | | Attribute | Description | Default Value | 17 | |--------------|------------------------------------------------------------------------------------------------------------------------------------------------|---------------| 18 | | color | Base color of the geometry. | #fff | 19 | | envMap | Environment cubemap texture for reflections. Can be a selector to or a comma-separated list of URLs. | None | 20 | | height | Height of video if defining a video texture. | 360 | 21 | | metalness | How metallic the material is from 0 to 1. Does not apply if `shader` is set to `flat`. | 0.5 | 22 | | opacity | Extent of transparency. If the `transparent` attribute is not true, then the material will remain opaque and `opacity` will only affect color. | 1.0 | 23 | | reflectivity | How reflective the material is from 0 to 1 if the `envMap` attribute is set. | 1.0 | 24 | | repeat | How many times a texture (defined by `src`) repeats in the X and Y direction. | 1 1 | 25 | | roughness | How rough the material is from 0 to 1. A rougher material will scatter reflected light in more directions than a smooth material. Does not apply if `shader` is set to `flat` | 0.5 | 26 | | transparent | Whether material is transparent. Transparent entities are rendered after non-transparent entities. | false | 27 | | shader | Shading model. Defaults to physically-based shading but can also be set to `flat` shading. | standard | 28 | | src | Image or video texture map. Can either be a selector to an or