3d云html原理,深入解析JS实现3D标签云的原理与方法

最新推荐文章于 2024-09-25 21:55:11 发布
最新推荐文章于 2024-09-25 21:55:11 发布
阅读量584 收藏 5
点赞数
文章标签： 3d云html原理

本文实例讲述了深入解析JS实现3D标签云的原理与方法。分享给大家供大家参考，具体如下：

最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。

具体怎么做呢，先说一下原理，3D标签云就是做一个球面，然后再球面上取均匀分布的点，把点坐标赋给标签，再根据抽象出来的Z轴大小来改变标签的字体大小，透明度，做出立体感觉，然后球体就做好了。关键代码就下面这几句：

function innit(){

for(var i=0;i

var a , b;

var k = -1+(2*(i+1)-1)/tagEle.length;

var a = Math.acos(k);

var b = a*Math.sqrt(tagEle.length*Math.PI);

// var a = Math.random()*2*Math.PI;

// var b = Math.random()*2*Math.PI;

var x = RADIUS * Math.sin(a) * Math.cos(b);

var y = RADIUS * Math.sin(a) * Math.sin(b);

var z = RADIUS * Math.cos(a);

var t = new tag(tagEle[i] , x , y , z);

tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";

tags.push(t);

t.move();

}

}

上面的代码是用于生成球面上的点的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则是点的总数。这个公式的是我在别人的代码里找到的，我也不懂原理。不过确实好用。

有了上面两个公式以后，我们就可以获得球面上所需要的平均分布的点。然后再对每个标签进行操作：

var scale = fallLength/(fallLength-this.z);

var alpha = (this.z+RADIUS)/(2*RADIUS);

this.ele.style.fontSize = 15 * scale + "px";

this.ele.style.opacity = alpha+0.5;

this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";

this.ele.style.zIndex = parseInt(scale*100);

this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";

this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";

fallLength是焦距，也就是一个常量，scale和alpha都是要根据z轴来调整的比例。后面的属性操作就比较简单了，调整一下字体大小，透明度，以及元素位置，球体就做出来了，效果如下(忽略字的内容，乱写的)：

69c1a8372f40c11b17fb436e543a4666.png

球体做出来了，是时候让其动起来了。这时就引入第三个公式了，矩阵旋转算法:

6dc4c4e9b0f0b829f74f1330bad6bc12.png

还可以直接戳 计算机图形学3D变换；

然后，我们就可以写出两个函数，一个是绕X轴旋转，一个是绕Y轴旋转。

function rotateX(){

var cos = Math.cos(angleX);

var sin = Math.sin(angleX);

tags.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(){

var cos = Math.cos(angleY);

var sin = Math.sin(angleY);

tags.forEach(function(){

var x1 = this.x * cos - this.z * sin;

var z1 = this.z * cos + this.x * sin;

this.x = x1;

this.z = z1;

})

}

然后就可以通过控制angleX和angleY两个角度的值来控制标签云的旋转方向以及旋转速度，角度的正负值控制旋转方向，大小控制旋转速度。

接下来就可以用鼠标事件来控制了：

if("addEventListener" in window){

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

var x = event.clientX - EX - CX;

var y = event.clientY - EY - CY;

// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

angleY = x*0.0001;

angleX = y*0.0001;

});

}

else {

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

var x = event.clientX - EX - CX;

var y = event.clientY - EY - CY;

angleY = x*0.0001;

angleX = y*0.0001;

});

}

当这个也写好后，3D标签云就算完工了，完成效果就直接看DEMO吧：3D标签云；

下面贴出标签云的所有代码，其实都可以通过控制台看代码，不过还是贴一下吧：(本人技术不是很好，代码写的不好请见谅)

.tagBall{

width: 800px;

height: 800px;

margin:50px auto;

position: relative;

}

.tag{

display: block;

position: absolute;

left: 0px;

top: 0px;

color: #000;

text-decoration: none;

font-size: 15px;

font-family: "微软雅黑";

font-weight: bold;

}

