Why react-three-renderer ?

[yiakwy]

Hello I find this when I am exploring integration with electron and three.js-editor.

I developed a project using react, mobx, mobx-react and three (es6, webpack). For me, three provides scene graph to manage three objects. And react interacts with doms.

I cannot see clearly why we need to develop react-three renderer

Here is what I have done

src/
app.js (animation routine): defines "app" to to store global objects
store/states.js: defines dom-data bidirectional binding and notify RENDERERE to use new to data in udpate
renderer: three renderer Singleton in es6 and export interfaces to modify inner data managed by scene graph
ui/: react components, like editor, gui and so on

The only thing you need is to trigger data initialization of renderer after React component mounted

Why react-three-renderer? I am seriously.

[MaartenBreeedveld]

Hi yiakwy,
I'm really curious at this. Is all going well with memory management (i.e. is the THREE script also decently unmounting)?

Would you mind posting a uber-basic working example?

Cheers,

[yiakwy]

Hi @MaartenBreeedveld Here are some excerpts from my codes (I am currently writing codes for company not for myself)

var app = {

}
window.app = app

import RENDERER from "renderer/renderer"
import * as ReactDOM from "react-dom"
import Editor from "scene/editor.js"
import { Provider } from "mobx-react"
import React from "react"
import observableSceneStore from "mobx-stores/state"
import runtime from "serviceworker-webpack-plugin/lib/runtime"
import registerEvents from "serviceworker-webpack-plugin/lib/browser/registerEvents"

// initalize your dom and workers first

// dom
ReactDOM.render(<Provider store={ observableSceneStore }><Editor /></Provider>, document.getElementById("wrapper"))

function animate() {
  requrestAnimationFrame(aniamte)
  // tween, udpate control, anything else inside here
   app.update(RENDERER)
}

// Now the Dom is ok, let us run main loop and begin to  @handlel events
 animate()

Hope this helps you.

For the dom part that is easy

// scene.js

import React from "react"
import {observer, inject} from "mobx-react"

import RENDERER from "renderer/renderer"
import Viewport from "UICom/viewport"

const ca = ".canvas"

@inject("store") @observer 
export default class Scene extends React.Component {
	constructor(props) {
		super(props)
	}

	componentDidMount() {
		RENDERER.init(ca)
	}

	render() {
		return (
			<div className="scene row">
				<Viewport />
			</div>
		)
	
	}

}

I use combination of quadtree and kdtree for active memory management, If I want to find something quickly. If a block of memory is not active, I will post it to local storage using worker aysnc api. You can treat it like redis hot key.

/*
 * @author Lei, (yiak.wy@gmail.com), asynchronous 
 */ 
let extend = function(array_) {
	Array.prototype.push.apply(this, array_)
	return this 
}
Array.prototype.extend = extend 

export function inject_scope(...dep) {
	var fn = arguments[0],
		extended_args

	console.log(`inject_scope variables: ${dep}`)
	extended_args = Array.prototype.slice.apply(arguments).slice(1, arguments.length)

	return function wrapped(...inp) {
		console.log(`wrapped func inp: ${inp}`)
		var args_ = Array.prototype.slice.apply(inp)
		args_.extend(extended_args)
		return fn.apply(null, args_)
	}

}

export function channel_msg(resolve, reject, worker, msg) {
	return new Promise(function(resolve, reject) {
		let channel = new MessageChannel()
		channel.port1.onmessage = function(evt) {
			if (evt.data.error) {
				reject(evt.data.error)
			} else {
				resolve(evt.data)
			}
		}

		worker.postMessage(msg, [channel.port2])
	}).then(resolve).catch(reject)
}

export async function send(worker, msg, resolve, reject) {
 	// let promise = new Promise(inject_scope(channel_msg, worker, msg)).then(resolve).catch(reject),
	let promise = channel_msg(resolve, reject, worker, msg),
		data 
	data = await promise
	return data 
}

I am not using high resolution shaders for rendering. THREE provides a convenient way to interact with gpu clip queue. I think it is ok for the moment.

[MaartenBreeedveld]

Hi yiakwy,

Thank you very much for this example. It does look crazy simple indeed!
I'll have a go at it and try to get it working.
Cheers!

[johnrees]

I can only speak as a user of the library (and I haven’t used it for quite some time- plan to again soon!), but I think that one of the headline features it provides is a declarative way to construct and manipulate the contents of a THREE.Scene.

[yiakwy]

@johnrees I think the difference between us is that for me THREE.Scene is a just scene graph to manage objects and is responsible for canvas rendering. I don't think it has any relationship with dom. While Dom will use observers and signals to manage complex interaction. That is not what three is good at.