Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to draw 3D graphics composed of points, lines and surfaces with HTML5". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to draw 3D graphics composed of points, lines and surfaces with HTML5.

Because the Canvas canvas is flat after all, you have to abstract a Z axis to have 3D. Then the 3D coordinates are converted into 2D coordinates, painted on the canvas, and then through rotation and other transformation effects to produce 3D sense. To do 3D is generally from point to line, and then from line to surface.

[point]

Point, I have written a blog post about 3D to analyze the 3D tag cloud, but it is actually very simple. Although this blog post is about the 3D tag cloud realized by div, the principle of 3D is the same after all, that is, the simplest 3D composed of points. Each label is a dot. You can also look directly at this DEMO:

3DBall

There are a total of 500 point objects in it, and each point object changes their size and transparency according to their Z axis, and then distributes them evenly on the sphere to form a point sphere.

[line]

If you know how to do something, the line will be easy, just connect the dots. This is not a DEMO, but it's really not difficult. Just cycle through moveTo, and then lineTo, and the line comes out.

[noodles]

This blog post is mainly about noodles.

Without saying a word, let's go to a DEMO first:

3D cube

To make a cube, I used three objects: a point object, a face object, and an object of the cube itself:

The next one is the point object, the x _ get2d y ~ Z is the 3D coordinate of the point, and the _ point method converts the 3D coordinate to the 2D plane. FallLength is the focal length.

XML/HTML Code copies content to the clipboard

Var Vector = function (xmai yjinz) {

This.x = x

This.y = y

This.z = z

This._get2d = function () {

Var scale = fallLength/ (fallLength+this.z)

Var x = centerX + this.x*scale

Var y = centerY + this.y*scale

Return {x:x, y:y}

}

}

Then there is the face object:

The property page of the surface object is easy to understand, a face is a square, v1v2v3v4 is the four vertices of the face, zIndex this attribute is very important, represents the level of this face, is in the outermost or inside, this must have, so that when using canvas painting can let this face painting in front, will not be covered by other faces. The value of zIndex is also easy to understand, which is the average value of the z-axis coordinates of the vertex, which is actually the z-axis coordinates of the center point. The color is the color of this face.

XML/HTML Code copies content to the clipboard

Var Face = function (vector1,vector2,vector3,vector4,color) {

This.v1 = vector1

This.v2 = vector2

This.v3 = vector3

This.v4 = vector4

This.color = color

This.zIndex = (this.v1.z + this.v2.z + this.v3.z + this.v4.z) / 4

This.draw = function () {

Ctx.save ()

Ctx.beginPath ()

Ctx.moveTo (this.v1._get2d () .x, this.v1._get2d () .y)

Ctx.lineTo (this.v2._get2d () .x, this.v2._get2d () .y)

Ctx.lineTo (this.v3._get2d () .x, this.v3._get2d () .y)

Ctx.lineTo (this.v4._get2d () .x, this.v4._get2d () .y)

Ctx.closePath ()

/ / ctx.fillStyle = "rgba (" + parseInt (Math.random () * 255) + "," + parseInt (Math.random () * 255) + "," + parseInt (Math.random () * 255) + ", 0.2)"

Ctx.fillStyle = this.color

Ctx.fill ()

}

}

Finally, the object of the cube itself:

Because the cube has to rotate in the end, there are not only face objects but also point objects in the cube object, and the rotation of the point will cause the rotation of the face. Length is the side length of the cube, and _ initVector is the vertex of the initialized cube. The _ draw method forms faces, puts the faces into an array, and then sorts the faces (that is, according to the zIndex in the faces). After sorting, call the draw method in each face. The cube comes out.

XML/HTML Code copies content to the clipboard

Var Cube = function (length) {

This.length = length

This.faces = []

This.vectors = []

}

