집 >웹 프론트엔드 >H5 튜토리얼 >HTML5를 사용하여 점, 선, 표면으로 구성된 3D 그래픽을 그리는 예_html5 튜토리얼 기술

HTML5를 사용하여 점, 선, 표면으로 구성된 3D 그래픽을 그리는 예_html5 튜토리얼 기술

WBOY원래의: 2016-05-16 15:46:442042검색

캔버스를 2~3주 동안 가지고 놀았는데, 평면적인 물체를 가지고 노는 것도 똑같아서 3D로 장난을 치기 시작했습니다.

캔버스 캔버스는 결국 평면이기 때문에 3D를 구현하려면 Z축을 추상화해야 합니다. 그런 다음 3D 좌표를 2D 좌표로 변환하고 캔버스에 그린 다음 회전 및 기타 변형 효과를 사용하여 3D 느낌을 만듭니다. 3D를 수행하려면 일반적으로 점에서 선으로, 선에서 표면으로 이동해야 합니다.

【포인트】

클릭하시면 이전에 3D에 대한 블로그 글을 쓴 적이 있습니다. 3D 태그 클라우드를 파싱하는 것은 사실 매우 간단합니다 이 블로그 글은 div를 사용하여 구현한 3D 태그 클라우드에 대해 이야기하고 있지만 근본 원인은 3D의 원리는 동일하며 점으로 구성된 가장 단순한 3D입니다. 각 라벨은 포인트입니다. 이 데모를 직접 시청하실 수도 있습니다:
2015512164236104.png (344×329)

3DBall
그 안에는 총 500개의 점 개체가 있습니다. 각 점 개체는 Z축에 따라 크기와 투명도가 변경된 후 구에 균등하게 분포됩니다. 점 구.

【라인】

점 만드는 방법을 알고 나면 선을 그리는 것은 쉬울 것입니다. 점들을 연결하기만 하면 됩니다. 나는 이것에 대해 DEMO를 해본 적이 없지만 실제로 어렵지 않습니다. moveTo를 반복한 다음 lineTo를 반복하면 선이 나옵니다.

【국수】

이 블로그 게시물은 주로 얼굴에 대해 이야기합니다.
더 이상 고민하지 말고 먼저 데모를 시작해 보겠습니다.
2015512164305697.png (170×168)

3D 큐브

큐브를 만들기 위해 점 객체, 영역 객체, 큐브 자체의 세 가지 객체를 사용했습니다.

다음은 점 객체입니다. x, y, z는 점의 3차원 좌표입니다. _get2d 메서드는 3차원 좌표를 2차원 수준으로 변환합니다. fallLength는 초점 거리입니다.

XML/HTML 코드클립보드에 콘텐츠 복사

var 벡터 = 함수(x,y,z){
this.x = x
this.y = y;
this.z = z
this._get2d = 함수(){
scale = fallLength/(fallLength this.z); var
= centerX this.x*scale var
= centerY this.y*scale {x:x, y:y} 반환
그럼 타겟층은

얼굴 개체의 속성 페이지는 이해하기 쉽습니다. 얼굴은 정사각형이고, v1v2v3v4는 얼굴의 4개 꼭지점입니다. zIndex 속성은 얼굴의 수준을 나타내는 데 매우 중요합니다. 외부 또는 내부. 캔버스로 그릴 때 이 표면을 앞쪽에 그릴 수 있고 다른 표면에 덮이지 않도록 하려면 예여야 합니다. zIndex 값 역시 정점의 평균 z축 좌표로, 실제로는 중심점의 z축 좌표를 의미하므로 이해하기 쉽습니다. 색상은 이 표면의 색상입니다.
XML/HTML 코드클립보드에 콘텐츠 복사
1. var 얼굴 = 기능(벡터1,벡터2,벡터3,벡터4,색상){
2. this.v1 = Vector1;
3. this.v2 = Vector2;
4. this.v3 = Vector3;
5. this.v4 = Vector4;
6. this.color = color;
7. this.zIndex = (this.v1.z this.v2.z this.v3.z this.v4.z)/4;
8. this.draw = 함수(){
9. ctx.save();
10. ctx.beginPath();
11. ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);
12. ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);
13. ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);
14. ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);
15. ctx.closePath();
16. //ctx.fillStyle = "rgba("parseInt(Math.random()*255) "," 구문 분석기(Math.random()*255) "," 구문 분석기(Math.random()*255) ",0.2)";
17. ctx.fillStyle = this.color;
18. ctx.fill();
19. }
20. }
　　最后是立方体本身对象：

