One 、Scene

Where can the scene make you 、 Put something for three.js To render , This is where you place the object 、 Where the lights and cameras .

// Create a scene 
const scene = new THREE.Scene();
// Scene background color 
scene.background = new THREE.Color(0xffffff);
// Fog 
scene.fog = new THREE.Fog(0xffffff, 0, 750);

Two 、camera

After you create a camera, you need to add it to the scene ,scene.add(camera);

2.1 Perspective camera （PerspectiveCamera）

This projection mode is used to simulate the scene seen by the human eye , It is 3D The most common projection mode used in scene rendering .

const camera = new THREE.PerspectiveCamera(75, element.offsetWidth / element.offsetHeight, 1, 1000);
// Set the camera position （x,y,z）
camera.position.set(0, 10, 0);

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov —  Camera cone vertical field of view angle 
aspect —  Camera cone aspect ratio 
near —  Camera cone near end face 
far —  Far end of camera cone 

2.2 Orthographic camera （OrthographicCamera）

In this projection mode , Whether the object is far or close to the camera , The size of the object remains the same in the final rendered image . 

3、 ... and 、WebGLRenderer Renderers

3.1 Constructors ：WebGLRenderer( parameters : Object )

parameters Parameters can be chosen ：

• antialias: Anti-Aliasing , The default is false
• depth:  Whether the drawing cache has at least 6 Bit deep cache . The default is true

const renderer = new THREE.WebGLRenderer({ antialias: true });

3.1 Method

setPixelRatio(value: number) Set the device pixel ratio . Usually used to avoid HiDPI The drawing on the device is blurred

setSize(width : Integer, height : Integer, updateStyle : Boolean) Will output canvas The size of is adjusted to (width, height) And consider the device pixel ratio , And change the viewport from (0, 0) Start adjusting to fit take updateStyle Set to false To prevent canvas Make any changes to the style of .

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(element.offsetWidth, element.offsetHeight);

render( scene : Object3D, camera : Camera ） Render a scene with a camera