react-container-3d

A container for three.js canvas renderer as a react component

Install

npm install --save react-container-3d && three

Live Demo

Try it on CodeSandbox:

Videos

Apps using this component

• video 3
• video 2
• video 1

Usage

import * as THREE from 'three';
import Container3d from 'react-container3d';

...

<div className="canvas-3d">
<Container3d aspect={16 / 9} percentageWidth={"100%"}/>
</div>

Container Drawing Methods

p5.js (and the original Processing, of course) was used as inspiration to define the life cycle names: setup and update;

//called at when renderer is defined
Setup = (scene, camera, renderer) =>{
        console.log("starting 3d scene");
    }

//called every frame
Update = (scene, camera, renderer) =>{
        //console.log("scene", scene);
}

Visual style Component Props

| prop name | prop type | description | |:---------:|:---------:|:-----------| | width | Int | width in pixels | | height | Int | height in pixels | | percentageWidth| String or Int | percentage related to screen width |
| aspect | float | width/height aspect ratio | | fitScreen | boolean | if the component will stretch it self to fit the screen open area| | marginLeft | Int | margin left in pixels | | marginTop | Int | margin top in pixels | | marginBottom | Int | margin bottom in pixels |

Execution Methods

| prop name | prop type | parameters| |:---------:|:---------:|:-----------| | setup | function | scene, camera, renderer| | update | function | scene, camera, renderer| | onHoverStart | function | object, scene, camera, renderer| | onHoverEnd | function | object, scene, camera, renderer| | onError | function | error |

3D Scene elements Props

| prop name | prop type | description | default | |:---------:|:---------:|:-----------|:-------:|
| addControls| boolean | if OrbitControls will be added | true | | addGrid | boolean | if the GridHelper will be added | true | | addLight | boolean | if default light will be added | true | | enableZoom | boolean | if the zoom from OrbitControls is enabled | true | | enableKeys | boolean | if the keys from OrbitControls are enabled | true| | enablePan | boolean | if the user can pan the viewport with the mouse. Feature from OrbitControls | true |

Default 3d elements

The grid, orbitControls and lights are by default added to the scene. they are also easily removed:

<Container3d aspect={1} percentageWidth={"100%"} addGrid={false} addControls={false} addLight = {false}/>

enableZoom, enablePan and enableKeys (from orbit controls) are also defined as boolean props.

FitScreen mode

Sometimes we just want a 3D environment to add some models and have some interactivity. Due to the drag of attention to this environment, most of times, this component occupies the main portion of the screen, so we added this simple 'fitScreen' parameter, if this is on the component will try to adjust to fill the height and width of the screen. you can use the props marginTop, marginLeft, marginBottom, marginRight to set pixels of distance. (note: we tried with css, however the renderer update wasn't happening when the screen changed).

Usage with react-cubeview

Both components were designed to work coupled - you can read more about react-cubeview here. They were separated due to development simplification (We might, at some point, have enough 3D UI components to create a simple UI Kit... but that's for the future).

import * as THREE from 'three';
import Container3d from 'react-container-3d';

//you need to install it using npm install --save react-cubeview
import CubeView from 'react-cubeview';
import 'react-cubeview/css/react-cubeview.css';

let object1;

class App extends Component {
    //will return the main container (canvas)
    getMainCanvas() {
        var mainCanvas = ReactDOM.findDOMNode(this.c3d);
        return mainCanvas;
    }
    //will update the camera angles/position from the orbitcontrols on the c3d
    updateAngles(phi, theta) {
        this.c3d.setAngles(phi, theta);
    }

    onHoverStart(object, scene, camera, renderer){
        console.log("hovering", object);
    }

    onHoverEnd(object, scene, camera, renderer){
        console.log("exiting", object);
    }
    //called when the scene is created
    Setup = (scene, camera, renderer) =>{
        //add cool 3d objects here ~ remember to import THREE
        var geometry = new THREE.SphereGeometry( 1 );
		var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
        object1 = new THREE.Mesh( geometry, material );
				scene.add( object1 );
    }

    //called every frame
    Update = (scene, camera, renderer) =>{
        //animate things
        object1.rotation.x = time * 0.0005;
		object1.rotation.y = time * 0.001;
    }

    render(){
        return(
            <div className = "App">
                
                <div className="canvas-3d" >
                    <Container3d marginTop={30} aspect={16 / 9} percentageWidth={"100%"} fitScreen ref={(c) => this.c3d = c} key={"c3d"} marginBottom={110} update={this.Update} setup={this.Setup} onHoverStart={this.onHoverStart} onHoverEnd={this.onHoverEnd}/>
                </div>

                <div className="cube-view">
                    <CubeView aspect={1} hoverColor={0x0088FF} cubeSize={2} zoom={6} antialias={false} onUpdateAngles={this.updateAngles} relatedCanvas={this.getMainCanvas} />
                </div>

            </div>
        );
    }

}

Custom Size/Background (CSS)

If wrapped around a div component, you can play easily with the canvas size;

By default, the canvas has a transparent background, this means your background color must be added using css background. We wanted gradient backgrounds.

    <div className="canvas-3d">
        <Container3d ... >
    </div>

.canvas-3d{
    margin-top:30px;
    width:100%;
    min-width: 500px;
    background: linear-gradient(to bottom,  rgba(51,51,51,0) 0%,rgba(80,80,80,1) 100%);
  }

Loading 3D Models

You can use pretty much all three.js model loaders, however be awere if you're using ES6, make sure all of them are wrapped as ES6 classes or ES5 modules. Also, for .obj we tested the three-react-obj-loader combined with three-react-mtl-loader.

Storybook

clone or download the git page and run:

npm install 
npm start

check http://localhost:6006