Front-end three.js basic introductory tutorial

1. Basic elements of TS

There are mainly scenes , cameras , and renderers .

1. Scene

[Scene] refers to a three-dimensional space, a container for all items. The scene can be imagined as an empty room, and then we will put the objects, cameras, light sources, etc. to be presented in the room.

// 创建场景

const scene = new THREE.Scene();

2. Camera

[Camera] is used to determine the position, direction, and angle. What the camera sees is what we most always see on the screen. During the running of the program, the position, direction and angle of the camera can be adjusted.

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

3. Renderer

【Renderer】determines what element the rendering result should be drawn on the page, and how to draw it.

const renderer = new THREE.WebGLRenderer(); // 渲染器