Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring "Community components" example into A-Frame Examples. #5211

Merged
merged 14 commits into from
Mar 28, 2023
Merged

Bring "Community components" example into A-Frame Examples. #5211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c2d4760
Copy example from glitch
diarmidmackenzie Jan 11, 2023
3144b8e
Update example to use latest working code
diarmidmackenzie Jan 11, 2023
e1d065b
Add link to Community Components example
diarmidmackenzie Jan 11, 2023
f739cf8
Consistently use jsdelivr for CDN
diarmidmackenzie Jan 11, 2023
9976d7b
Update Title
diarmidmackenzie Jan 11, 2023
9b7daf5
Update documentation of community components example
diarmidmackenzie Jan 11, 2023
ec1e2b0
Fix docs lint error
diarmidmackenzie Jan 12, 2023
e758261
Add comment explaining what to do if copy/pasting code.
diarmidmackenzie Jan 13, 2023
ef97760
Tidy up.
diarmidmackenzie Jan 13, 2023
5a0f611
Merge remote-tracking branch 'upstream/master' into community-compone…
diarmidmackenzie Jan 19, 2023
7d5b735
Move community components from "showcase" to "docs"
diarmidmackenzie Jan 19, 2023
b045d0e
Fix some bad links left over from #5215
diarmidmackenzie Jan 19, 2023
80a8934
Merge remote-tracking branch 'upstream/master' into community-compone…
diarmidmackenzie Mar 27, 2023
dc0113f
Use versioned release here
diarmidmackenzie Mar 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/guides/building-a-minecraft-demo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ parent_section: guides
order: 10
examples:
- title: Aincraft
src: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/
src: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/
---

[source-code]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/
[live-demo]: https://aframe.io/examples/showcase/aincraft/
[source-code]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/
[live-demo]: https://aframe.io/examples/docs/aincraft/

> View the [source code][source-code], or try out [the demo][live-demo]

Expand Down Expand Up @@ -53,7 +53,7 @@ our assets, and create a thin cylinder entity pointing to that texture:
</a-scene>
```

See a live version [here](https://aframe.io/examples/showcase/aincraft/step1.html)
See a live version [here](https://aframe.io/examples/docs/aincraft/step1.html)

### Preloading Assets

Expand Down Expand Up @@ -84,7 +84,7 @@ Let's move our ground texture to `<a-assets>` to be preloaded using an
</a-scene>
```

