How to do rapid scene development?

[Fasani]

I am wondering what people do today to speed up development workflows.

I have played with a-frame in the past and they have this wonderful inspector, it makes working in 3d environments somewhat easier.
https://github.com/aframevr/aframe-inspector

I know there is this:
https://github.com/ueno-llc/react-three-gui

I am thinking it would be nice to be able to toggle the XYZ movement helpers and switching to an overview camera to allow quicker scene development.

What do people do today in three.js or r3f?

[drcmda]

im using create-react-app-rewired + react-refresh, so that changes made in code are almost instant - that makes it easier. also i position stuff in blender and then use gltfjsx to get a scene for it. theres also a react extension for chrome that shows you the scenegraph, component props, etc, though its not super useful atm.

a real editor would be nice, but i feel like aframe, threejs and babylon, when it comes to editors i would prefer it to understand what a component is and none of these do. if the scene is just a soup of elements that's not very useful. or, well, as useful as chromes elements tab. aframe comes closest to ideal, but web components ... i will never use them.

but a project like that would be nice! something that can load full actionable component trees, create components, alter them. something like framer.

[Fasani]

Do you mean this framer? https://www.framer.com

[drcmda]

yes, but i dont think its ready https://twitter.com/huntercaron/status/1239593683814621186

[ajayns]

Adding onto this, I'm curious about what's the best approaches for testing parameters and fine tuning.

Generally for three.js and motion I use dat.gui to optimize and get an interface that allows me tweak values live, instantaneously. What would be the toolset you use for the same? (not for adjust setting scene in particular but general and flexible live updates to params)
I'd like it to be robust and lightweight, and ideally close to the features and options dat.gui offers.

Any sample sandboxes will also be appreciated!

[drcmda]

you can use react-dat-gui or https://github.com/ueno-llc/react-three-gui which is esp made for r3f

https://codesandbox.io/s/react-three-fiber-gui-62pvp

in theory also react devtools should let you edit props, but somethings off atm