html 3D球状旋转标签云文字云效果

最新推荐文章于 2024-05-29 20:00:49 发布
最新推荐文章于 2024-05-29 20:00:49 发布
阅读量2.5k 收藏 24
点赞数
分类专栏： js java web 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongzhonghu/article/details/127075468
版权
js 同时被 2 个专栏收录
49 篇文章 4 订阅
订阅专栏
java web
23 篇文章 0 订阅
订阅专栏

想想一个球状的结构上面挂满了很多的标签，然后把我们要学习的内容或者是名字等3D的形式展现出来，还是非常炫酷的，这种形式的展示可能有一个名字叫做3D标签云，出于兴趣去找了一个这样的代码效果还是很可以的，给大家展示一把：

在线demo地址 

废话不多说，主要源代码如下：

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <style>
      html,body{
        background-color: #060b1b;
        /* background-color: #0a192f; */
      }
    </style>
 
 

</head>

<body id="bodyid">

 
  <!-- skills 3d-->
  <section style="height: 600px;width: 100%;" id="skills" class="py-5">
    <!-- <p class="h1 mytitle pb-3">skills</p> -->
    <div id='holder'></div>
  </section>


  <!-- needful scripts -->
  <!-- Bootstrap core JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Third party plugin JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

  <!-- cloud -->
  <script src='plugins/cloud/jquery.svg3dtagcloud.min.js'></script>
  <!-- main script file -->
  <script src="js/scripts.js"></script>

</body>

</html>

jquery.svg3dtagcloud.js

