What is Three.js?

Three.js is a cross-browser JavaScript library, primarily used to animate and create 3D graphics to be displayed in any web browser. It's composed of features like scenes, effects, lights, cameras, and materials which enables developers to create visual scenes that can be used in any web application development. Three.js runs on all major desktop platforms, including large screens such as tablets and desktops.

Three.js is an open-source JavaScript library primarily used to display graphics, and 3D and 2D objects on the web browser. Three.js is WebGL API behind the scenes. It uses a web graphics library which is also known as Three.js, that provides the user with all the essential features like scenes, effects, lights, cameras, and objects, etc. Three.js uses WebGL for rendering complex algorithms, especially for real-time graphics rendering using GPU, to improve the power efficiency of your game.

Why Three.js is a better option for developing 3d games using Three.js?

Three.js is the most flexible and powerful 3D engine for web browsers. With it, you can create anything from simple 3D models to photorealistic, real-time scenes. It provides a simple API for creating and manipulating 3D objects and allows users to easily build complex geometries using just JavaScript APIs. You can even optionally render THREE.JS layers on top of each other instead of traditional DOM elements, meaning you can create incredibly realistic and immersive scenes with minimal effort.

Three.js is a widely used 3D JavaScript framework that allows you to use WebGL to create three-dimensional scenes with HTML5. The project aims to provide an API for Web Developers and Developers to create animated interactive Live Wallpaper using the latest web technologies like Three.js, WebGL, and Web Sockets.

There are many reasons to choose Three.js over Unity, including but not exclusive to the following: A great asset management system, a high-performance 3D graphics engine, and a modern GUI that can be extended by plugins. Furthermore, Three.js supports almost all web browsers out of the box.

Develop 3D games in React Native using Three.js

Develop 3D Games In React Native Using Three.js is a hands-on guide to help you get started with Expo-3, the newest JavaScript animation library in React Native. This blog will help you to know how to set up Expo-3 and use it to create a variety of 3D games. This includes learning how to use various features like exported data and filters with Expo-3 and React Native, working with physics calculations and animations within your app, as well as using Gsap for exporting animations for performance purposes.

If you want to develop an app, create a project using crna command to use the three.js template:

npx create-react-native-app -t with-three

In an existing app, now you can add thre.js with yarn:

yarn add three expo-three expo-gl

Now we start to write the code:

Now we needed to import three.js component to add our renderer later

import {

  AmbientLight,

  SphereGeometry,

  Fog,

  GridHelper,

  Mesh,

  MeshStandardMaterial,

  PerspectiveCamera,

  PointLight,

  Scene,

  SpotLight,

} from "three";

After importing the main component, you can use GLView inside your app's main view. Apart from it, you'll need to add some flex style(to fill all screens) and an onContextCreate function with gl parameter. 

  style={{ flex: 1 }}

  onContextCreate={async (gl) => {}}

/>

The on Context Create function is responsible for receiving a GL parameter and using it to create a scene. It adds other things like objects, lights, floors, cameras, and a lot more.

To make the app simple and faster, we need an instance, and we will list it for you to understand easily, and after, show the code example.

1. Renderer: In context creation, we needed an instance of Renderer and give it a gl parameter and background color to make our scene later.

2. Scene: The scene is where the game will take place, and where we will add the other objects that make it up.

3. Camera: The camera will be a very important part of our user's vision scene.

4. Lights (Point Light Ambient Light): The lights will illuminate our scene and objects, making shadows possible.

5. Mesh (Sphere and Cube): Meshes are objects, you can add them to the scene, you can edit your format, or you can import format from other platforms, in this scenario we will use a simple sphere mesh 

Before starting to write the onContextCreate function, we will create a class with Sphere Mesh (mentioned object).

class SphereMesh extends Mesh {

  constructor() {

    super(

      new SphereGeometry(0, 50, 20, 0, Math.PI * 2, 0, Math.PI * 2),

      new MeshStandardMaterial({

        color: 0xff0000,

      })

    );

  }

}

There are two things we need to do to create this project. First, we need to instance Sphere and Camera, and these steps can be coded in whatever you want like redux, context, and state, but in this case, We will instance in App.js main class. Also, we will declare 3 variables with the camera's initial position [0], this variable represents the distance between our sphere and our camera; the second thing is to calculate its view relative height (height of sphere at point where sphere is facing towards camera).

const sphere = new SphereMesh();

const camera = new PerspectiveCamera(100, 0.4, 0.01, 1000);

let cameraInitialPositionX = 0;

let cameraInitialPositionY = 2;

let cameraInitialPositionZ = 5;

Currently,  we will add all code on onContextCreate, and now GLView will look like this:

  style={{ flex: 1 }}

  onContextCreate={async (gl) => {

    // GL Parameter disruption

    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;

    // Renderer declaration and set properties

    const renderer = new Renderer({ gl });

    renderer.setSize(width, height);

    renderer.setClearColor("#fff");

 // Scene  declaration, add fog to see axes dimensions and grid helper

    const scene = new Scene();

    scene.fog = new Fog("#3A96C4", 1, 10000);

    scene.add(new GridHelper(10, 10));

    // Add all necessary lights

    const ambientLight = new AmbientLight(0x101010);

    scene.add(ambientLight);

    const pointLight = new PointLight(0xffffff, 2, 1000, 1);

    pointLight.position.set(0, 200, 200);

    scene.add(pointLight);

    const spotLight = new SpotLight(0xffffff, 0.5);

    spotLight.position.set(0, 500, 100);

    spotLight.lookAt(scene.position);

    scene.add(spotLight);

    // Add sphere object instance in to our scene

    scene.add(sphere);

   // Please look in the sphere and set the camera position

    camera.position.set(

      cameraInitialPositionX,

      cameraInitialPositionY,

      cameraInitialPositionZ

    );

    camera.lookAt(sphere.position);

    // Render function

    const render = () => {

      requestAnimationFrame(render);

      renderer.render(scene, camera);

      gl.endFrameEXP();

    };

    render();

  }}

/>

At this point, we already have a scene with lights and object instances. To complete the app, now we will make the sphere move to the front and back on click.

To create animations at 60 fps, we will use Gsap. This library is easy to use and used by many developers. Now we will install Gsap with yarn

yarn add gsap

With Gsap installation, import the TweenMax method from the library.

import { TweenMax } from 'gsap';

We will now make a function that will change our camera position and sphere, using the Tween method to animate it. This function can receive a number of parameters, which be the distance for the sphere that moves about its Z axis.

The most important part of our creation is to add new buttons on our screen. We will add some styles and use TouchableWithoutFeedback components.With the help of TouchableWithoutFeedback and add some style, we can create new two buttons that will move the Z axis to the front and back respectively. Important note: This component can be add as a child of GLView.

    onPressIn={() => move(-0.2)}

  >

      fontSize: 36, 

      MozUserSelect: "none",

      WebkitUserSelect: "none",

      msUserSelect: "none"

    }}>

      UP

    onPressIn={() => move(0.2)}

  >

      fontSize: 36, 

      MozUserSelect: "none",

      WebkitUserSelect: "none",

      msUserSelect: "none"

    }}>

      DOWN

Go beyond a basic video/image with 3D animation. Our Three.js engineers can create popping visuals for you that will truly stand out on your website, in your presentations and via your social media channels. Hire Three.js Experts for your 3d design