Using three. js to achieve the motion of the robot arm, three. js Robot

Using three. js to achieve the motion of the robot arm, three. js Robot

Three. js is a 3D engine running in a browser. You can use it to create a variety of 3D scenes, including cameras, light shadows, materials, and other objects. You can see many wonderful demos on its homepage. However, this engine is still in a relatively immature development stage. Its abundant APIs and scarce documents increase the learning difficulty for beginners (especially the lack of documents) three. the js Code is hosted on github. -- Baidu encyclopedia

Three. js encapsulates the OpenGl ES 2.0 API, making it easier for us to develop various graphic effects on the browser. Compared with winform and MFC, this code library allows us to avoid some winform and MFC details and focus on drawing images. However, because this library is not encapsulated to be perfect, some parts still need to be implemented by ourselves.

Link to Three. js Chinese document Three. js Chinese Document | reference manual | User Guide | animation special effect instance | step 3

Although the documents on this link have some errors, there are still many pitfalls and many things are not clearly described, they can also be referenced.

If you want to see the effect directly, you can directly download the source code at the end of the article, with the operation method attached. You also need to use a computer browser to open the code, because there is no adaptation to the mobile end, so the mobile end does not work well.

Next, let's implement the motion of a robot's arm. Results:

　　

It's ugly, right? But this is just a tutorial, so beautification can be done by yourself. Too much beautification work will increase the complexity of learning.

The problems we need to solve when creating this robot are:

1. How to make our images rotate along any axis;

2. How to Use the keyboard to control its rotation;

After these two problems are solved, our robots are very easy to draw. Next, we will begin to explain the code and ideas.

First, we need to generate a canvas, because in html5, all the drawing work is carried out in canvas. We can write a canvas label or let Three. js generate one for us. Here let Three. js help us generate:

　　

 1 var scene = new THREE.Scene(); 2 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); 3 camera.position.z = 5; 4 camera.position.y = 1; 5 camera.position.x = 1.5; 6 camera.lookAt(new THREE.Vector3(0, 0, 0)); 7 scene.add(camera); 8 var renderer = new THREE.WebGLRenderer(); 9 renderer.setSize(window.innerWidth, window.innerHeight);10 document.body.appendChild(renderer.domElement);

Why does the camera need to adjust its position? This is because, if we do not adjust the position, our angle of view is facing the object, and the 3D effect of the object is not so obvious because of the angle of view.

Next, we need to draw the head, legs, and body of the robot. It should be noted that if we select an inappropriate material for the image we generated, the 3D effect will be invisible. The selection of materials is beyond the scope to be discussed. Therefore, we only use basic materials for simple demonstration. The Code is as follows:

　　

1 // robot body 2 var geometry = new THREE. boxGeometry (1, 1, 1, 8, 8); 3 var material = new THREE. meshBasicMaterial ({4 color: 0x00ff00, 5 wireframe: true // This is to make it become a grid State, so that it is easier to observe, the default is false 6 }); 7 var cube = new THREE. mesh (geometry, material); 8 cube. position. y =-1; 9 // robot head 10 var head = new THREE. sphereGeometry (0.5, 32, 32); 11 var material = new THREE. meshBasicMaterial ({12 color: 0x0909FD, 13 wireframe: true14}); 15 var sp = new THREE. mesh (head, material); 16 // robot legs 17 var geometry = new THREE. boxGeometry (0.1, 1, 0.1); 18 var material = new THREE. meshBasicMaterial ({19 color: 0xFF2E67, 20 wireframe: true21}); 22 var left_leg = new THREE. mesh (geometry, material); 23 var right_leg = new THREE. mesh (geometry, material); 24 left_leg.position.x =-0.3; 25 left_leg.position.y =-2; 26 right_leg.position.x = 0.3; 27 right_leg.position.y =-2;

Our robots are like this:

　　

Next, the most important thing is the rotation of the robot arm. Many new students have discovered that the rotating axis of our graphics is in the center of the graphics. What does it mean? See the figure below:

　　

I have identified the coordinate axes of the generated objects in the figure. We can see that the coordinate axes are actually the center of gravity of the position. By using functions or setting attributes, we can only go around these three axes. Some people asked, can we solve this problem by first shifting, then rotating, and then moving back to the original position? This is what we teach in computer graphics textbooks. It can also be done in winfoem and MFC, but thanks to three. the special feature of the coordinate axes of objects generated by js cannot be solved in this form (for close testing ). If you are interested, you can give it a try.

So what should we do? We searched for the manual and found that three. js had a class, Object3D (). This class generates a 3D model, or container. So, can we generate a container, then place the image we need into this container, and then adjust the location of the container and the image to rotate the image around any axis? Obviously, you can. If you can think of it, it means that your IQ is still commendable. However, we have nothing to think of, because we need to admit that we are mediocre, in order to motivate ourselves to study hard. Next, we will discuss how to perform the rotation operation.

First, let's create a container object and add the axis to display it to see what the container we generated is.

1 var upbox = new THREE.Object3D();2 scene.add(upbox);3 upbox.add(new THREE.AxisHelper(3));

The effect is as follows:

　　

We can see that although we cannot see this container, it still has its corresponding coordinate position. We can move its position or rotate it by setting its position attribute. Next, we put the cube we generated into this container, and also display the coordinate axes of our cube. The Code is as follows:

　　