.tag:hover{border:1px solid #666;}

3D标签

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

某某某

我喜欢你

我喜欢你

某某某

我喜欢你

var tagEle = "querySelectorAll" in document ? document.querySelectorAll(".tag") : getClass("tag"),

paper = "querySelectorAll" in document ? document.querySelector(".tagBall") : getClass("tagBall")[0];

RADIUS =300,

fallLength = 500,

tags=[],

angleX = Math.PI/500,

angleY = Math.PI/500,

CX = paper.offsetWidth/2,

CY = paper.offsetHeight/2,

EX = paper.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft,

EY = paper.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;

function getClass(className){

var ele = document.getElementsByTagName("*");

var classEle = [];

for(var i=0;i

var cn = ele[i].className;

if(cn === className){

classEle.push(ele[i]);

}

}

return classEle;

}

function innit(){

for(var i=0;i

var a , b;

var k = (2*(i+1)-1)/tagEle.length - 1;

var a = Math.acos(k);

var b = a*Math.sqrt(tagEle.length*Math.PI);

// var a = Math.random()*2*Math.PI;

// var b = Math.random()*2*Math.PI;

var x = RADIUS * Math.sin(a) * Math.cos(b);

var y = RADIUS * Math.sin(a) * Math.sin(b);

var z = RADIUS * Math.cos(a);

var t = new tag(tagEle[i] , x , y , z);

tagEle[i].style.color = "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";

tags.push(t);

t.move();

}

}

Array.prototype.forEach = function(callback){

for(var i=0;i

callback.call(this[i]);

}

}

function animate(){

setInterval(function(){

rotateX();

rotateY();

tags.forEach(function(){

this.move();

})

} , 17)

}

if("addEventListener" in window){

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

var x = event.clientX - EX - CX;

var y = event.clientY - EY - CY;

// angleY = -x* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

// angleX = -y* (Math.sqrt(Math.pow(x , 2) + Math.pow(y , 2)) > RADIUS/4 ? 0.0002 : 0.0001);

angleY = x*0.0001;

angleX = y*0.0001;

});

}

else {

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

var x = event.clientX - EX - CX;

var y = event.clientY - EY - CY;

angleY = x*0.0001;

angleX = y*0.0001;

});

}

