-
Notifications
You must be signed in to change notification settings - Fork 18
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
1 changed file
with
7 additions
and
11 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,15 @@ | ||
# Vue.js Integration | ||
|
||
This sample demonstrates how to integrate the Vue.js HTML framework and a Needle scene. | ||
This sample demonstrates how to integrate the [Vue.js](https://vuejs.org/) frontend framework and a Needle scene. The [vuejs project template](https://github.com/needle-engine/vuejs-sample) is hosted and downloaded from github. | ||
|
||
The [Needle homepage](https://needle.tools) is built using Vue.js. | ||
In this sample the needle engine web component is added to the [App.vue](https://github.com/needle-engine/vuejs-sample/blob/0d0e5b265c5dd26a65148fa3a94a0d1d5191e441/src/App.vue#L26) component. The content of the 3D scene integrates seamlessly with the web components: content uses zIndex to be either rendered in front or behind the 3D content. | ||
|
||
## Package setup | ||
Additionally the sample shows how an Animator and a animation statemachine (in this example setup and animated in Unity) can be controlled from the web frontend. | ||
|
||
The package.json file contains the additional needed dependencies to use Vue together with vite and Typescript. | ||
|
||
## Interaction between Vue and Needle | ||
|
||
### Needle Engine as Vue component | ||
|
||
The sample contains a simple wrapper for `<needle-engine>` so that it can be used as Vue component. This allows passing properties into Needle Engine, setting up events in both directions, and generally referencing Needle Engine and the scene context throughout your web app. | ||
The sample is also networked. Send the sample URL containing the room name to a friend (or open it in a second browser window) and you will notice that the shown slide is synchronized between all users on the same website. | ||
|
||
## Learn more | ||
|
||
For more information, see the [Vue.js docs](https://vuejs.org/guide/introduction.html). | ||
For more information, see the [Vue.js docs](https://vuejs.org/guide/introduction.html). | ||
|
||
Our main website [needle.tools](https://needle.tools) is built using Vue.js. |