@@ -283,16 +283,34 @@ Read [*Where to Find Components*][finding] for more information.
283
283
## Does A-Frame support ` X ` library or framework?
284
284
285
285
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.
296
314
297
315
## Which headsets, browsers, devices, and platforms does A-Frame support?
298
316
0 commit comments