function rotateX(){

var cos = Math.cos(angleX);

var sin = Math.sin(angleX);

tags.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(){

var cos = Math.cos(angleY);

var sin = Math.sin(angleY);

tags.forEach(function(){

var x1 = this.x * cos - this.z * sin;

var z1 = this.z * cos + this.x * sin;

this.x = x1;

this.z = z1;

})

}

var tag = function(ele , x , y , z){

this.ele = ele;

this.x = x;

this.y = y;

this.z = z;

}

tag.prototype = {

move:function(){

var scale = fallLength/(fallLength-this.z);

var alpha = (this.z+RADIUS)/(2*RADIUS);

this.ele.style.fontSize = 15 * scale + "px";

this.ele.style.opacity = alpha+0.5;

this.ele.style.filter = "alpha(opacity = "+(alpha+0.5)*100+")";

this.ele.style.zIndex = parseInt(scale*100);

this.ele.style.left = this.x + CX - this.ele.offsetWidth/2 +"px";

this.ele.style.top = this.y + CY - this.ele.offsetHeight/2 +"px";

}

}

innit();

animate();

或者直接看github源码：

希望本文所述对大家JavaScript程序设计有所帮助。

weixin_39781452
关注
HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
艾恩小灰灰的博客
05-26 624
实例：祝福版的3D标签云动画特效。技术栈：HTML+CSS+JS。
一款超酷的3D云标签JS特效
11-25
一款超酷的3D云标签JS特效一款超酷的3D云标签JS特效一款超酷的3D云标签JS特效一款超酷的3D云标签JS特效
tagcloud.js 实现3d 云标签
最新发布
m0_48847853的博客
09-25 358
我这个布局是准备在中间放一张图片，两边的便签在图片的左右两边区域动。中间图片自己放，每个标签鼠标放上去会放大并停止。
炫酷3D球形标签云
kongzhonghu的专栏
07-25 818
模拟将标签数据做成一个富勒烯球状的3D模型，然后鼠标放上去可以自己旋转起来，如果觉得还太单调可以自己设置好看的背景来填充，炫酷3D球形标签云。
JavaScript实现的动态圆形标签云效果
CgbAutoit的博客
09-26 263
标签云是一种常见的数据可视化方式，它以云朵形状展示一组标签，标签的大小和位置通常反映了它们的重要性或频率。接下来，我们遍历每个标签对象，计算标签的字体大小、设置字体样式和颜色，以及计算标签的随机位置。我们还引入了一个名为"tagCloud.js"的脚本文件，该文件将包含我们的JavaScript代码。每个标签对象都有一个"text"属性表示标签的文本内容，以及一个"weight"属性表示标签的权重。首先，我们需要创建一个HTML文件，并在其中添加一个Canvas元素，用于绘制标签云。
html 3D球状旋转标签云文字云效果
kongzhonghu的专栏
09-27 2879
html 3D球状旋转标签云文字云效果
深入解析JS实现3D标签云的原理与方法
10-16
本文将深入解析如何使用JS实现3D标签云，包括其基本原理、实现方法、以及实现过程中需要注意的技巧。 首先，我们来了解一下3D标签云的基本原理。3D标签云的实现原理与3D图形学中的球面贴图（Spherical Mapping）...
3D旋转相册（附源码）HTML+CSS+JS
02-04
《3D旋转相册——HTML+CSS+JS实现的视觉盛宴》 在数字时代，相册不再局限于纸质形式，而是发展出了各种富有创意的展示方式。"3D旋转相册"便是其中一种，通过HTML、CSS和JavaScript技术，将传统的静态照片转化为动态...
3d标签云
04-13
由于实际内容无法直接获取，这里将根据常见的3d标签云实现方法进行解析。 1. **HTML结构**：3d标签云的基础是HTML元素，通常使用`<div>`或`<span>`标签来创建每个标签。这些元素的文本内容即为标签的名称，而它们的...
Three.js+HTML5 3D拼魔方小游戏代码
06-11
本篇文章将详细解析基于Three.js和HTML5开发的一款3D拼魔方小游戏的代码结构和实现原理。 首先，我们要理解的是，Three.js是HTML5 Canvas API的扩展，它简化了WebGL编程，使得3D图形渲染变得更加直观和高效。在这款...
标签云，js实现
热门推荐
07-20 48万+
标签云，纯js代码实现！ 一、效果图      二、代码      #div_tag {position:relative; height:540px; border: 1px solid #0097d3;} #div_tag a { position:absolute;
js简单实现标签云效果实例
10-23
主要介绍了js简单实现标签云效果,基于miaov.js文件实现标签云的3D滚动效果,非常简单实用,需要的朋友可以参考下
tagcloud.js:用HTML5生成标签云的Javascript
04-29
tagcloud.js 使用HTML5生成标签云的Javascript。 这在蜥蜴（ ）项目中用作扩展来生成源代码的标签云。 （有关更多信息，请使用lizard -EWordCount命令。） 如何使用它 只有一个TagCloud类具有一个render方法。 基本上，您需要一个HTML5并传递画布的宽度，高度和2D上下文以创建TagCloud： function draw ( ) { var canvas = document . getElementById ( "canvas" ) ; if ( canvas . getContext ) { var ctx = canvas . getContext ( "2d" ) ; var tagCloud = new TagCloud ( canvas . width , canvas .
原生js标签云.zip
09-01
原生js生成标签云
js实现3d标签云tag动画效果js特效代码
ICode联盟
01-05 983
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时，当前标签静止，移出恢复滚动效果。tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 16, //基本字体大小, 单位px radius: 100, //滚动半径, 单位px mspeed: "normal", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "normal", //滚动初速度, 取值: slow, normal(默认), fast
原生js生成标签云
weixin_43005845的博客
09-03 659
/* * 3d标签云 * 功能：鼠标移入标签，当前标签静止放大 * 说明： * */ window.tagcloud = (function(win, doc) { // ns // 判断对象 function isObject (obj) { return Object.prototype.toString.call(obj) === '[object Object]'; } // 构造函数 function TagCloud (options.
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合
BLOG域名:programb.blog.csdn.net
07-13 800
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合。下面是一个简单的示例，它使用了纯CSS和HTML来创建一个基础的3D效果标签云。如果你想要一个更复杂的3D动画标签云，可能需要使用JavaScript库，如Three.js，或者使用WebGL来创建更高级的3D效果。这些库和API提供了更多的控制和选项来创建复杂的3D场景和动画。这个示例中的标签云在鼠标悬停时会进行360度的旋转。你可以根据需要调整CSS样式和动画效果，例如改变标签的大小、颜色、旋转角度等。
3D标签云效果的实现
wenzhi的博客
12-08 6895
TagCloudView是一个完全基于Android ViewGroup编写的控件，支持将一组View展示为一个3D标签云，并支持全方向滚动。 GitHub中的链接地址：https://github.com/misakuo/3dTagCloudAndroid
添加分类、标签云（球状）、彩色标签
浅陌繁星的博客
03-23 2277
Hexo 博客Next主题中添加分类、标签页面、以及添加Next 7.0+ TagCanvas 球形标签云和 Next8.10+主题添加彩色标签
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值