/*
Copyright (c) 2017 Niklas Knaack

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/

( function() {

    function SVG3DTagCloud( element, params ) {

        var settings = {

            entries: [],
            width: 480,
            height: 480,
            radius: '70%',
            radiusMin: 75,
            bgDraw: true,
            bgColor: '#000',
            opacityOver: 1.00,
            opacityOut: 0.05,
            opacitySpeed: 6,
            fov: 800,
            speed: 2,
            fontFamily: 'Arial, sans-serif',
            fontSize: '15',
            fontColor: '#fff',
            fontWeight: 'normal',//bold
            fontStyle: 'normal',//italic 
            fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            fontToUpperCase: false,
            tooltipFontFamily: 'Arial, sans-serif',
            tooltipFontSize: '15',
            tooltipFontColor: '#fff',
            tooltipFontWeight: 'normal',//bold
            tooltipFontStyle: 'normal',//italic 
            tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
            tooltipFontToUpperCase: false,
            tooltipTextAnchor: 'left',
            tooltipDiffX: 0,
            tooltipDiffY: 10

        };
            
        //---

        if ( params !== undefined )
            for ( var prop in params )
                if ( params.hasOwnProperty( prop ) && settings.hasOwnProperty( prop ) )
                    settings[ prop ] = params[ prop ];

        //---

        if ( !settings.entries.length )
            return false;

        //---

        var entryHolder = [];
        var tooltip;

        var radius;
        var diameter;

        var mouseReact = true;
        var mousePos = { x: 0, y: 0 };

        var center2D;
        var center3D = { x: 0, y: 0, z: 0 };

        var speed = { x: 0, y: 0 };

        var position = { sx: 0, cx: 0, sy: 0, cy: 0 };

        var MATHPI180 = Math.PI / 180;

        var svg;
        var svgNS = 'http://www.w3.org/2000/svg';

        var bg;

        //---

        function init() {

            svg = document.createElementNS( svgNS, 'svg' );
            svg.addEventListener( 'mousemove', mouseMoveHandler );

            element.appendChild( svg );

            if ( settings.bgDraw ) {
        
                bg = document.createElementNS( svgNS, 'rect' );
                bg.setAttribute( 'x', 0 );
                bg.setAttribute( 'y', 0 );
                bg.setAttribute( 'fill', settings.bgColor );

                svg.appendChild( bg );

            }

            //---
            
            addEntries();
            reInit();
            animloop();

            //---

            window.addEventListener( 'resize', resizeHandler );

        };

        function reInit() {

            var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

            var svgWidth = windowWidth;
            var svgHeight = windowHeight;

            if ( settings.width.toString().indexOf( '%' ) > 0 || settings.height.toString().indexOf( '%' ) > 0 ) {

                svgWidth = Math.round( element.offsetWidth / 100 * parseInt( settings.width ) );
                svgHeight = Math.round( svgWidth / 100 * parseInt( settings.height ) );

            } else {

                svgWidth = parseInt( settings.width );
                svgHeight = parseInt( settings.height );

            }

            if ( windowWidth <= svgWidth )
                svgWidth = windowWidth;

            if ( windowHeight <= svgHeight )
                svgHeight = windowHeight;

            //---

            center2D = { x: svgWidth / 2, y: svgHeight / 2 };

            speed.x = settings.speed / center2D.x;
            speed.y = settings.speed / center2D.y;

            if ( svgWidth >= svgHeight )
                diameter = svgHeight / 100 * parseInt( settings.radius );
            else
                diameter = svgWidth / 100 * parseInt( settings.radius );

            if ( diameter < 1 )
                diameter = 1;

            radius = diameter / 2;

            if ( radius < settings.radiusMin ) {

                radius = settings.radiusMin;
                diameter = radius * 2;

            }

            //---

            svg.setAttribute( 'width', svgWidth );
            svg.setAttribute( 'height', svgHeight );

            if ( settings.bgDraw ) {

                bg.setAttribute( 'width', svgWidth );
                bg.setAttribute( 'height', svgHeight );

            }

            //---

            setEntryPositions( radius );

        };

        //---

        function setEntryPositions( radius ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                setEntryPosition( entryHolder[ i ], radius );

            }

        };

        function setEntryPosition( entry, radius ) {

            var dx = entry.vectorPosition.x - center3D.x;
            var dy = entry.vectorPosition.y - center3D.y;
            var dz = entry.vectorPosition.z - center3D.z;

            var length = Math.sqrt( dx * dx + dy * dy + dz * dz );

            entry.vectorPosition.x /= length;
            entry.vectorPosition.y /= length;
            entry.vectorPosition.z /= length;

            entry.vectorPosition.x *= radius;
            entry.vectorPosition.y *= radius;
            entry.vectorPosition.z *= radius;

        };

        function addEntry( index, entryObj, x, y, z ) {
            
            var entry = {};

                if ( typeof entryObj.label != 'undefined' ) {

                    entry.element = document.createElementNS( svgNS, 'text' );
                    entry.element.setAttribute( 'x', 0 );
                    entry.element.setAttribute( 'y', 0 );
                    entry.element.setAttribute( 'fill', settings.fontColor );
                    entry.element.setAttribute( 'font-family', settings.fontFamily );
                    entry.element.setAttribute( 'font-size', settings.fontSize );
                    entry.element.setAttribute( 'font-weight', settings.fontWeight );
                    entry.element.setAttribute( 'font-style', settings.fontStyle );
                    entry.element.setAttribute( 'font-stretch', settings.fontStretch );
                    entry.element.setAttribute( 'text-anchor', 'middle' );
                    entry.element.textContent = settings.fontToUpperCase ? entryObj.label.toUpperCase() : entryObj.label;

                } else if ( typeof entryObj.image != 'undefined' ) {

                    entry.element = document.createElementNS( svgNS, 'image' );
                    entry.element.setAttribute( 'x', 0 );
                    entry.element.setAttribute( 'y', 0 );
                    entry.element.setAttribute( 'width', entryObj.width );
                    entry.element.setAttribute( 'height', entryObj.height );
                    entry.element.setAttribute( 'id', 'image_' + index );
                    entry.element.setAttributeNS( 'http://www.w3.org/1999/xlink','href', entryObj.image );

                    entry.diffX = entryObj.width / 2;
                    entry.diffY = entryObj.height / 2;
                    
                }

                entry.link = document.createElementNS( svgNS, 'a' );
                entry.link.setAttributeNS( 'http://www.w3.org/1999/xlink', 'xlink:href', entryObj.url );
                entry.link.setAttribute( 'target', entryObj.target );
                entry.link.addEventListener( 'mouseover', mouseOverHandler, true );
                entry.link.addEventListener( 'mouseout', mouseOutHandler, true );
                entry.link.appendChild( entry.element );

                if ( typeof entryObj.tooltip != 'undefined' ) {

                    entry.tooltip = true;
                    entry.tooltipLabel = settings.tooltipFontToUpperCase ? entryObj.tooltip.toUpperCase() : entryObj.tooltip;;

                } else {

                    entry.tooltip = false;

                }

                entry.index = index;
                entry.mouseOver = false;

                entry.vectorPosition = { x:x, y:y, z:z };
                entry.vector2D = { x:0, y:0 };

            svg.appendChild( entry.link );
                
            return entry;
        
        };

        function addEntries() {

            var tooltip = false;

            for ( var i = 1, l = settings.entries.length + 1; i < l; i++ ) {

                var phi = Math.acos( -1 + ( 2 * i ) / l );
                var theta = Math.sqrt( l * Math.PI ) * phi;

                var x = Math.cos( theta ) * Math.sin( phi );
                var y = Math.sin( theta ) * Math.sin( phi );
                var z = Math.cos( phi );

                var entry = addEntry( i - 1, settings.entries[ i - 1 ], x, y, z );
                
                entryHolder.push( entry );

                if ( typeof settings.entries[ i - 1 ].tooltip != 'undefined' ) {

                    tooltip = true;

                }
            
            }

            if ( tooltip ) {

                addTooltip();

            }
        
        };

        function addTooltip() {

            tooltip = document.createElementNS( svgNS, 'text' );
            tooltip.setAttribute( 'x', 0 );
            tooltip.setAttribute( 'y', 0 );
            tooltip.setAttribute( 'fill', settings.tooltipFontColor );
            tooltip.setAttribute( 'font-family', settings.tooltipFontFamily );
            tooltip.setAttribute( 'font-size', settings.tooltipFontSize );
            tooltip.setAttribute( 'font-weight', settings.tooltipFontWeight );
            tooltip.setAttribute( 'font-style', settings.tooltipFontStyle );
            tooltip.setAttribute( 'font-stretch', settings.tooltipFontStretch );
            tooltip.setAttribute( 'text-anchor', settings.tooltipTextAnchor );
            tooltip.textContent = '';

            svg.appendChild( tooltip );

        };

        function getEntryByElement( element ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                var entry = entryHolder[ i ];

                if ( entry.element.getAttribute( 'x' ) === element.getAttribute( 'x' ) && 
                     entry.element.getAttribute( 'y' ) === element.getAttribute( 'y' ) ) {

                    return entry;

                }

            }

            return;

        };

        function highlightEntry( entry ) {

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {

                var e = entryHolder[ i ];

                if ( e.index === entry.index ) {

                    e.mouseOver = true; 

                } else {

                    e.mouseOver = false; 

                }

            } 

        };

        //---

        function showTooltip( entry ) {

            if ( entry.tooltip ) {

                tooltip.setAttribute( 'x', entry.vector2D.x - settings.tooltipDiffX );
                tooltip.setAttribute( 'y', entry.vector2D.y - settings.tooltipDiffY );

                tooltip.textContent = settings.tooltipFontToUpperCase ? entry.tooltipLabel.toUpperCase() : entry.tooltipLabel;

                tooltip.setAttribute( 'opacity', 1.0 );

            }

        };

        function hideTooltip( entry ) {

            tooltip.setAttribute( 'opacity', 0.0 );

        };

        //---
            
        function render() {

            var fx = speed.x * mousePos.x - settings.speed;
            var fy = settings.speed - speed.y * mousePos.y;
            
            var angleX = fx * MATHPI180;
            var angleY = fy * MATHPI180;

            position.sx = Math.sin( angleX );
            position.cx = Math.cos( angleX );
            position.sy = Math.sin( angleY );
            position.cy = Math.cos( angleY );

            //---

            for ( var i = 0, l = entryHolder.length; i < l; i++ ) {
    
                var entry = entryHolder[ i ];

                //---

                if ( mouseReact ) {

                    var rx = entry.vectorPosition.x;
                    var rz = entry.vectorPosition.y * position.sy + entry.vectorPosition.z * position.cy;

                    entry.vectorPosition.x = rx * position.cx + rz * position.sx;
                    entry.vectorPosition.y = entry.vectorPosition.y * position.cy + entry.vectorPosition.z * -position.sy;
                    entry.vectorPosition.z = rx * -position.sx + rz * position.cx;

                }

                //---

                var scale = settings.fov / ( settings.fov + entry.vectorPosition.z );

                entry.vector2D.x = entry.vectorPosition.x * scale + center2D.x; 
                entry.vector2D.y = entry.vectorPosition.y * scale + center2D.y;
                
                //---

                if ( entry.diffX && entry.diffY ) {

                    entry.vector2D.x -= entry.diffX;
                    entry.vector2D.y -= entry.diffY;

                }

                //---

                entry.element.setAttribute( 'x', entry.vector2D.x );
                entry.element.setAttribute( 'y', entry.vector2D.y );

                //---

                var opacity;

                if ( mouseReact ) {

                    opacity = ( radius - entry.vectorPosition.z ) / diameter;

                    if ( opacity < settings.opacityOut ) {

                        opacity = settings.opacityOut;

                    }

                } else {

                    opacity = parseFloat( entry.element.getAttribute( 'opacity' ) );

                    if ( entry.mouseOver ) {

                        opacity += ( settings.opacityOver - opacity ) / settings.opacitySpeed;

                    } else {

                        opacity += ( settings.opacityOut - opacity ) / settings.opacitySpeed;

                    }

                }

                entry.element.setAttribute( 'opacity', opacity );
                
            }

            //---

            entryHolder = entryHolder.sort( function( a, b ) {

                return ( b.vectorPosition.z - a.vectorPosition.z );

            } );

        };

        //---

        window.requestAnimFrame = ( function() {

            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    function( callback ) {
                        window.setTimeout( callback, 1000 / 60 );
                    };

        } )();
            
        function animloop() {

            requestAnimFrame( animloop );

            render();

        };

        //---

        function mouseOverHandler( event ) {

            mouseReact = false;

            //---

            var entry = getEntryByElement( event.target );

            highlightEntry( entry );

            if ( entry.tooltip ) {

                showTooltip( entry );

            }

        };

        function mouseOutHandler( event ) {

            mouseReact = true;

            //---

            var entry = getEntryByElement( event.target );

            if ( entry.tooltip ) {

                hideTooltip( entry );

            }

        };

        //---

        function mouseMoveHandler( event ) {

            mousePos = getMousePos( svg, event );

        };

        function getMousePos( svg, event ) {

            var rect = svg.getBoundingClientRect();

            return { 

                x: event.clientX - rect.left, 
                y: event.clientY - rect.top 

            };

        };

        //---

        function resizeHandler( event ) {

            reInit();

        };
        
        //---

        init();
 
    };

    window.SVG3DTagCloud = SVG3DTagCloud;

} () );

if ( typeof jQuery !== 'undefined' ) {

    ( function( $ ) {

        $.fn.svg3DTagCloud = function( params ) {

            var args = arguments;

            return this.each( function() {

                if ( !$.data( this, 'plugin_SVG3DTagCloud' ) ) {

                    $.data( this, 'plugin_SVG3DTagCloud', new SVG3DTagCloud( this, params ) );

                } else {

                    var plugin = $.data( this, 'plugin_SVG3DTagCloud' );

                    if ( plugin[ params ] ) {

                        plugin[ params ].apply( this, Array.prototype.slice.call( args, 1 ) );

                    } else {

                        $.error( 'Method ' +  params + ' does not exist on jQuery.svg3DTagCloud' );

                    }

                }

            } );

        };
        
    } ( jQuery ) );

}

空中湖
关注
  • 0
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5+CSS3+JS小实例：祝福版的3D标签云动画特效
艾恩小灰灰的博客
05-26 517
实例：祝福版的3D标签云动画特效。技术栈：HTML+CSS+JS。
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合
BLOG域名:programb.blog.csdn.net
07-13 683
创建一个3D动画标签云（Tag Cloud）通常涉及到HTML、CSS和JavaScript的结合。下面是一个简单的示例，它使用了纯CSS和HTML来创建一个基础的3D效果标签云。如果你想要一个更复杂的3D动画标签云，可能需要使用JavaScript库，如Three.js，或者使用WebGL来创建更高级的3D效果。这些库和API提供了更多的控制和选项来创建复杂的3D场景和动画。这个示例中的标签云在鼠标悬停时会进行360度的旋转。你可以根据需要调整CSS样式和动画效果，例如改变标签的大小、颜色、旋转角度等。
html5 canvas文字标签云3D旋转动画特效
qq_095的博客
09-19 5509
tagcanvas.min.js下载 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &l...
3D旋转词云
qq_44844370的博客
04-14 1448
3D旋转词云（vue） <template> <div> <svg style="background-color: black" :width="width" :height="height"> <a class="fontA" v-for="(tag, index) in tags" :key="`tag-${index}`"> <text :id="tag.id" :x
三维地图SVG矢量图标立体标绘效果
最新发布
空间处理技术学习与研究
05-29 144
在三维地图上增加SVG矢量图标，实现立体图标标绘效果。4）矢量数据上图，可缩放编辑，可扩展性强。三维地图引擎：wwj。2）二维图标可扩展立体拉伸效果；3）数据转坐标，地图渲染显示。1）图标内部相对比例变形较小；1）SVG文件解析及提取。2）数据存到临时文件。3）中文汉字变形小；
炫酷3D球形标签云
kongzhonghu的专栏
07-25 754
模拟将标签数据做成一个富勒烯球状的3D模型，然后鼠标放上去可以自己旋转起来，如果觉得还太单调可以自己设置好看的背景来填充，炫酷3D球形标签云。
vue中实现3d词云效果（已封装组件）
博客简介
03-10 1031
【代码】vue中实现3d词云效果（已封装组件）
3D球形标签云效果
03-18
DBSphereTagCloud实现3D球形标签云效果。可以自动惯性滚动
js 3d标签云特效
12-01
js 3d标签云特效关键词文字球状标签云代码
最全字符云图，压缩包内附7种不同字符云图。包括echart词云，3D动态效果词云图等
09-02
最全字符云图，压缩包内附7种不同字符云图。包括echart词云，3D动态效果词云图等
超酷的3D云特效
06-19
超酷的3D云特效 超炫的 值得一学 web有关的
词云（标签云）demo
06-27
词云（标签云）demo 源码下载：http://down.alixixi.com 模板下载：http://mb.alixixi.com 电子书籍：http://book.alixixi.com 网页特效：http://js.alixixi.com 韩国酷站：http://cool.alixixi.com/ 技术论坛：http://bbs.alixixi.com
2D3D文字云合集
11-14
2D3D文字云，包含两个插件。兼容性ok。
HTML5 canvas 3D文字云动画
06-27
HTML5 canvas 3D文字云动画基于Modernizr2.6.2制作，3D球形旋转动画，文字云动画。
js3d标签云
11-21
存js实现的3d链接标签云，全代码可以直接运行
css3 3d 云标签
01-24
3d云标签效果。 css3 .增加初始化发散效果。 translate
html5文字云在线制作,用Tagxedo在线制作个性化词云
weixin_31104245的博客
06-05 563
原标题：用Tagxedo在线制作个性化词云词云，或者叫文字云，就是对网络文本中出现频率较高的“关键词”予以视觉上的突出，形成“关键词云层”或“关键词渲染”，从而过滤掉大量的文本信息，使浏览网页者只要一眼扫过文本就可以领略文本的主旨。沈浩老师曾在搜狐博客分享过一篇关于词云制作的文章，详细的描述了个性化词云制作的思路和工具。今天小兵也来学习一下如何用Tagxedo在线制作个性化词云。 在线制作词云工具...
html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
weixin_34297395的博客
06-03 185
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：JS canvas标签制作色相球var canvas,ctx,max,p,count;window.onload=function(){var a,b,r;canvas = document.getElementsByTagName('canvas')[0];ctx =...
html+word+clou,d3.js – 用d3.wordcloud重绘文字云
weixin_39793794的博客
06-29 384
这有点棘手.d3-wordcloud插件(更确切地说是底层的d3.layout.cloud插件)将修改单词的输入数据集以适应单词的大小.一点一点地说某些词会越来越大,而其他词会越来越小.为避免这种情况,您可以在每次使用原始数据集的深层副本创建新云时提供插件.这样原始数据集始终保持不变：这是一种用javascript深度复制json的方法：function deepCopy(oldValue) {v...
js 3d标签云
05-24
您可以使用Three.js和TagCloud.js来创建一个JavaScript 3D标签云。 1. 首先，您需要引入Three.js和TagCloud.js库： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three-tag-cloud@1.0.2/dist/three-tag-cloud.min.js"></script> ``` 2. 创建一个canvas元素： ```html <canvas id="canvas"></canvas> ``` 3. 使用JavaScript创建标签云： ```javascript // 获取canvas元素和窗口大小 const canvas = document.getElementById('canvas'); const width = window.innerWidth; const height = window.innerHeight; // 创建场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setSize(width, height); // 创建标签云 const tagCloud = new THREE.TagCloud(); tagCloud.update(['JavaScript', 'HTML', 'CSS', 'Three.js', 'TagCloud.js'], { font: 'Arial', size: 40, color: '#ffffff', backgroundColor: '#333333', }); // 将标签云添加到场景中 scene.add(tagCloud); // 设置相机位置 camera.position.z = 500; // 渲染循环 function animate() { requestAnimationFrame(animate); tagCloud.rotateY(0.002); renderer.render(scene, camera); } animate(); ``` 此代码将创建一个具有JavaScript、HTML、CSS、Three.js和TagCloud.js标签的标签云，并将其添加到场景中。然后，它将设置相机位置并启动渲染循环，以便在屏幕上呈现标签云。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值