解析3D標簽雲，其實很簡單

本文轉載自查看原文 2014-01-02 10:25 13853 前端/ 3D標簽雲/ javascript

　　聲明：本文為原創文章，如需轉載，請注明來源WAxes，謝謝！

　　最近開始用canvas搞3D了，搞得也是簡單的東西，就是球體轉圈。做出來后，突然想起以前看過的3D標簽雲，在以前覺得真心狂拽酷炫叼啊，當時也確實不知道怎么在平面上模擬3D，所以也就沒去搞了。現在剛好用了canvas搞3D，也發現，好像3D標簽雲也差不多，然后就寫了一下。

　　具體怎么做呢，先說一下原理，3D標簽雲就是做一個球面，然后再球面上取均勻分布的點，把點坐標賦給標簽，再根據抽象出來的Z軸大小來改變標簽的字體大小，透明度，做出立體感覺，然后球體就做好了。關鍵代碼就下面這幾句：

 1 function innit(){
 2             for(var i=0;i<tagEle.length;i++){
 3                 var a , b;
 4                 var k = -1+(2*(i+1)-1)/tagEle.length;
 5                 var a = Math.acos(k);
 6                 var b = a*Math.sqrt(tagEle.length*Math.PI);
 7                 // var a = Math.random()*2*Math.PI;
 8                 // var b = Math.random()*2*Math.PI;
 9                 var x = RADIUS * Math.sin(a) * Math.cos(b);
10                 var y = RADIUS * Math.sin(a) * Math.sin(b); 
11                 var z = RADIUS * Math.cos(a);
12                 var t = new tag(tagEle[i] , x , y , z);
13                 tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
14                 tags.push(t);
15                 t.move();
16             }
17         }

上面的代碼是用於生成球面上的點的x,y,z軸的坐標。用到的就是簡單的球面方程：已知半徑r和球心，一般為了方便，我們都以坐標軸原點為球心，有下面三個方程

　x=r*sinθ*cosΦ y=r*sinθ*sinΦ z=r*cosθ;

也就是說，我們可以對θ和Φ取隨機數，來獲得圓上的隨機點坐標。但僅此還不夠，因為如果要做3D標簽雲，一個很重要點的就是平均分布。如果單純的取隨機坐標，會導致一些標簽重疊，相對來說就沒那么美觀了。所以我們引入第二個公式：

θ = arccos( ((2*num)-1)/all - 1);

Φ = θ*sqrt(all * π);

num是當前第幾個點，all則是點的總數。這個公式的是我在別人的代碼里找到的，我也不懂原理。不過確實好用。

有了上面兩個公式以后，我們就可以獲得球面上所需要的平均分布的點。然后再對每個標簽進行操作：

1 var scale = fallLength/(fallLength-this.z);
2 var alpha = (this.z+RADIUS)/(2*RADIUS);
3 this.ele.style.fontSize = 15 * scale + "px";
4 this.ele.style.opacity = alpha+0.5;
5 this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
6 this.ele.style.zIndex = parseInt(scale*100);
7 this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
8 this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";

fallLength是焦距，也就是一個常量，scale和alpha都是要根據z軸來調整的比例。后面的屬性操作就比較簡單了，調整一下字體大小，透明度，以及元素位置，球體就做出來了，效果如下（忽略字的內容，亂寫的）：

球體做出來了，是時候讓其動起來了。這時就引入第三個公式了，矩陣旋轉算法:

還可以直接戳計算機圖形學3D變換；

然后，我們就可以寫出兩個函數，一個是繞X軸旋轉，一個是繞Y軸旋轉。

 1 function rotateX(){
 2             var cos = Math.cos(angleX);
 3             var sin = Math.sin(angleX);
 4             tags.forEach(function(){
 5                 var y1 = this.y * cos - this.z * sin;
 6                 var z1 = this.z * cos + this.y * sin;
 7                 this.y = y1;
 8                 this.z = z1;
 9             })
10             
11         }
12 
13         function rotateY(){
14             var cos = Math.cos(angleY);
15             var sin = Math.sin(angleY);
16             tags.forEach(function(){
17                 var x1 = this.x * cos - this.z * sin;
18                 var z1 = this.z * cos + this.x * sin;
19                 this.x = x1;
20                 this.z = z1;
21             })
22         }

然后就可以通過控制angleX和angleY兩個角度的值來控制標簽雲的旋轉方向以及旋轉速度，角度的正負值控制旋轉方向，大小控制旋轉速度。

接下來就可以用鼠標事件來控制了：

 1 if("addEventListener" in window){
 2             paper.addEventListener("mousemove" , function(event){
 3                 var x = event.clientX - EX - CX;
 4                 var y = event.clientY - EY - CY;
 5                 // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
 6                 // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
 7                 angleY = x*0.0001;
 8                 angleX = y*0.0001;
 9             });
10         }
11         else {
12             paper.attachEvent("onmousemove" , function(event){
13                 var x = event.clientX - EX - CX;
14                 var y = event.clientY - EY - CY;
15                 angleY = x*0.0001;
16                 angleX = y*0.0001;
17             });
18         }

當這個也寫好后，3D標簽雲就算完工了，完成效果就直接看DEMO吧：3D標簽雲；

