Use Threejs to draw simple 3D graphics

First, if you want to learn Threejs, take a look at the official basic tutorial, which explains the core concepts of Threejs and some important objects. This article is the specific use of Threejs to add 3D graphics of a hydrological, see the freedom to add other objects have a reference.

Using Threejs to draw 3D graphics, the result of general drawing is generated by the canvas element, for the plane, 3D effect, change of perspective and interaction, animation this piece, using Threejs can quickly and easily help us to complete the work, without having to create a canvas in step-by-step, Get the context and draw it again. Threejs There are some basic concepts that need to be understood before they are used.

Three core blocks: Scene, camera, renderer. The functions are: 3D container displaying all contents in canvas, a projection frame showing visible area in the three-dimensional container, and a renderer for photo display after the screen is selected.　　All renderers need to determine the scene and camera when rendering. When actually making richer content, Threejs provides many objects that can be quickly completed with a complex 3D graphic and flexible adjustments for 3D images.　　These objects include geometric shapes, materials, light, timers, rays, guides, animations, audio, model loaders, controllers, etc., in addition to the Matrix, four, and so on some advanced operations, simple applications will not be involved. Start by creating three core objects: Scene 　　For a 3D application, the scene should be unique and all relevant content should be added to the unique scene, whether it is to be displayed or not, and the display is determined by adjusting the camera angle. All scenarios are containers for all specific content.

New Three. Scene ();

The initialization of the scene can customize some of the contents, scene receives the object form the parameter, compares the useful property including:

* Fog: Indicates whether to add fog effect in the scene, in 3D space will become a visible space, the default value is NULL, you can set a fog object * overridematerial: The default value is NULL, you can set a material object, So all the objects in the scene will be rendered as a set of materials. CameraThe camera is used to control the area of the 3D space display, usually using a perspective camera with a distance and an orthographic camera showing the projection, of course, to use the camera directly, and to configure the appropriate parameters to achieve the appropriate camera.　　The perspective camera displays nearly large and small distances based on the depth of the object's default z-axis in the scene, while an orthographic projection camera displays objects near and far apart at normal proportions. Normal camera Direct use: const CAMERA = new three.　　Camera (); 3D Scene Summary Common perspective camera, if it is to create a perspective camera, then for the same size in 3D space but the z-axis distance is not allowed to be two objects in the camera simultaneously display, farther objects display smaller.

New Three. Perspectivecamera (45, 1, 1, 100);

The perspective camera accepts 4 parameters by default, representing the angle of view, cross-sectional aspect ratio, near-section distance, far cross-section distance (the specific parameter explanation see the link above, and the model can be seen) rendererThe 3D effect display in the browser is a WEBGL-based API, which is reflected in the name using the renderer

New Three. Webglrenderer ();

Initialization can be equipped with parameters: * Canvas: Pass a canvas DOM element, if not passed in, then the canvas will be added through Renderer.domelement, the canvas is used to show the content of the drawing * Alpha: The canvas default is a black background, sometimes we only If you want to display a color, this item is set to True * AntiAlias: antialiasing, as the name implies, the default is False * Logarithmicdepthbuffer: This value defaults to False, is the content with log depth detection, In the scene of the object from the field of view is different, generally in the case of overlapping objects display near the object, the special circumstances may be in depth to determine the problem, the material has overlapping and broken performance, at this time need to set to true three core objects are determined, then the page directly associated with, Set the canvas size and add to body:

Renderer.setsize (Window.innerwidth, Window.innerheight);d ocument.body.appendChild (renderer.domelement);

The following is a rough addition to a set of objects:

The concept of the so-called group is that because 3D graphics in a scene are one, multiple 3D graphs can be formed into a group, and one or a group of shapes can be named by the Name property, and the corresponding 3D object is found by name. Grouping is necessary for multiple models in a scene.

To add a set of objects, first there must be an object, the object has a shape, there is material, to display the material needs light, more need to determine the position of the object, rotation angle, scale. To show that you need to add to the scene, the camera is seated correctly and the renderer takes the camera's fixed field of view for a picture rendering.

Let group =Newthree. Group (); Scene.add (group);//Add two objectsLet cube =NewThree. Boxgeometry (10, 10, 10); let Boxmaterial=NewThree. Meshbasicmaterial ({color:0x00ff00, wireframe:true}); let Box=Newthree. Mesh (Cube, boxmaterial); box.position.x= 10; group.add (box);
Let Sphere=NewThree. Spheregeometry (5, 32, 32); let Spherematerial=NewThree. Meshnormalmaterial ({wireframe:true, Transparent:true}); let Blet=Newthree. Mesh (sphere, spherematerial); blet.position.x=-10; Group.add (blet);//Add LightLet light =NewThree. Ambientlight (0x404040 ); Scene.add (light);//To see objects in space, you need to adjust the distance and orientation.CAMERA.POSITION.Z = 100;//update space needs to be re-renderedRenderer.render (scene, camera);

Geometry has many geometric shapes, most of them are encapsulated, the rules are well drawn, and the unique graphics need to draw their own strokes into the data, such as shape.

There are many kinds of materials, the materials used here are wireframe, so that we can observe that the objects we add are indeed 3D structures.

There is a group in the scene, so all the 3D objects displayed in the group are in the scene. To show that you have to make sure that the field of view is right for the object, that is, the camera's position and angle, then there is light to see the color of the material. Don't forget to render it at last.

This is the case in this scenario:

As if the 3D thought is not very obvious, then add animation to a turn, the two objects to the center of rotation:

Window.requestanimationframe (function  animate () {  requestanimationframe (animate);   + =0.01   ; + =0.01   ; + =0.01  ; + = 0.01;  Renderer.render (Scene, Camera)})

It's almost like this:

More usage Reference: https://threejs.org/examples/

It's still very interesting.

Use Threejs to draw simple 3D graphics