How to use Lighting and WebGLRenderer in Three.js

How to use Lighting and WebGLRenderer in Three.js

Read about the types of lighting options and highly performant renderer WebGLRenderer available in Three.js, a JavaScript graphics library. Three.js uses the WebGL engine in the browser for rendering scenes. We’ll look at types of lights and WebGLRenderer in Three.js.

Read about the types of lighting options and highly performant renderer WebGLRenderer available in Three.js, a JS graphics library.

Three.js is a JS graphics library that is used for rendering 3D graphics in browsers. Major graphics organizations use Three.js for creating and rendering 3D scenes for movies, anime, advertisements, and games.

Three.js uses the WebGL engine in the browser for rendering scenes. The API is based on OpenGL (GL stands for graphics library), a desktop graphics API. In this post, we’ll look at types of lights and WebGLRenderer in Three.js.

Lights

First, let’s learn how to use lights in Three.js so we know the types of lighting that can be used and the effect each of them presents.

Three.js offers several different types of light. All lights in Three.js are instances of THREE.Light. They offer us illumination so that we can light up objects in a scene.

Not all material texture in objects in Three.js is affected by lighting. Only objects with MeshLambertMaterial and MeshPhongMaterial material texture can be affected by lighting.

Here are the type of lights available in Three.js:

Ambient

Ambient light is used for the illumination of objects in a scene. It does not point or direct light toward a direction, so it cannot cast shadows.

THREE.AmbientLight(color) 

The objects are illuminated by the color in the AmbientLight. Ambient light affects all lit objects in the scene equally, and is essentially a light that’s color is added to the color of an object’s material.

var cubeGeometry = new THREE.CubeGeometry(20, 20, 20);
var basicMaterial = new THREE.MeshLambertMaterial({
    color: 0x0095DD
});

var cubeMesh = new THREE.Mesh(cubeGeometry, basicMaterial);

var light = new THREE.AmbientLight(0x404040);
scene.add(light);

scene.add(cubeMesh)

For example, this illuminates the cube object with soft white light:

threejs-light-remderer

var light = new THREE.AmbientLight(0xf6e86d);

This code will illuminate the cube object with a green color.

threejs light renderer example

javascript three web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.