　　因为立方体最后要旋转, 所以, 立方体对象里路不仅要有点对象, 点旋转后才引起象象地旋길이는 길이에 따라 다릅니다. 이 방법은 다양한 모양의 모양을 만드는 방법, 将face放入数组, 然后对面进行排序（就是根据面里的zIndex排序), 排序, 好后调用每个면리적 그리기 방법입니다.体就出来了。
XML/HTML 코드复复内容到剪贴板
1. var 큐브 = 함수(길이){
2. this.length = 길이;
3. this.faces = [];
4. this.Vectors = [];
5. }
6. Cube.prototype = {
7. _initVector:function(){
8. this.Vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);
9. this.Vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);
10. this.Vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);
11. this.Vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);
12. this.Vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);
13. this.Vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);
14. this.Vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);
15. this.Vectors[7] = new Vector(-this.length/2 , this.length/2 , -this.length/2);
16. },
17. _draw:function(){
18. this.faces[0] = new Face(this.Vectors[0] , this.Vectors[1] , this.Vectors[3] , this.Vectors[2] , "#6c6");
19. this.faces[1] = new Face(this.Vectors[2] , this.Vectors[3] , this.Vectors[5] , this.Vectors[4] , "#6cc");
20. 이.faces[2]
21. 이.faces[3]
22. 이.faces[4]
23. this.faces[5] = new Face(this.Vectors[0] , this.Vectors[2] , this.Vectors[4] , this.Vectors[6] , "#ccc");
25. this.faces.sort(function(a , b){
26. 반환 b.zIndex - a.zIndex;
27. });
28. this.faces.foreach(function(){
29. this.draw();
30. })
31. }
32. }
　　立方体做好了, 接下来就可以让它动起来了.根据鼠标位置改变立方体转动적 이동속도. X 회전 및 Y 회전 방향就是让所有点绕X轴旋转以及绕Y轴旋转。这个的원본은 이전에 那个博文上好이미지가 있습니다.的旋转矩阵了。当然，如果有兴趣的还可以去搜一下绕任意轴旋转矩阵。。还没解决。好吧，扯远了。通过rotateX 와 회전Y는 방법으로 회전합니다.
XML/HTML 코드复复内容到剪贴板
1. if("addEventListener" in window){
2. window.addEventListener("mousemove" , function(event){
3. var x = event.clientX - canvas.offsetLeft - centerX;
4. var y = event.clientY - canvas.offsetTop - centerY;
5. angleY = x*0.0001;
6. angleX = y*0.0001;
7. });
8. }
9. 그렇지 않으면 {
10. window.attachEvent("onmousemove" , function(event){
11. var x = event.clientX - canvas.offsetLeft - centerX;
12. var y = event.clientY - canvas.offsetTop - centerY;
13. angleY = x*0.0001;
14. angleX = y*0.0001;
15. });
16. }
19. 기능 rotateX(벡터){
20. var cos = 수학.cos(angleX);
21. var sin = Math.sin(angleX);
22. Vectors.foreach(function(){
23. var y1 = this.y * cos - this.z * sin;
24. var z1 = this.z * cos this.y * sin;
25. this.y = y1;
26. this.z = z1;
27. });
28. }
30. 기능 rotateY(벡터){
31. var cos = 수학.cos(angleY);
32. var sin = Math.sin(angleY);
33. Vectors.foreach(function(){
34. var x1 = this.x * cos - this.z * sin;
35. var z1 = this.z * cos this.x * sin;
36. this.x = x1;
37. this.z = z1;
38. })
39. }
43. 큐브 = 새 큐브(80);
44. cube._initVector();
45. 함수 initAnimate(){
46. cube._draw();
48. 애니메이션();
49. }
51. 기능 애니메이션(){
52. ctx.clearRect(0,0,canvas.width,canvas.height)
54. rotateY(cube.Vectors);
55. rotateX(cube.Vectors);
56. cube._draw();
57. if("requestAnimationFrame" in window){
58. requestAnimationFrame(animate);
59. }
60. else if("webkitRequestAnimationFrame" in window){
61. webkitRequestAnimationFrame(animate);
62. }
63. else if("msRequestAnimationFrame" in window){
64. msRequestAnimationFrame(animate);
65. }
66. else if("mozRequestAnimationFrame" in window){
67. mozRequestAnimationFrame(animate);
68. }
69. 그 외 {
70. setTimeout(animate , 16);
71. }
72. }
모든 코드를 게시하지는 않습니다. DEMO의 콘솔을 통해 확인할 수 있습니다. 저는 다른 프레임워크나 이와 유사한 것을 참조하지 않았습니다. 그냥 복사하면 사용할 수 있습니다.

회전하는 큐브를 작성한 후 여러 개의 회전하는 큐브를 만들 수도 있습니다.

Poke DEMO: 얼굴: 3D 큐브 2 3D 큐브 라인 (얼굴 없는 게 더 멋진 것 같아요)

성명：

이전 기사：웃는 얼굴을 그리기 위해 HTML5에서 캔버스를 사용하는 방법에 대한 튜토리얼_html5 튜토리얼 팁다음 기사：웃는 얼굴을 그리기 위해 HTML5에서 캔버스를 사용하는 방법에 대한 튜토리얼_html5 튜토리얼 팁

HTML5를 사용하여 점, 선, 표면으로 구성된 3D 그래픽을 그리는 예_html5 튜토리얼 기술

관련 기사