下面貼出標簽雲的所有代碼，其實都可以通過控制台看代碼，不過還是貼一下吧：（本人技術不是很好，代碼寫的不好請見諒）

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5     <style>
  6         .tagBall{
  7             width: 800px;
  8             height: 800px;
  9             margin:50px auto;
 10             position: relative;
 11         }
 12         .tag{
 13             display: block;
 14             position: absolute;
 15             left: 0px;
 16             top: 0px;
 17             color: #000;
 18             text-decoration: none;
 19             font-size: 15px;
 20             font-family: "微軟雅黑";
 21             font-weight: bold;
 22         }
 23         .tag:hover{border:1px solid #666;}
 24     </style>
 25     <title>3D標簽</title>
 26 </head>
 27 <body>
 28     <div class="tagBall">
 29         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 30         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 31         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 32         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 33         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 34         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 35         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 36         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 37         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 38         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 39         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 40         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 41         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 42         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 43         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 44         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 45         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 46         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 47         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 48         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 49         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 50         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 51         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 52         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 53         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 54         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 55         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 56         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 57         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 58         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 59         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 60         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 61         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 62         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 63         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 64         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 65         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 66         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 67         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 68         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 69         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 70         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 71         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 72         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 73         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">某某某</a>
 74         <a class="tag" target="_blank" href="http://2.axescanvas.sinaapp.com/LoveDemo/secondLove.html">我喜歡你</a>
 75     </div>
 76     <script>
 77         var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),
 78             paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];
 79             RADIUS =300,
 80             fallLength = 500,
 81             tags=[],
 82             angleX = Math.PI/500,
 83             angleY = Math.PI/500,
 84             CX = paper.offsetWidth/2,
 85             CY = paper.offsetHeight/2,
 86             EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,
 87             EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
 88 
 89         function getClass(className){
 90             var ele = document.getElementsByTagName("*");
 91             var classEle = [];
 92             for(var i=0;i<ele.length;i++){
 93                 var cn = ele[i].className;
 94                 if(cn === className){
 95                     classEle.push(ele[i]);
 96                 }
 97             }
 98             return classEle;
 99         }
100 
101         function innit(){
102             for(var i=0;i<tagEle.length;i++){
103                 var a , b;
104                 var k = (2*(i+1)-1)/tagEle.length - 1;
105                 var a = Math.acos(k);
106                 var b = a*Math.sqrt(tagEle.length*Math.PI);
107                 // var a = Math.random()*2*Math.PI;
108                 // var b = Math.random()*2*Math.PI;
109                 var x = RADIUS * Math.sin(a) * Math.cos(b);
110                 var y = RADIUS * Math.sin(a) * Math.sin(b); 
111                 var z = RADIUS * Math.cos(a);
112                 var t = new tag(tagEle[i] , x , y , z);
113                 tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
114                 tags.push(t);
115                 t.move();
116             }
117         }
118 
119         Array.prototype.forEach = function(callback){
120             for(var i=0;i<this.length;i++){
121                 callback.call(this[i]);
122             }
123         }
124 
125         function animate(){
126             setInterval(function(){
127                 rotateX();
128                 rotateY();
129                 tags.forEach(function(){
130                     this.move();
131                 })
132             } , 17)
133         }
134 
135         if("addEventListener" in window){
136             paper.addEventListener("mousemove" , function(event){
137                 var x = event.clientX - EX - CX;
138                 var y = event.clientY - EY - CY;
139                 // angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
140                 // angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);
141                 angleY = x*0.0001;
142                 angleX = y*0.0001;
143             });
144         }
145         else {
146             paper.attachEvent("onmousemove" , function(event){
147                 var x = event.clientX - EX - CX;
148                 var y = event.clientY - EY - CY;
149                 angleY = x*0.0001;
150                 angleX = y*0.0001;
151             });
152         }
153         
154         function rotateX(){
155             var cos = Math.cos(angleX);
156             var sin = Math.sin(angleX);
157             tags.forEach(function(){
158                 var y1 = this.y * cos - this.z * sin;
159                 var z1 = this.z * cos + this.y * sin;
160                 this.y = y1;
161                 this.z = z1;
162             })
163             
164         }
165 
166         function rotateY(){
167             var cos = Math.cos(angleY);
168             var sin = Math.sin(angleY);
169             tags.forEach(function(){
170                 var x1 = this.x * cos - this.z * sin;
171                 var z1 = this.z * cos + this.x * sin;
172                 this.x = x1;
173                 this.z = z1;
174             })
175         }
176 
177         var tag = function(ele , x , y , z){
178             this.ele = ele;
179             this.x = x;
180             this.y = y;
181             this.z = z;
182         }
183 
184         tag.prototype = {
185             move:function(){
186                 var scale = fallLength/(fallLength-this.z);
187                 var alpha = (this.z+RADIUS)/(2*RADIUS);
188                 this.ele.style.fontSize = 15 * scale + "px";
189                 this.ele.style.opacity = alpha+0.5;
190                 this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";
191                 this.ele.style.zIndex = parseInt(scale*100);
192                 this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";
193                 this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";
194             }
195         }
196         innit();
197         animate();
198     </script>
199 </body>
200 </html>

或者直接看github源碼：

https://github.com/whxaxes/canvas-test/blob/gh-pages/src/3D-demo/3Dtag.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue中實現3D標簽雲 Unity3D入門其實很簡單 css3實踐之摩天輪式圖片輪播+3D正方體+3D標簽雲（perspective、transform-style、perspective-origin） vue實現3D詞雲 3D點雲深度學習 3D點雲幾何擬合 3D點雲的深度學習 Android EXCEL 解析 xls 和 xlsx，方法其實很簡單 3D點雲完美匹配點雲3d檢測模型pointpillar