https://github.com/swizec/something-3d

An experiment in compositional three.js
https://github.com/swizec/something-3d

react reactjs three three-js threejs

Last synced: 2 months ago
JSON representation

An experiment in compositional three.js

• Host: GitHub
• URL: https://github.com/swizec/something-3d
• Owner: Swizec
• License: mit
• Created: 2017-06-20T07:12:31.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-20T07:20:25.000Z (about 8 years ago)
• Last Synced: 2025-04-03T07:38:59.619Z (3 months ago)
• Topics: react, reactjs, three, three-js, threejs
• Language: JavaScript
• Size: 687 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).

# An experiment in compositional Three.js

2 spinning cubes

![2 spinning cubes](https://raw.githubusercontent.com/Swizec/something-3d/master/compositional-threejs.gif)

Made from a normal React component tree.

```javascript

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 (

            


                


                    

                    
Welcome to React

                

                


                    

                        


                            

                            

                        

                    

                

            

        );

    }

}


```

Excellent.