Getting Started with Threejs

Introduction

What is Threejs? It is very simple. It is a js used to write 3D programs. It is a WebGL third-party library written in JavaScript. Because it is open source, it should be regarded as the most widely used 3D engine for web pages with the most data in China.

Threejs is a 3D engine based on WebGL, which can create many scenes. It can be used to display 3D objects, play 3D animation, etc., and can also interact with web pages through input devices such as mouse and keyboard, so that users can have a better user experience.

WebGL Compatibility Check

Import the WebGL.js file, check before starting rendering.

if (WEBGL.isWebGLAvailable()) {
    
    
    // Initiate function or other initializations here
    animate();
} else {
    
    
    var warning = WEBGL.getWebGLErrorMessage();
	document.body.appendChild(warning);
}

# WebGL2检测是否支持
if (WEBGL.isWebGL2Available() == false) {
    
    
    var warning = WEBGL.getWebGL2ErrorMessage();
	document.body.appendChild(warning);
}

components

core components

Scenes

The scene is equivalent to this world, which can accommodate all elements, which is the virtual world we are familiar with, and can place all the things we want to place in the scene.

video camera

The camera is equivalent to our eyes, used to show everything we can see in the scene.

The camera is used to control the area displayed in the 3D space, and is divided into an orthographic camera and a perspective camera.

Renderer

The renderer is used to display the object or some other elements that the camera sees on the web page.

other components

light source

Light sources are equivalent to objects that emit light in reality, such as parallel light sources such as the sun and the moon, and point light sources such as incandescent lamps.

Loader

The role of the loader is mainly to load various models into the scene.

Threejs provides a variety of loaders, similar to OBJLoader, FBXLoader, etc.

Model

In fact, there is no so-called model component. Here is a model component for easy description. The model includes aggregates, Mesh, and shaders, which together constitute an object in a scene.

epilogue

There are many components in Threejs, which are good for animation, audio, etc., so I won’t go into details here. Only a brief description of the components is given here, and a detailed description of each component will be given later.

I am a beginner in Threejs. If there is something wrong with the writing, please criticize and correct me.