Exploring Three.js with JavaScript and React

Posted by

Lets Explore Three.js

Lets Explore Three.js

Three.js is a popular JavaScript library for creating 3D graphics on the web. It is built on top of WebGL and makes it easy to create complex 3D scenes in the browser. In this article, we will explore some of the features of Three.js and how to integrate it with JavaScript and React.

Getting Started with Three.js

First, you will need to include the Three.js library in your HTML file. You can do this by adding the following script tag:

      
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      
    

Now you can start creating 3D scenes using Three.js. You can create a simple 3D cube like this:

      
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        const animate = function () {
          requestAnimationFrame( animate );

          cube.rotation.x += 0.01;
          cube.rotation.y += 0.01;

          renderer.render( scene, camera );
        };

        animate();
      
    

Integrating Three.js with React

If you are working with React, you can easily integrate Three.js into your components. You can create a new component for your 3D scene and use the componentDidMount method to initialize the Three.js scene:

      
        import React, { Component } from 'react';
        import * as THREE from 'three';

        class ThreeScene extends Component {
          componentDidMount() {
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            this.mount.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            const animate = () => {
              requestAnimationFrame( animate );

              cube.rotation.x += 0.01;
              cube.rotation.y += 0.01;

              renderer.render( scene, camera );
            };

            animate();
          }

          render() {
            return (
              
(this.mount = ref)} /> ); } } export default ThreeScene;

Conclusion

Three.js is a powerful library for creating 3D graphics on the web. Whether you are working with plain JavaScript or a framework like React, you can easily integrate Three.js into your projects and create stunning 3D scenes. By following the examples in this article, you can get started with Three.js and begin exploring the world of 3D web graphics.

0 0 votes
Article Rating
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@nirajsingh9685
11 months ago

awesome three D rendering like blender