1 var geometry = new THREE. boxGeometry (1, 1, 1, 8, 8); 2 var material = new THREE. meshBasicMaterial ({3 color: 0x00ff00, 4 wireframe: true // This is to make it become a grid State, so that it is easier to observe, the default is false 5 }); 6 var cube = new THREE. mesh (geometry, material); 7 cube. add (new THREE. axisHelper (3); 8 9 var upbox = new THREE. object3D (); 10 scene. add (upbox); 11 upbox. add (new THREE. axisHelper (3); 12 13 var render = function () {14 requestAnimationFrame (render); 15 upbox. add (cube); // put the cube into the container 16 renderer. render (scene, camera); 17}

Effect

　　

We can see that the axis of the newly added cube overlaps with that of the container. At this time,The key is that the displacement of our cube is not relative to the coordinates of the world, but relative to the coordinates of its parent container. That is to say, our cube is now not relative to the origin of the world coordinate system, but relative to the coordinate origin of the container.Because it is not intuitive to represent the world coordinate system, you can try to move the location of the container, move the location of the container, and the location of the cube will change with the container.

Next, we will move the position of the cube:

1 cube.position.x = 1;2 cube.position.y = -1;

The effect is as follows:

　　

We can see that our cube has been moved, and it is moved relative to the origin of the container. Then, let's try to rotate our container:

　　

1 upbox.rotation.z = 1;

The effect is as follows:

　　

Our cube is then rotated along with the container.

Then, I can draw a conclusion: we can regard the axis of our container as the axis we need to move, and then move our graphics to the appropriate position, we need to let the cube rotate by x = 1, and then move the container to the position where x = 1; we need to let the cube turn by y = 1, move our container to the position where y = 1 to rotate. However, there is also a problem, that is, the coordinates of our cubes are no longer relative to the coordinates of the world. As I said before, we only need to move the cube to a proper position. Where is the proper position? The text description is very complex. We use code and results to describe:

　　

1 cube.add(new THREE.AxisHelper(1));2 cube.position.x = 0.5;3 cube.position.y = 0.5;4 cube.position.z = -0.5;

:

　　

This position can be said to be a proper position. We directly set the container coordinates, and then let the container rotate to achieve our function of rotating around any axis. Of course, you can adjust the proper position according to your individual needs.

If we need to implement complex control, we can adopt the method of setting containers in the container. This is very similar to the skeleton in the animation, but not the same. Next, we can continue with the previous robot to draw our robot arm.

　　

1 // robot upper arm 2 var upbox = new THREE. object3D (); 3 upbox. position. x = 0.5; 4 upbox. position. y =-1.0; 5 scene. add (upbox); 6 upbox. add (new THREE. axisHelper (2); 7 var geometry = new THREE. boxGeometry (1, 0.1, 0.1); 8 var material = new THREE. meshBasicMaterial ({9 color: 0xFF2E67, 10 wireframe: true11} 12 13); 14 var ge = new THREE. mesh (geometry, material); 15 ge. position. x = 0.5; 16 ge. position. y = 0; 17 // robot arm 18 var box = new THREE. object3D (); 19 box. position. x = 1.0; 20 box. position. y= 0.0; 21 scene. add (box); 22 // box. add (new THREE. axisHelper (2); 23 var geometry = new THREE. boxGeometry (0.1, 1, 0.1); 24 var material = new THREE. meshBasicMaterial ({25 color: 0xFF2E67, 26 wireframe: true27} 28 29); 30 var ge_next = new THREE. mesh (geometry, material); 31 ge_next.position.y = 0.5; 32 box. add (ge_next); 33 // robot palm 34 var handbox = new THREE. object3D (); 35 handbox. position. x = 0; 36 handbox. position. y = 0.0; 37 scene. add (handbox); 38 // handbox. add (new THREE. axisHelper (2); 39 var geometry = new THREE. boxGeometry (0.5, 0.5, 0.5, 4, 4); 40 var material = new THREE. meshBasicMaterial ({41 color: 0xFF2E67, 42 wireframe: true43} 44 45); 46 var hand = new THREE. mesh (geometry, material); 47 hand. position. y = 1.2; 48 // specifies 49 var zhongzhibox = new THREE in the robot. object3D (); 50 zhongzhibox. position. x = 0; 51 zhongzhibox. position. y= 1.5; 52 scene. add (zhongzhibox); 53 // zhongzhibox. add (new THREE. axisHelper (2); 54 var geometry = new THREE. boxGeometry (0.1, 0.5, 0.1); 55 var material = new THREE. meshBasicMaterial ({56 color: 0xFF2E67, 57 wireframe: true58} 59 60); 61 var zhongzhi = new THREE. mesh (geometry, material); 62 zhongzhi. position. y = 0.2; 63 scene. add (cube); 64 scene. add (sp); 65 scene. add (ge); 66 scene. add (ge_next); 67 scene. add (hand); 68 scene. add (zhongzhi); 69 scene. add (left_leg); 70 scene. add (right_leg );

There are also operations for nested containers in the container.

Then, we should solve the second problem. How can we use a keyboard to control our robot arm?

Simple: Use event binding. We can bind the onkeydown event to control the robot's arm. Similar:

　　

1                      onkeydown = function(event) {2                 if(angle > 0 || angle <= -1.5) {3                     angle = 0;4                     return false;5                 }6                  else if(event.keyCode == 38) {7                     angle -= 0.2;8                 }9             }

Why is there an angle? Because we need to judge the angle of the robot's arm movement. After all, it is the arm, and the rotation angle must have a limit, right? However, due to the complexity (in fact, it is lazy), I only implemented two limitations.

After implementing the above Code, we should be able to draw a controllable robot.

The source code is as follows:

Robot Arm source code