See a live version [here](https://aframe.io/examples/showcase/aincraft/step2.html)
See a live version [here](https://aframe.io/examples/docs/aincraft/step2.html)

## Adding a Background

Expand Down Expand Up @@ -123,7 +123,7 @@ to match the ground:
</a-scene>
```

See a live version [here](https://aframe.io/examples/showcase/aincraft/step3.html)
See a live version [here](https://aframe.io/examples/docs/aincraft/step3.html)

## Adding Voxels

Expand Down Expand Up @@ -255,7 +255,7 @@ and include it before the scene:
</a-scene>
```

See a live version [here](https://aframe.io/examples/showcase/aincraft/step4.html)
See a live version [here](https://aframe.io/examples/docs/aincraft/step4.html)

Components can be plugged into any entity without having to create or extend a
class like we'd have to in traditional inheritance. If we wanted to attach it
Expand All @@ -277,7 +277,7 @@ modular and reusable!

### Snap Component

[snap]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/components/snap.js
[snap]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/components/snap.js

We'll have a `snap` component to snap our boxes to a grid so they aren't
overlapping. We won't get into the details of how this component is
Expand Down Expand Up @@ -345,7 +345,7 @@ And we've added voxels using that mixin:
<a-entity mixin="voxel" position="1 0 -2"></a-entity>
```

See a live version [here](https://aframe.io/examples/showcase/aincraft/step5.html)
See a live version [here](https://aframe.io/examples/docs/aincraft/step5.html)

Next, we'll be creating voxels dynamically through interaction using tracked
controllers. Let's start adding our hands to the application.
Expand Down Expand Up @@ -470,7 +470,7 @@ document.querySelector('#blockHand').addEventListener(`click`, function (evt) {
});
```

[intersection-spawn]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/components/intersection-spawn.js
[intersection-spawn]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/components/intersection-spawn.js

To generalize creating entities from an intersection event, we've created an
`intersection-spawn` component that can be configured with any event and list
Expand Down
38 changes: 23 additions & 15 deletions docs/introduction/entity-component-system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,27 +451,37 @@ Now we can include it into our HTML:
</html>
```

### Using jsdelivr for CDN

[jsdelivr]: https://www.jsdelivr.com/

[JSDELIVR][jsdelivr] is an alternative CDN to unpkg. One benefit of JSDELIVR is that it can download files from GitHub as well as NPM.

You can convert unpkg URLs to JSDELIVR URLs using this link: https://www.jsdelivr.com/unpkg

You can convert GitHub URLs to JSDELIVR URLs using this link: https://www.jsdelivr.com/github

### Example

[glitch]: http://glitch.com/~aframe-registry
[community-example]: https://aframe.io/examples/docs/community-components

![Registry Example](https://cloud.githubusercontent.com/assets/674727/25502318/0f76ceec-2b4b-11e7-9829-cb3784b20dc1.gif)
![Community Components Example](https://cloud.githubusercontent.com/assets/674727/25502318/0f76ceec-2b4b-11e7-9829-cb3784b20dc1.gif)

Below is a complete example of using various community components from the
Registry and using the unpkg CDN. We can [remix or check out this example on
Glitch][glitch].
Registry and using the JSDELIVR CDN. This example can also be viewed in the [A-Frame Examples][community-example].

```html
<html>
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/gradientsky.min.js"></script>
<title>Community Components Example</title>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now have duplicated code here and the example that have to be in sync. It would be cool if there's a markdown way to display html from the file hosted on gihub

Copy link
Contributor Author

@diarmidmackenzie diarmidmackenzie Jan 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One option:
https://github.com/zakhenry/embedme

A limitation is that code fragments are indexable only by line number. If line numbers change, extracts will get out of sync. That's discussed (together with some possible solutions) here but there doesn't seem to be a good solution yet (and momentum has stalled since 2020).

How widespread an issue do you think this is in the docs? Is there enough benefit to be worth the overhead of adding new tools like embedme to the pipeline? Is it worth doing if snippets have to be by line number, rather than tag-based as #48 will enable?

<meta name="description" content="Community Components Example">
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@a5a8449/dist/aframe-particle-system-component.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@d5f3f8/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>

<a-entity id="sphere" geometry="primitive: sphere"
Expand All @@ -483,11 +493,9 @@ Glitch][glitch].
<a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"></a-entity>

<a-entity id="sky" geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"></a-entity>


<a-simple-sun-sky sun-position="1 0.4 0"></a-simple-sun-sky>

<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
Expand Down
33 changes: 33 additions & 0 deletions examples/docs/community-components/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Community Components Example</title>
<meta name="description" content="Community Components Example">
<!-- If running this example without a local copy of A-Frame, replace this next line with:
<script src="https://aframe.io/releases/<release_number>/aframe.min.js"></script>
-->
<script src="../../../dist/aframe-master.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@a5a8449/dist/aframe-particle-system-component.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@d5f3f8/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>

<a-entity id="sphere" geometry="primitive: sphere"
material="color: #EFEFEF; shader: flat"
position="0 0.15 -5"
light="type: point; intensity: 5"
animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>

<a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"></a-entity>

<a-simple-sun-sky sun-position="1 0.4 0"></a-simple-sun-sky>

<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
3 changes: 2 additions & 1 deletion examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ <h2>Examples</h2>
<ul class="links">
<li><a href="showcase/anime-UI/">Anime UI</a></li>
<li><a href="showcase/comicbook/">Comic Book</a></li>
<li><a href="showcase/composite/">Composite</a></li>
<li><a href="showcase/composite/">Composite</a></li>
<li><a href="showcase/curved-mockups/">Curved Mockups</a></li>
<li><a href="showcase/dynamic-lights/">Dynamic Lights</a></li>
<li><a href="showcase/hand-tracking/">Hand Tracking</a></li>
Expand All @@ -159,6 +159,7 @@ <h2>Examples from Documentation</h2>
<ul class="links">
<li><a href="docs/360-gallery/">360 Gallery</a></li>
<li><a href="docs/aincraft/">Aincraft</a></li>
<li><a href="docs/community-components/">Community Components</a></li>
</ul>

<h2>Tests</h2>
Expand Down