Skip to content
An experiment in compositional three.js
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
LICENSE
README.md
compositional-threejs.gif
package.json

README.md

This project was bootstrapped with Create React App.

An experiment in compositional Three.js

2 spinning cubes

2 spinning cubes

Made from a normal React component tree.

class App extends Component {
    state = {
        rotation1: { x: 0, y: 0, z: 0 },
        rotation2: { x: 0, y: 0, z: 0 }
    }

    componentDidMount() {
        this.gameLoop();
    }


    gameLoop = () => {
        requestAnimationFrame(this.gameLoop);

        const { rotation1, rotation2 } = this.state;

        this.setState({
            rotation1: { x: rotation1.x + 0.03,
                         y: rotation1.y + 0.03, },
            rotation2: { x: rotation2.x - 0.06,
                         y: rotation2.y - 0.06 }
        });
    }


    render() {
        const { rotation1, rotation2 } = this.state;

        return (
            <div className="App">
                <div className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h2>Welcome to React</h2>
                </div>
                <div className="App-intro">
                    <ThreeScene width={800} height={600}
                                style={{margin: '0 auto' }}>
                        <PerspectiveCamera fov={75}
                                           aspect={800/600}
                                           near={0.1}
                                           far={1000}
                                           position={{x: 0, y: 0, z: 30}}>

                            <Cube rotation={rotation1}
                                  position={{x: 2, y: 0, z: 25}}  />
                            <Cube rotation={rotation2}
                                  position={{x: -10, y: 5, z: 10 }} />

                        </PerspectiveCamera>
                    </ThreeScene>
                </div>
            </div>
        );
    }
}

Excellent.

You can’t perform that action at this time.