Create THREERenderer and decouple Renderer from THREEScene

[gilbox]

The basic idea is to go from this:

<Scene>{/*...*/}</Scene>

to this:

<Renderer>
 <Scene>{/*...*/}</Scene>
 <Scene>{/*...*/}</Scene>
</Renderer>

It could probably use improvement, but looking for feedback on this. This came about because I want to render a second scene as a background.

Do you like this general approach?

I refactored the cupcake example to use this approach. The rest of the examples would also need to be refactored.

note: #59 should be merged first

Here's the cupcake demo. Note that each cupcake is inside of it's own Scene:

[Izzimach]

Yeah, that makes sense. Might also be useful to generate the Scene standalone and use it later in a renderer. Not sure if that's possible, though.

Let me pull this into the dev branch and make changes/tests there, then it can merge into master once examples and docs are updated.

[gilbox]

Might also be useful to generate the Scene standalone and use it later in a renderer.

Cool idea, I can think of two ways

• either by allowing a composite component to wrap Scene and define shouldComponentUpdate (not sure how to implement this one)
• or by exposing a shouldUpdate prop on the Scene component.

[Izzimach]

Looks like mixing THREEContainer is messing up the internal tree structure and causing some wierd erros. I don't think you're supposed to have multiple children of a custom component created via createClass.

I'll see if I can get this to work in the general case. If not, there may be another way such as passing in multiple scenes via props or something.

[gilbox]

just noticed this breaks pointerEvents because Scene doesn't have access to the raycaster instance.

[gilbox]

I don't think you're supposed to have multiple children of a custom component created via createClass.

What do you mean by this? Afaik in normal react world you certainly can.

[Izzimach]

Oops yeah the children passed in as props.children can be >1. I meant the actual rendered component tree. Notablyrender only lets you return one node, which is basically the 'child' of a custom component.

But I dunno if that's the real issue or not.

As you said the pointer events are messed up. Probably event listeners should be attached in THREERenderer since that also contains the relevant canvas element. Then clicks can be forwarded to the scene(s) perhaps.

On Thu, Nov 19, 2015 at 11:26 AM Gil Birman notifications@github.com wrote:

I don't think you're supposed to have multiple children of a custom component created via createClass.

What do you mean by this? Afaik in normal react world you certainly can.

— Reply to this email directly or view it on GitHub https://github.com/Izzimach/react-three/pull/60#issuecomment-158146981.

[Izzimach]

Looked at the pointer event stuff this morning. Might need to turn THREEScene into a standard React component instead of one created via createClass to properly bind mouse events. More details as events warrant.

[Izzimach]

Put this code into a separate branch, still needs a lot of work/fixes but it's getting there.