Skip to content

Commit 08e6645

Browse files
Modernize the A-Frame+framework answer (#5661)
1 parent 8cc1868 commit 08e6645

File tree

1 file changed

+28
-10
lines changed

1 file changed

+28
-10
lines changed

docs/introduction/faq.md

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -283,16 +283,34 @@ Read [*Where to Find Components*][finding] for more information.
283283
## Does A-Frame support `X` library or framework?
284284

285285
A-Frame is built on top of the DOM so most libraries and frameworks work
286-
including:
287-
288-
- [Vue.js](https://github.com/frederic-schwarz/aframe-vuejs-3dio)
289-
- [Preact](https://github.com/aframevr/aframe-react#using-with-preact)
290-
- [D3.js](http://blockbuilder.org/search#text=aframe)
291-
- [React](https://github.com/aframevr/aframe-react)
292-
- [Angular](https://stackoverflow.com/questions/46464103/various-errors-when-attempting-to-integrate-aframe-into-angular2-project-esp-wi)
293-
- jQuery
294-
- Ember.js
295-
- Meteor
286+
including jQuery, HTMX, React, SolidJS, Vue and Svelte.
287+
288+
Some meta frameworks like TanStack Start and SolidStart hide the `index.html`,
289+
so you may encounter issues adding additional script tags and template tags (for
290+
Networked-Aframe).
291+
292+
We advice you to use a template for your framework that still has an `index.html`
293+
you can edit and render the UI to a specific div while keeping your `<a-scene>`
294+
directly in `index.html`. That way you can easily follow A-Frame examples.
295+
If you're creating a complex app with several routes and only specific routes
296+
render an A-Frame scene, you'll want to add a router library and render
297+
`<a-scene>` via a component in your framework.
298+
Reactive frameworks like SolidJS and latest versions of Vue and Svelte are
299+
well suited for this because they doesn't do unnecessary computation to check
300+
if something needs to be updated. You can do that also in React but be sure to wrap
301+
your Scene and UI components with React.memo and proper usage of useMemo/useCallback
302+
or better enable the React Compiler that does this for you to avoid any performance
303+
issues.
304+
305+
The Vite build tool has templates for most of the popular frameworks.
306+
You can follow the [Vite Guide](https://vite.dev/guide/) to create a new project
307+
and then add the aframe `<script>` tag in the head and the `<a-scene>` tag in
308+
the body.
309+
310+
For SolidJS and Networked-Aframe, you have a
311+
[dedicated tutorial](https://aframe.wiki/en/#!pages/solidjs.md) explaining how
312+
to set up a project, and using a router to render the scene for a specific
313+
route. For React, it should be very similar.
296314

297315
## Which headsets, browsers, devices, and platforms does A-Frame support?
298316

0 commit comments

Comments
 (0)