“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Three.js is a JavaScript library for creating 3D Web graphics in a Web browser. We have already introduced some basic knowledge and simple effects “Three.js Primer” and “[Three.js] As the Metasverse Opens the Way to WEB3D”. This article introduces some basic concepts starting from simple building cubes.

IO/Quintiontan…

The complete code is as follows:

const scene = new THREE.Scene(); Const camera = new THREE. PerspectiveCamera (75, window. InnerWidth/window. InnerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const geometry = new THREE.BoxGeometry(2, 2, 2 ); const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; Cube. Rotation. X + = 0.5; Cube. Rotation. + y = 0.5; renderer.render( scene, camera );Copy the code

This is a common pattern for every three.js application, including WebGLRenderer, Scene, and Camera, as follows:

scenario

Start by creating a Scene with the Scene (the Scene is a container for keeping track of the objects to be rendered and the light source to be used).

const scene = new THREE.Scene();
Copy the code

The camera

PerspectiveCamera is used to create a perspective projection Camera. This projection mode is used to simulate what the human eye sees, and it is the most common projection mode used in 3D scene rendering.

Const camera = new THREE. PerspectiveCamera (75, window. InnerWidth/window. InnerHeight, 0.1, 1000);Copy the code

PerspectiveCamera has four parameters:

  • fov– The vertical field of view of the camera cone is75;
  • aspect– Length to width ratio of the camera’s viewing cone. This parameter is calculated based on the viewing length and width of the pagewindow.innerWidth/window.innerHeight;
  • near– The value of the near end of the cone is0.1;
  • far– The camera views the distal end of the cone. The value is1000

WebGLRenderer

The WebGL renderer, which has better performance than the Canvas renderer, has the following syntax:

const renderer = new THREE.WebGLRenderer(parameters);
Copy the code

Parameters is an optional object that defines the properties of the renderer’s behavior; default values are used when this parameter is not set.

{canvas: "a canvas object used to draw output ", context:" a render context object used ", precision: "Precision of shader, including highp, mediump, lowp, default highp, if supported by device ", alpha:" Can I set background transparency, default false", premultipliedAlpha: Stencil: "Boolean, default to true", antialias: "Whether anti-aliasing is enabled, default to false", preserveDrawingBuffer: Dsmt4: "Save drawing buffer, default false", depth: "Boolean, default true", DSMT4: "Boolean, default false"}Copy the code

BoxGeometry

BoxGeometry is a geometric cube or quadrilateral used to construct a quadrilateral. The syntax is as follows:

const geometry = new THREE.BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer );
Copy the code
  • width– Width above the X axis. The default value is 1.
  • height– Height above the Y axis. The default value is 1.
  • depth– Depth above the Z-axis. The default value is 1.
  • widthSegments– (Optional) Number of width segments. The default value is 1.
  • heightSegments– (Optional) Number of height segments. The default value is 1.
  • depthSegments– (Optional) Number of segments in depth. The default value is 1.

This paper establishes a cube with length, width and height of 2:

const geometry = new THREE.BoxGeometry(2, 2, 2 );
Copy the code

MeshBasicMaterial

A material that draws geometry as a simple color (flat or wireframe) with the syntax:

MeshBasicMaterial( parameters : Object )
Copy the code
  • parameters– (Optional) An object used to define the appearance of a material, with one or more properties. Any properties of a material can be passed in from here (including fromMaterialAny inherited properties).

This article defines a red cube:

const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
Copy the code

Mesh

Mesh represents a class based on objects with triangles as polygon mesh. The syntax is as follows:

Mesh( geometry : BufferGeometry, material : Material )
Copy the code

Mesh=Geometry+Material

  • geometry(Optional)BufferGeometryThe default value is a new oneBufferGeometry.
  • material(Optional) OneMaterialOr one that containsMaterialThe default array is a new oneMeshBasicMaterial.
const cube = new THREE.Mesh( geometry, material );
Copy the code

Next, add the defined cube to the scene:

scene.add( cube );
Copy the code

render

The most important method for renderers is to use the camera to render a scene.

renderer.render( scene, camera );
Copy the code

The syntax format is:

render(scene, camera, renderTarget, forceClear);

  • sceneIs the scene to draw
  • cameraSpecifies the camera. The area illuminated by the camera will be converted to 2D and drawn to the screen
  • renderTargetIf the rendered content is not drawn directly to the screen, it is stored inrenderTargetOtherwise, render to the normal canvas
  • forceClearWhen true, color, depth, and template drawing buffers are cleared before rendering, even if the renderer’sautoClearProperties forfalse

At this point, a simple cube is constructed.