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

[docs] Updates to aincraft tutorial and code #5380

Merged
merged 4 commits into from
Nov 14, 2023
Merged

[docs] Updates to aincraft tutorial and code #5380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
54ddef0
Aincraft: Finish aframe-blink-controls conversion
JonathanHarford Nov 5, 2023
2c7f916
Aincraft: add buffer to block-spawning raycaster
JonathanHarford Nov 5, 2023
b73fe8c
Aincraft tutorial: tighten up player entity desc
JonathanHarford Nov 6, 2023
0b40895
Aincraft tutorial: Readd aframe tag & context to examples
JonathanHarford Nov 7, 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
53 changes: 35 additions & 18 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 @@ -376,13 +376,28 @@ and placing blocks.

### Adding Teleportation to the Left Hand

We'll plug in teleportation capabilities to the left hand such that we hold a
button to show an arc coming out of the controller, and let go of the button to
teleport to the end of the arc. Before, we wrote our own A-Frame components.
But we can also use open source components already made from the community
and just use them straight from HTML!
We'll plug in teleportation capabilities to the left hand such that we push a
thumbstick to show an arc coming out of the controller, and let go of the
thumbstick to teleport to the end of the arc. Before, we wrote our own A-Frame
components. But we can also use open source components already made from the
community and just use them straight from HTML!

To enable this, let's first define a `player` entity that wraps the controllers
and the camera:

```html
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>

[blink-controls]: https://github.com/fernandojsg/aframe-teleport-controls/
<!-- ... -->

<a-entity id="player">
Copy link
Member

Choose a reason for hiding this comment

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

Removing aframe script intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, because I wanted to only show the code that was relevant to the section. I hadn't realized the code blocks were made to be executable on their own!

<a-entity id="teleHand" hand-controls="hand: left"></a-entity>
<a-entity id="blockHand" hand-controls="hand: right"></a-entity>
<a-camera></a-camera>
</a-entity>
```

[blink-controls]: https://github.com/jure/aframe-blink-controls
Copy link
Member

Choose a reason for hiding this comment

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

These component references have been moved from the top to the bottom. Any reason? The less changes the easier to review a PR

For teleportation, there's a component called [blink-controls][blink-controls].
Following the README, we add the component via a `<script>` tag and just set
the `blink-controls` component on the controller on the entity:
Expand All @@ -393,15 +408,17 @@ the `blink-controls` component on the controller on the entity:

<!-- ... -->

<a-entity id="teleHand" hand-controls="hand: left" teleport-controls></a-entity>
<a-entity id="blockHand" hand-controls="hand: right"></a-entity>
<a-entity id="player">
<a-entity id="teleHand" hand-controls="hand: left"></a-entity>
<a-entity id="blockHand" hand-controls="hand: right"></a-entity>
<a-camera></a-camera>
</a-entity>
```

Then we'll configure the `blink-controls` component to use an arc `type` of
teleportation. By default, `blink-controls` will only teleport on the
ground, but we can specify with `collisionEntities` to teleport on the blocks
*and* the ground using selectors. These properties are part of the API that the
`blink-controls` component was created with:
By default, `blink-controls` will only teleport on the ground, but we can
specify with `collisionEntities` to teleport on the blocks *and* the ground
using selectors. This property is part of the API that the`blink-controls`
component was created with:

```html
<a-entity id="teleHand" hand-controls="hand: left" blink-controls="collisionEntities: [mixin='voxel'], #ground"></a-entity>
Expand Down Expand Up @@ -430,7 +447,7 @@ that attaches the clicking laser to VR tracked controllers. Like the

<!-- ... -->

<a-entity id="teleHand" hand-controls="hand: left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>
<a-entity id="teleHand" hand-controls="hand: left" blink-controls="collisionEntities: [mixin='voxel'], #ground"></a-entity>
<a-entity id="blockHand" hand-controls="hand: right" laser-controls></a-entity>
```

Expand Down Expand Up @@ -477,10 +494,11 @@ To generalize creating entities from an intersection event, we've created an
of properties. We won't go into the detail of the implementation, but you can
[check out the simple `intersection-spawn` component source code on
GitHub][intersection-spawn]. We attach `intersection-spawn` capabilities to the
right hand:
right hand, and it's also a good idea to give the raycaster a half-meter buffer
to prevent voxels from spawning right at the controller:

```html
<a-entity id="blockHand" hand-controls="hand: right" laser-controls intersection-spawn="event: click; mixin: voxel"></a-entity>
<a-entity id="blockHand" hand-controls="hand: right" laser-controls raycaster="near: 0.5" intersection-spawn="event: click; mixin: voxel"></a-entity>
```

Now when we click, we spawn voxels!
Expand All @@ -495,8 +513,7 @@ component with the gaze-based `cursor` component so that we can also spawn
blocks on mobile and desktop, without changing a thing about the component!

```html
<a-entity id="blockHand" hand-controls="hand: right" laser-controls intersection-spawn="event: click; mixin: voxel"></a-entity>

<a-entity id="blockHand" hand-controls="hand: right" laser-controls raycaster="near: 0.5" intersection-spawn="event: click; mixin: voxel"></a-entity>
<a-camera>
<a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
</a-camera>
Expand Down
29 changes: 16 additions & 13 deletions examples/docs/aincraft/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,22 @@

<a-sky id="background" src="#skyTexture" theta-length="90" radius="30"></a-sky>

<!-- Hands -->
<a-entity id="teleHand"
hand-controls="hand: left"
blink-controls="collisionEntities: [mixin='voxel'], #ground"></a-entity>
<a-entity id="blockHand"
hand-controls="hand: right"
laser-controls
intersection-spawn="event: click; mixin: voxel"></a-entity>

<!-- Camera -->
<a-camera>
<a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
</a-camera>
<a-entity id="player">
<!-- Hands -->
<a-entity id="teleHand"
hand-controls="hand: left"
blink-controls="collisionEntities: [mixin='voxel'], #ground"></a-entity>
<a-entity id="blockHand"
hand-controls="hand: right"
laser-controls
raycaster="near: 0.5"
intersection-spawn="event: click; mixin: voxel"></a-entity>

<!-- Camera -->
<a-camera>
<!-- Uncomment the line below to place blocks on desktop or mobile -->
Copy link
Member

Choose a reason for hiding this comment

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

This needs to be commented out?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Without that commented out, blocks were getting placed near the controller instead of a distance. This is on the Meta Quest 2 browser.

<!-- <a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor> -->
</a-camera>
</a-entity>
</a-scene>
</html>
Loading