react-three-renderer

react-three-renderer copied to clipboard

Based on this StackOverflow question there's a strategy to render multiple scenes with the same renderer:

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );

Is this an abstraction that would worthwhile to explore in this project?

wondering how to implement "clear depth after first scene" :)

But yes, looks like a proper use case!

Hey @toxicFork, are there plans for allowing multiple <scene />s in the near future?

@jshor I currently render multiple scenes on top of each other using the <viewport> object

@AndrewRayCode could you provide an example?

In my game I overlay the pause screen over the game:

Viewports are a little confusing, but here's how that's done in a condensed version:

@autobind
clearRendererDepth() {

    const { renderer, } = this;

    if( renderer ) {
        renderer.clearDepth();
    }

}

render() {

    return <React3
        ref="renderer"
        mainCamera="camera"
        width={ gameWidth }
        height={ gameHeight }
    >

        {/* default viewport, required if using viewports. note cameraName
            matches the main scene's camera name */}
        <viewport
            x={ 0 }
            y={ 0 }
            width={ gameWidth }
            height={ gameHeight }
            cameraName="mainCamera"
        />

        {/* paused overlay (same x,y) viewport */}
        { paused ? <viewport
            x={ 0 }
            y={ 0 }
            width={ gameWidth }
            height={ gameHeight }
            cameraName="pausedCamera"
            onBeforeRender={ this.clearRendererDepth }
        /> : null }

        <scene ref="scene">

            {/* group for main scene */}
            <object3D>
                <perspectiveCamera
                    name="mainCamera"
                    ref="camera"
                    fov={ cameraFov }
                    aspect={ cameraAspect }
                    near={ 0.1 }
                    far={ 500 }
                />
                <mesh ... />
            </object3D>

            {/* conditional group for paused scene */}
            { paused ? <object3D>
                <perspectiveCamera
                    name="pausedCamera"
                    ref="camera"
                    fov={ cameraFov }
                    aspect={ cameraAspect }
                    near={ 0.1 }
                    far={ 1000 }
                />
                <mesh ... />
            </object3D> : null }

        </scene>
    </React3>
}

there's also a support channel at https://gitter.im/toxicFork/react-three-renderer

@AndrewRayCode I am attempting to do something similar, but running into this warning:

Warning: Foreign prop onBeforeRender found in viewport.

It looks like ViewportDescriptor doesn't acknowledge the existence of onBeforeRender, even though it's listed in Viewport.

Was there anything special you did to get around this?