Cube.prototype = {

_ initVector:function () {

This.vectors [0] = new Vector (- this.length/2,-this.length/2, this.length/2)

This.vectors [1] = new Vector (- this.length/2, this.length/2, this.length/2)

This.vectors [2] = new Vector (this.length/2,-this.length/2, this.length/2)

This.vectors [3] = new Vector (this.length/2, this.length/2, this.length/2)

This.vectors [4] = new Vector (this.length/2,-this.length/2,-this.length/2)

This.vectors [5] = new Vector (this.length/2, this.length/2,-this.length/2)

This.vectors [6] = new Vector (- this.length/2,-this.length/2,-this.length/2)

This.vectors [7] = new Vector (- this.length/2, this.length/2,-this.length/2)

}

_ draw:function () {

This.faces [0] = new Face (this.vectors [0], this.vectors [1], this.vectors [3], this.vectors [2], "# 6c6")

This.faces [1] = new Face (this.vectors [2], this.vectors [3], this.vectors [5], this.vectors [4], "# 6cc")

This.faces [2] = new Face (this.vectors [4], this.vectors [5], this.vectors [7], this.vectors [6], "# cc6")

This.faces [3] = new Face (this.vectors [6], this.vectors [7], this.vectors [1], this.vectors [0], "# c6c")

This.faces [4] = new Face (this.vectors [1], this.vectors [3], this.vectors [5], this.vectors [7], "# 666")

This.faces [5] = new Face (this.vectors [0], this.vectors [2], this.vectors [4], this.vectors [6], "# ccc")

This.faces.sort (function (a, b) {

Return b.zIndex-a.zIndex

});

This.faces.foreach (function () {

This.draw ()

})

}

}

The cube is done, and then you can get it moving. Change the angle of rotation of the cube according to the mouse position. The rotateX and rotateY methods rotate all points around the X axis and about the Y axis. I seem to have mentioned the principle of this in the previous blog post. If you want to know more, you can go to Baidu computer graphics to learn 3D transformation. The simplest rotation matrix is around the X axis and around the Y axis. Of course, if you are interested, you can also search the rotation matrix around any axis. This is a little complicated. I wanted to use it to make a Rubik's cube, but I encountered some problems that haven't been solved yet. Okay, this has gone too far. Through rotateX and rotateY methods, each point can get the position of the next frame and redraw in the animation cycle. In this way, the rotating cube is made.

XML/HTML Code copies content to the clipboard

If ("addEventListener" in window) {

Window.addEventListener ("mousemove", function (event) {

Var x = event.clientX-canvas.offsetLeft-centerX

Var y = event.clientY-canvas.offsetTop-centerY

AngleY = x = 0.0001

AngleX = yearly 0.0001

});

}

Else {

Window.attachEvent ("onmousemove", function (event) {

Var x = event.clientX-canvas.offsetLeft-centerX

Var y = event.clientY-canvas.offsetTop-centerY

AngleY = x = 0.0001

AngleX = yearly 0.0001

});

}

Function rotateX (vectors) {

Var cos = Math.cos (angleX)

Var sin = Math.sin (angleX)

Vectors.foreach (function () {

Var Y1 = this.y * cos-this.z * sin

Var Z1 = this.z * cos + this.y * sin

This.y = Y1

This.z = Z1

});

}

Function rotateY (vectors) {

Var cos = Math.cos (angleY)

Var sin = Math.sin (angleY)

Vectors.foreach (function () {

Var x1 = this.x * cos-this.z * sin

Var Z1 = this.z * cos + this.x * sin

This.x = x1

This.z = Z1

})

}

Cube = new Cube (80)

Cube._initVector ()

Function initAnimate () {

Cube._draw ()

Animate ()

}

Function animate () {

Ctx.clearRect (0century 0canvas.widthdepartment canvas.height)

RotateY (cube.vectors)

RotateX (cube.vectors)

Cube._draw ()

If ("requestAnimationFrame" in window) {

RequestAnimationFrame (animate)

}

Else if ("webkitRequestAnimationFrame" in window) {

WebkitRequestAnimationFrame (animate)

}

Else if ("msRequestAnimationFrame" in window) {

MsRequestAnimationFrame (animate)

}

Else if ("mozRequestAnimationFrame" in window) {

MozRequestAnimationFrame (animate)

}

Else {

SetTimeout (animate, 16)

}

}

I will not post all the code, which can be seen through the console in DEMO. I also did not quote any other framework and so on, directly copy down can be used.

After writing a cube that can rotate, multiple cubes can also be rotated.

2015512164340019.png (484 × 463)

Poke DEMO: noodles: 3D cubes 2 3D cubes (this pure chip thinks it's cooler without noodles)

At this point, I believe you have a deeper understanding of "how to draw 3D graphics composed of points, lines and surfaces with HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.