-
Notifications
You must be signed in to change notification settings - Fork 423
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
2,937 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,89 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>A-Frame Camera Recorder Component</title> | ||
| <meta name="description" content="A component to film and record A-Frame scenes with a controlled camera (pans, dollies, tilts)."></meta> | ||
| <title>A-Frame camera-recorder Component</title> | ||
| <meta name="description" content=""></meta> | ||
| <style> | ||
| html { | ||
| background: #33425B; | ||
| color: #FAFAFA; | ||
| background: #497285; | ||
| color: #DFEBED; | ||
| font-family: monospace; | ||
| font-size: 20px; | ||
| padding: 10px 20px; | ||
| } | ||
| h1 { | ||
| h1, | ||
| h2 { | ||
| font-weight: 300; | ||
| } | ||
| a { | ||
| color: #FAFAFA; | ||
| display: block; | ||
| padding: 15px 0; | ||
| h1 { | ||
| margin-bottom: 0; | ||
| } | ||
| img { | ||
| max-width: 320px; | ||
| h1 a { | ||
| color: #DFEBED; | ||
| } | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| a { | ||
| color: #F78536; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| padding: 5px 0; | ||
| text-decoration: none; | ||
| transition: all .1s; | ||
| } | ||
| a:hover { | ||
| color: #2B4450; | ||
| } | ||
| #examples { | ||
| display: flex; | ||
| list-style: none; | ||
| flex-wrap: wrap; | ||
| padding: 5px 0 0; | ||
| padding-top: 5px; | ||
| } | ||
| ul li { | ||
| #examples li { | ||
| margin-right: 30px; | ||
| padding: 5px 0 30px; | ||
| padding: 5px 0; | ||
| } | ||
| ul a { | ||
| #examples a { | ||
| background-size: cover; | ||
| display: block; | ||
| padding: 0; | ||
| height: 320px; | ||
| width: 320px; | ||
| } | ||
| ul h3, | ||
| ul p { | ||
| #examples h3, | ||
| #examples p { | ||
| max-width: 320px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>A-Frame Camera Recorder Component</h1> | ||
| <h1><i>camera-recorder</i> Component for <a href="https://aframe.io">A-Frame</a></h1> | ||
|
|
||
| <a class="back" href="https://ngokevin.github.io/kframe/">← K-Frame</a> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="examples/basic/" style="background-image: url(https://cloud.githubusercontent.com/assets/674727/24217331/ba3d5b86-0efc-11e7-8a7c-ac74b3f35a65.png)"></a> | ||
| <h3>Basic</h3> | ||
| <p>This is a basic example.</p> | ||
| </li> | ||
| <p>A component to film and record A-Frame scenes with a controlled camera (pans, dollies, tilts).</p> | ||
|
|
||
| <h2>Examples</h2> | ||
|
|
||
| <ul id="examples"> | ||
|
|
||
| <li> | ||
| <a href="examples/basic/" style="background-color: #222; background-image: url()"></a> | ||
| <h3>A-Frame Camera Recorder Component - Basic</h3> | ||
| <p>Basic example for Camera Recorder component.</p> | ||
| </li> | ||
|
|
||
| </ul> | ||
|
|
||
| <!-- GitHub Corner. --> | ||
| <a href="https://github.com/ngokevin/kframe" class="github-corner"> | ||
| <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;"> | ||
| <!--githubcorner--> | ||
| <a href="https://github.com/ngokevin/kframe/tree/master/components/camera-recorder/" class="github-corner"> | ||
| <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: absolute; top: 0; border: 0; right: 0"> | ||
| <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path> | ||
| </svg> | ||
| </a> | ||
| <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}} | ||
| </style> | ||
| <!--endgithubcorner--> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .sw[ponm] | ||
| examples/build.js | ||
| examples/node_modules/ | ||
| gh-pages | ||
| node_modules/ | ||
| npm-debug.log | ||
| .component | ||
| package-lock.json | ||
| yarn.lock |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| language: node_js | ||
| addons: | ||
| firefox: 'latest' | ||
| node_js: | ||
| - '6.9' | ||
|
|
||
| install: | ||
| - npm install | ||
| - ./node_modules/.bin/mozilla-download ./firefox/ --product firefox --branch mozilla-aurora | ||
| - export FIREFOX_NIGHTLY_BIN="./firefox/firefox/firefox-bin" | ||
|
|
||
| before_script: | ||
| - export DISPLAY=:99.0 | ||
| - sh -e /etc/init.d/xvfb start | ||
|
|
||
| script: | ||
| - $CI_ACTION | ||
|
|
||
| env: | ||
| global: | ||
| - TEST_SUITE=unit | ||
| matrix: | ||
| - CI_ACTION="npm run test" | ||
| - CI_ACTION="npm run dist" | ||
| # - CI_ACTION="npm run lint" | ||
|
|
||
| branches: | ||
| only: | ||
| - master | ||
|
|
||
| cache: | ||
| directories: | ||
| - node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| The MIT License (MIT) | ||
|
|
||
| Copyright (c) 2017 Kevin Ngo <me@ngokevin.com> | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| ## aframe-orbit-controls-component | ||
|
|
||
| [](https://npmjs.org/package/aframe-orbit-controls-component) | ||
| [](https://npmjs.org/package/aframe-orbit-controls-component) | ||
|
|
||
| Orbit controls component for [A-Frame](https://aframe.io). | ||
|
|
||
|  | ||
|
|
||
| Automatically toggles `look-controls` on and off when entering and exiting VR. | ||
|
|
||
| Great for using as a viewer, better and easier than using WASD + mouse-drag, | ||
| or being stuck in the same position on mobile. | ||
|
|
||
| The other A-Frame orbit controls components were weird since they fully ported | ||
| the `THREE.OrbitControls` logic into a component. This component just straight | ||
| up uses `THREE.OrbitControls` in a clean and performant way. | ||
|
|
||
| ### API | ||
|
|
||
| Same API as | ||
| [`THREE.OrbitControls`](https://threejs.org/docs/#examples/controls/OrbitControls), | ||
| supports all the properties. | ||
|
|
||
| | Property | Description | Default Value | | ||
| | -------- | ----------- | ------------- | | ||
| | autoRotate | Set to true to automatically rotate around the target. | false | | ||
| | autoRotateSpeed | How fast to rotate around the target. | 2 (30 seconds per rotation at 60fps) | | ||
| | dampingFactor | Damping inertia if `enableDamping`. | 0.1 | | ||
| | enabled | Whether enabled. | true | | ||
| | enableDamping | Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. | true | | ||
| | enableKeys | Enable arrow keys. | true | | ||
| | enablePan | Enable panning (i.e., right click drag or three finger drag). | true | | ||
| | enableRotate | Enable rotation (i.e., left click drag or single finger drag). Use Azimuth angles to constrain to single axis. | true | | ||
| | enableZoom | Enable zoom (i.e., scroll or pinch). | true | | ||
| | initialPosition | Initial position of the camera. Set this rather than `position`. | 0 0 0 | | ||
| | keyPanSpeed | How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress. | 7 (pixels per keypress) | | ||
| | minAzimuthAngle | How far you can orbit horizontally, lower limit. From -180 to 180 degrees. | Infinity (no limit) | | ||
| | maxAzimuthAngle | How far you can orbit horizontally, upper limit. From -180 to 180 degrees. | Infinity (no limit) | | ||
| | maxDistance | How far you can dolly out. | Infinity | | ||
| | maxPolarAngle | How far you can orbit vertically, upper limit. Range is 0 to 180 degrees. | 90 | | ||
| | minDistance | How far you can dolly in. | 0 | | ||
| | minPolarAngle | How far you can orbit vertically, lower limit. Range is 0 to 180 degrees. | 0 | | ||
| | minZoom | How far you can zoom in (OrthographicCamera only). | 0 | | ||
| | panSpeed | Speed of panning. | 1 | | ||
| | rotateSpeed | Speed of rotation. | 1 | | ||
| | screenSpacePanning | Defines how the camera's position is translated when panning. If true, the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction. | false | | ||
| | target | Focus point of controls. look-at vector. | 0 0 0 | | ||
| | zoomSpeed | Speed of zooming / dollying. | 1 | | ||
|
|
||
| ### Installation | ||
|
|
||
| #### Browser | ||
|
|
||
| Install and use by directly including the [browser files](dist): | ||
|
|
||
| ```html | ||
| <head> | ||
| <title>My A-Frame Scene</title> | ||
| <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
| <script src="https://unpkg.com/aframe-orbit-controls-component/dist/aframe-orbit-controls-component.min.js"></script> | ||
| <script src="https://unpkg.com/aframe-supercraft-loader@1.1.3/dist/aframe-supercraft-loader.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <a-scene> | ||
| <a-entity supercraft-loader="name: icky-snake"></a-entity> | ||
| <a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15"></a-entity> | ||
| </a-scene> | ||
| </body> | ||
| ``` | ||
|
|
||
| #### npm | ||
|
|
||
| Install via npm: | ||
|
|
||
| ```bash | ||
| npm install aframe-orbit-controls-component | ||
| ``` | ||
|
|
||
| Then require and use. | ||
|
|
||
| ```js | ||
| require('aframe'); | ||
| require('aframe-orbit-controls-component'); | ||
| ``` |
Oops, something went wrong.