Hey just wanted to follow up on this - did you end up selecting a method and pressing forward? I’m in a similar boat and have been exploring things of this nature too.
I ended up sort of putting this project on hold while I investigate more functional reactive programming stuff. 
Heh that’s fair enough. I’m really slowly wrapping my head around this way of programming. The react-three-fiber flying game example is really good. I remember reading from the author somewhere (@drcmda) that it wasn’t fully complete in terms of making it as functional as possible. I’m wondering if he’s talking about how Hud.js is using the store for points/health/etc. What’s the proper solution here - taking them all in as props ? But then what would own mutating them?
This makes my head hurt.
I haven’t really looked into that example so I can’t really speak to it. There usually ends up being some level of mutation though, because you want to save/mutate the geometry that was created/cached. It’s what makes this such a difficult problem.
I’m not super familiar with react, but props would be the trick AFAIK. It follows the idea of display is a function of data. So in this case, you’d have data, data yields a scene graph, and then you mash that up with a camera to get your rendered frame.
the big thing are hooks. a data model and a functional view isn’t enough, it will, at best, just produce a static view. but three components must have access to the render function to do things, to move, interact, etc. this is where hooks come in. they pretty much befriend the declarative world with the imperative. a component with a useFrame hook can control its own render phase, can rotate, move, etc frame by frame. but once the component is unmounted, that side-effect is automatically cleared. a good example is this one: https://twitter.com/0xca0a/status/1216696377369145344 you see some of the imperative and declarative parts and how they mesh together.
2 Likes
This is my first post on the forum, but I’ve visited this thread a few times in the past and I thought I can share my experience. 
I hope one day someone rewrites Three.js in something like ReasonML and we won’t have to marry/map 2 different styles. Currently functional reactive middle ground is achievable if we focus solely on state management. I haven’t tried vue, but I’ve been using Three.js and React Native together for some time now and here are my 2 cents:
Personally I don’t recommend React, because of the way it batches state updates. It’s cool for web performance, but for 3d game to be predictable (read: responsive) it needs to update state synchronously / every frame of raf. You could theoretically do this with useRef instead of useState, but this quickly gets ugly. This is why I use RxJS and Immutable.js very similarily to how Manuel Wieser described it in this article: https://manu.ninja/functional-reactive-game-programming-rxjs-5-immutable-js-and-three-js
Setup is easy: in web React you want to mount canvas and call setup in useEffect, that then manages state with RxJS instead React. For React Native Evan Bacon made this video about how to use Three.js with Expo: 3D Graphics in React Native with THREE.js - YouTube but you really only need <GLView> component from ‘expo-gl’ and you give your setup function to onContextCreate prop and again inside that setup function you have all your rxjs state logic.
If you want to have other UI elements that control state, but aren’t part of canvas you can setup subjects, pass them to setup and call next on click/scroll etc.
3 Likes
Given where things are at, I think this is probably the most viable solution to the problem. I kinda came to the same conclusion. Thanks so much for your thoughtful response and to everyone who has added their thoughts in this thread. 
1 Like
Personally I don’t recommend React, because of the way it batches state updates. It’s cool for web performance, but for 3d game to be predictable (read: responsive) it needs to update state synchronously / every frame of raf.
hooks allow react to bridge the imperative and the declarative. for instance: Basic demo - CodeSandbox
you see that part about useFrame? It lets a component subscribe directly to the renderloop, and it cleans up when the component is unmounted.
as for gaming: space game - CodeSandbox or try some of the other demos: GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js they all let react manage, but it’s adding zero overhead.
1 Like
Thanks for adding this! I love the clarity of the example.
At the time of writing my last post I haven’t yet tried react-three-fiber and now 6 months later I gotta say - this library is awesome and the only way I write three.js nowadays. Thank you so much drcmda!
1 Like