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

Jump to bottom

Documentation: Guide update: Updates to "Basic Scene" Guide #5213

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Documentation: Guide update: Updates to "Basic Scene" Guide #5213

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4fec13b
Import example from glitch
diarmidmackenzie Jan 11, 2023
6cc1439
Update to use latest code; add comment explaining 127.0.0.1 restricti…
diarmidmackenzie Jan 11, 2023
442e843
Align code & description
diarmidmackenzie Jan 12, 2023
46aec0e
Add link to Basic Scene
diarmidmackenzie Jan 12, 2023
24f11c5
src: to link to source code, not live example
diarmidmackenzie Jan 12, 2023
6aeece0
Use master A-Frame; latest environment component
diarmidmackenzie Jan 13, 2023
3d7c71e
Use latest environment component
diarmidmackenzie Jan 13, 2023
84be49d
Merge remote-tracking branch 'upstream/master' into basic-scene
diarmidmackenzie Jan 19, 2023
bbe54e6
Move from examples/showcase to examples/docs
diarmidmackenzie Jan 19, 2023
1aee05b
Merge remote-tracking branch 'upstream/master' into basic-scene
diarmidmackenzie Mar 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 14 additions & 25 deletions docs/guides/building-a-basic-scene.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ image:
src: https://user-images.githubusercontent.com/674727/29746371-b7906dcc-8a8c-11e7-8ef4-3f7e4d224ce7.jpg
examples:
- title: Basic Guide with Environment
src: https://glitch.com/edit/#!/aframe-basic-guide-with-environment?path=index.html
src: https://github.com/aframevr/aframe/tree/master/examples/showcase/basic-scene/index.html
---

[primitives]: ../primitives/
Expand Down Expand Up @@ -215,11 +215,10 @@ scene!

## Adding an Environment

[@feiss]: https://github.com/feiss/
[environment]: https://github.com/feiss/aframe-environment-component/
[environment]: https://github.com/supermedium/aframe-environment-component/

A-Frame allows developers to create and share reusable components for others to
easily use. [@feiss]'s [environment component][environment] procedurally
easily use. The [environment component][environment] procedurally
generates a variety of entire environments for us with a single line of HTML.
The environment component is a great and easy way to visually bootstrap our VR
application, providing over a dozen environments with numerous parameters:
Expand All @@ -229,7 +228,7 @@ First, include the environment component using a script tag after A-Frame:
```html
<head>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
diarmidmackenzie marked this conversation as resolved.
Show resolved Hide resolved
</head>
```

Expand All @@ -250,6 +249,7 @@ We can specify a preset (e.g., `forest`) with along many other parameters

> Make sure you're [serving your HTML using a local server](../introduction/getting-started.md#using-a-local-server)
> for textures to load properly.
> Due to an [issue with imgur.com](https://stackoverflow.com/questions/43895390/imgur-images-returning-403), view the page using http://localhost, rather than http://127.0.0.1

We can apply an image texture to the box with an image, video, or `<canvas>`
using the `src` attribute, just like we would with a normal `<img>` element.
Expand Down Expand Up @@ -407,19 +407,10 @@ depends on its distance to the entity:

```html
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>

<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

<a-sky src="#skyTexture"></a-sky>

...
<a-light type="ambient" color="#445451"></a-light>
<a-light type="point" intensity="2" position="2 4 4"></a-light>
...
</a-scene>
```

Expand Down Expand Up @@ -493,7 +484,7 @@ need to now define [`<a-camera>`][camera] containing `<a-cursor>`:
animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

<a-camera>
<a-cursor></a-cursor>
<a-cursor color="#FAFAFA"></a-cursor>
</a-camera>
</a-scene>
```
Expand Down Expand Up @@ -591,7 +582,8 @@ by suffixing the attribute name with `__<ID>`:
scale="2 2 2"
animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"
animation__mouseenter="property: scale; to: 2.3 2.3 2.3; dur: 300; startEvents: mouseenter"
animation__mouseleave="property: scale; to: 2 2 2; dur: 300; startEvents: mouseleave"></a-box>
animation__mouseleave="property: scale; to: 2 2 2; dur: 300; startEvents: mouseleave"
animation__click="property: rotation; from: 0 45 45; to: 0 405 45; dur: 1000; startEvents: click"></a-box>
```

## Adding Audio
Expand Down Expand Up @@ -636,16 +628,13 @@ text implementation using [`three-bmfont-text`][three-bmfont-text] that is
relatively sharp and performant:

```html
<a-entity
text="value: Hello, A-Frame!; color: #BBB"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-entity>
<a-entity text="value: Hello, A-Frame; color: #FAFAFA; width: 5; anchor: align"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-entity>
```

## Play With It!

And that's the basic example!

[Remix the example on Glitch](https://glitch.com/~aframe-basic-guide-with-environment).

[View the example on Glitch](https://aframe-basic-guide-with-environment.glitch.me).
[View the example](https://aframe.io/examples/showcase/basic-scene/).
1 change: 1 addition & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ <h2>Examples</h2>

<ul class="links">
<li><a href="showcase/anime-UI/">Anime UI</a></li>
<li><a href="showcase/basic-scene/">Basic Scene</a></li>
<li><a href="showcase/comicbook/">Comic Book</a></li>
<li><a href="showcase/composite/">Composite</a></li>
<li><a href="showcase/curved-mockups/">Curved Mockups</a></li>
Expand Down
58 changes: 58 additions & 0 deletions examples/showcase/basic-scene/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Scene with Environment - A-Frame</title>
<meta name="description" content="Basic Scene with Environment - A-Frame">
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
diarmidmackenzie marked this conversation as resolved.
Show resolved Hide resolved
<script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
diarmidmackenzie marked this conversation as resolved.
Show resolved Hide resolved
</head>
<body>
<!-- Try changing the preset to one of default, contact, egypt, checkerboard, forest, goaland, yavapai, goldmine,
threetowers, poison, arches, tron, japan, dream, volcano, starry, osiris. -->
<!-- See more environment options: https://github.com/feiss/aframe-environment-component#parameters -->
<a-scene>
<a-assets>
<!-- Note that imgur will reject requests from 127.0.0.1 with a 403 error
https://stackoverflow.com/questions/43895390/imgur-images-returning-403
If viewing this example locally, use http://localhost rather than http://127.0.0.1
-->
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<audio src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay
preload></audio>
</a-assets>

<a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
position="-3 1 -4"></a-sound>

<a-box
src="#boxTexture"
position="0 2 -5"
rotation="0 45 45"
scale="2 2 2"
animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"
animation__mouseenter="property: scale; to: 2.3 2.3 2.3; dur: 300; startEvents: mouseenter"
animation__mouseleave="property: scale; to: 2 2 2; dur: 300; startEvents: mouseleave"
animation__click="property: rotation; from: 0 45 45; to: 0 405 45; dur: 1000; startEvents: click"></a-box>

<a-entity text="value: Hello, A-Frame; color: #FAFAFA; width: 5; anchor: align"
position="-0.9 0.2 -3"
scale="1.5 1.5 1.5"></a-entity>

<a-sky src="#skyTexture"></a-sky>

<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
repeat="10 10"></a-plane>

<a-light type="ambient" color="#445451"></a-light>
<a-light type="point" intensity="2" position="2 4 4"></a-light>

<a-camera>
<a-cursor color="#FAFAFA"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>