Creating an Impressive 3D Web Developer Portfolio Using React JS and Three.js | Beginner Tutorial for Deployment

Building and deploying a 3D web developer portfolio in React JS using Three.js can be a great way to showcase your skills and projects to potential clients and employers. In this tutorial, we will walk through the process of creating a stunning 3D portfolio using React JS and Three.js, and deploying it to the web.

Step 1: Setting up your development environment

Before you begin, make sure you have Node.js and npm installed on your machine. You can check if you have Node.js installed by running the following command in your terminal:

node -v

If you don’t have Node.js installed, you can download it from the official website: https://nodejs.org/

Once you have Node.js installed, you can create a new React JS project using create-react-app. Run the following command in your terminal to create a new React JS project:

npx create-react-app my-3d-portfolio

Replace "my-3d-portfolio" with the name of your project.

Step 2: Installing Three.js

Next, you need to install Three.js in your project. Three.js is a popular 3D graphics library that will allow you to create interactive 3D scenes in your portfolio.

To install Three.js, run the following command in your terminal:

npm install three

Step 3: Creating a 3D scene

Now that you have Three.js installed, you can start creating your 3D portfolio. Open the src folder in your project directory and create a new file called Scene.js. This file will contain the code for your 3D scene.

In the Scene.js file, import Three.js at the top of the file:

import * as THREE from 'three';

Next, create a new function called init() that will set up your 3D scene:

function init() {
    // Create a new scene
    const scene = new THREE.Scene();

    // Create a camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Create a renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    // Position the camera
    camera.position.z = 5;

    // Animate the cube
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    animate();
}

init();

Step 4: Integrating Three.js with React

Now that you have created a basic 3D scene, you can integrate it with your React JS project. Open the App.js file in your src folder and import the Scene component at the top of the file:

import Scene from './Scene';

Next, replace the code inside the App component with the following code:

function App() {
    return (
        <div>
            <Scene />
        </div>
    );
}

export default App;

This code will render the 3D scene inside your React component.

Step 5: Adding interactivity to your 3D scene

To make your portfolio more interactive, you can add event listeners to the 3D scene. For example, you can rotate the cube when the user clicks on it.

In the Scene.js file, add the following code inside the init() function:

// Add interactivity to the cube
cube.addEventListener('click', function () {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
});

Step 6: Deploying your 3D portfolio

To deploy your 3D portfolio to the web, you can use services like GitHub Pages or Netlify. Follow these steps to deploy your project to GitHub Pages:

1. Create a new repository on GitHub and push your project to the repository.
2. Install the gh-pages package by running the following command in your terminal:

npm install gh-pages --save-dev

1. Add the following properties to the package.json file in your project:

"homepage": "https://your-username.github.io/your-repo-name",
"scripts": {
    "deploy": "npm run build && gh-pages -d build"
}

Replace "your-username" with your GitHub username and "your-repo-name" with the name of your GitHub repository.

1. Run the following command in your terminal to deploy your project to GitHub Pages:

npm run deploy

Your 3D portfolio should now be deployed to GitHub Pages at the URL specified in the homepage property.

In this tutorial, we walked through the process of creating a 3D web developer portfolio in React JS using Three.js. By following these steps, you can create a stunning and interactive portfolio to showcase your skills and projects. Deploying your portfolio to the web will allow you to share it with potential clients and employers.