1. Three.jsWhat is it?
First attach the document:
Official Website: JavaScript 3D Library
Chinese Documentation: Chinese Documentation
Three.jsIt is a class library that allows users to start building projects javascriptthrough . WebGLAs we all know, learning WebGLneeds graphics knowledge, and webglneeds to jspass glsltwo languages, which will greatly increase the learning difficulty of front-end developers.
Therefore, Three.jsit is a tool for us to get started quickly. It encapsulates the interface WebGLprovided very well, simplifies many details, greatly reduces the learning cost, greatly improves the performance, and the function is very powerful. Users do not need to study in detail WebGL. It can easily create three-dimensional graphics, which is the main tool for front-end developers to develop 3D graphics.
2. Concept introduction
1、WebGL
WebGL (Web Graphics Library) is a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible web browser without the use of plug-ins. WebGL does this by introducing an API that is very consistent with OpenGL ES 2.0 and can be <canvas>used in HTML5 elements. This consistency allows the API to take advantage of hardware graphics acceleration provided by the user's device.
The browsers currently supporting WebGL are:
- Firefox 4+
- Google Chrome 9+
- Opera 12+
- Safari 5.1+
- Internet Explorer 11+
- Microsoft Edge build 10240+
However, some features of WebGL also require the support of the user's hardware device.
The WebGL 2 API introduces support for most of the OpenGL ES 3.0 feature set; it is provided through the WebGL2RenderingContext interface.
<canvas>Elements are also used by the Canvas API for 2D graphics on the web.
2、OpenGL
OpenGL is an open graphics library and a cross-language, cross-platform application programming interface (API) for rendering 2D and 3D vector graphics.
3、Canvas
<canvas>Labels draw graphics (such as charts and other images) through scripts (usually JavaScript).
<canvas>Labels are just graphics containers, and scripts must be used to draw graphics.
Three, OpenGL, WebGL, Canvasand Three.jsthe relationship between the four
- OpenGL: 3D Graphics Standard
- WebGL：OpenGL + JavaScript
- Canvas：WebGL + Canvas 2D
- Three.js: a library based on WebGL packaging
4. Three.jsBasic introduction
Three.jsThe first step in getting started is to understand the three basic concepts of scene Scene, camera ,Camera and renderer .Renderer
1. Scene
A scene is a three-dimensional space, a container for storing all items, and is used to represent a real three-dimensional scene in simulated life, or a three-dimensional world. The scene can be imagined as an empty room, in which objects to be presented, cameras, light sources, etc. can be placed.
// 创建3D场景对象Scene
const scene = new THREE.Scene();
2. Camera
A camera needs to be added to the scene. The camera is used to determine the observation position, direction, and angle. What the camera sees is what we finally see on the screen. During the running of the program, the position, direction and angle of the camera can be adjusted.
Just like you want to get a photo in your life, you need a camera for taking pictures.
Commonly used cameras are:
- Perspective projection camera (perspectiveCamera)
- Orthographic camera (OrthographicCamera)
Here we only introduce the perspective projection camera (perspectiveCamera) (important!!)
The perspective projection camera is PerspectiveCameraessentially simulating the law of the human eye to observe the world, the near big and the far small.
// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();
The four parameters of the perspective projection camera fov, aspect, near, farconstitute a 3D space of a quadrangular prism, which is called a viewing frustum. Only objects within the viewing frustum will be rendered, and objects outside the viewing frustum will not be displayed Canvason the canvas. .
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = window.innerWidth; //宽度
const height = window.innerHeight; //高度
// 50:视场角度, width / height:Canvas画布宽高比, 0.1:近裁截面, 1000：远裁截面
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
PerspectiveCameraParameter introduction:
PerspectiveCamera( fov, aspect, near, far )
| parameter | meaning | Defaults |
|---|---|---|
| fov | The vertical view angle of the camera viewing frustum | 50 |
| aspect | The length ratio of the camera's viewing frustum in the horizontal direction and the vertical direction, generally set to Canvas canvas aspect ratio width / height | 1 |
| near | Camera view frustum close section relative to camera distance | 0.1 |
| far | The distance between the far cut section of the camera viewing frustum and the camera, far-near constitutes the height direction of the viewing frustum | 2000 |
3. Renderer
A WebGL renderer object WebGLRenderercan a WebGL renderer.
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
Set Canvas canvas size.setSize()
// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer rendering method.render()
The renderer WebGLRendererexecutes the rendering method .render()to generate a Canvas (photo), and presents the 3D scene Scene on the canvas. You can .render()understand it as the "click" of the camera to take pictures.
renderer.render(scene, camera); //执行渲染操作
Renderer Canvas properties.domElement
WebGLRendererRenderer The Canvas generated.domElement by the rendering method can be obtained through attributes, which is essentially an HTML element: Canvas Canvas..render().domElement
document.body.appendChild(renderer.domElement);
Three.jsThe first test - the basic concepts are introduced, and I will slowly learn new knowledge later. As a beginner, come on!