DYUE.TOP - javascript
type: channel
link: https://www.dyue.top/index.php/tag/javascript
items: AudioContext 一些常用操作
items: vue3 eventBus订阅发布模式
items: 用谷歌浏览器更好地调试
items: Vue3基础入门
items: 【中秋快乐】如何用three.js实现我的太空遐想3D网页
items: 通过NodeJS生成JWT
items: web前端发展历程
items: Treejs系列--7相机
items: 【Echarts数据可视化】一个项目带你学会酷炫的数据可视化
items: Vue为何弃用经典的Ajax，选择新技术Axios？

AudioContext 一些常用操作
type: item
date: 2022-10-18T18:16:09+08:00
description: // 通过audio标签var sound, audio = new Audio();audio.addEventListener('canplay', function() { sound = context.createMediaElementSource(audio); sound.connect(context.destination);});audio.src = '/audio.mp3'; var v =document.getElementsByTagName('video')[0];var aCtx = new (window.AudioContext || window.webkitAudioContext)();var source = aCtx.createMediaElementSource(v); // 创建声音源处理器// var sourceNode = aCtx.createBufferSource();// 创建声音终点处理器// var destinationNode = aCtx.destination; // 创建声道分离处理器 此处的2是声道数 可以从a中获取var splitterNode = aCtx.createChannelSplitter(2); // 源连接声道分离处理器source.connect(splitterNode); // 创建左右声道频谱分析器var leftAnalyserNode = aCtx.createAnalyser();var rightAnalyserNode = aCtx.createAnalyser(); splitterNode.connect(leftAnalyserNode, 0)splitterNode.connect(rightAnalyserNode, 1) // 合并声道var mergerNode = aCtx.createChannelMerger(2);leftAnalyserNode.connect(mergerNode, 0, 0)rightAnalyserNode.connect(mergerNode, 0, 1)mergerNode.connect(aCtx.destination) // 获取左右声道频谱数据var leftBuff = new Uint8Array(leftAnalyserNode.frequencyBinCount);leftAnalyserNode.getByteTimeDomainData(leftBuff) var rightBuff = new Uint8Array(rightAnalyserNode.frequencyBinCount);rightAnalyserNode.getByteTimeDomainData(rightBuff) // 字节值的范围介于0-255之间，是的，映射到-1到+1，因此128为零。 （它不是伏特，而是全范围无单位值。） var rightBuff = new Float32Array(rightAnalyserNode.frequencyBinCount);rightAnalyserNode.getFloatFrequencyData(rightBuff) // 单位dB // 修改声音大小// 创建音量节点 var gainNode = aCtx.createGain();source.connect(gainNode);gainNode.connect(aCtx.destination);gainNode.gain.value=0.1 // 获取音量scriptProcessor = aCtx.createScriptProcessor(4096,2,2);source.connect(scriptProcessor);scriptProcessor.connect(aCtx.destination);// 开始处理音频scriptProcessor.onaudioprocess = (e) => { // 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组 const lBuffer = e.inputBuffer.getChannelData(0); const rBuffer = e.inputBuffer.getChannelData(1); // 获取缓冲区中最大的音量值 const lMaxVal = Math.max(...lBuffer); const rMaxVal = Math.max(...rBuffer); // 左右显示音量值 const lVol = Math.round(lMaxVal 100); co…

vue3 eventBus订阅发布模式
type: item
date: 2022-09-09T11:57:52+08:00
description: Ⅰ. 什么是eventBus？通俗的讲，就是在任意一个组件，想把消息（参数） -> 传递到任意一个组件 ，并执行一定逻辑。Ⅱ. vue3 如何使用 eventBusvue3中没有了，eventBus，所以我们要自己写，但是非常简单。步骤一 （eventBus 容器）在src目录，创建个bus文件夹，存放 自己写的 bus.js ；编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；// bus.jsclass Bus {constructor() { this.list = {}; // 收集订阅 } // 订阅 $on(name, fn) { this.list[name] = this.list[name] || []; this.list[name].push(fn); } // 发布 $emit(name, data) { if (this.list[name]) { this.list[name].forEach((fn) => { fn(data); }); } } // 取消订阅 $off(name) { if (this.list[name]) { delete this.list[name]; } }}export default new Bus;订阅者（on），讲函数放入 list 中 => 等待发布者（emit），传参去调用；由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。步骤二 （ 订阅者 ）在 comA.vue 中订阅；订阅只是 存放函数，并未执行，等发布后才会执行； {{ name }} --- {{ age }} 在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多。步骤三 （ 发布者 ）在 comB.vue 中发布；调用订阅 并传参； 发布 发布后，在订阅者的组件就会执行，注意对应的 订阅和发布的name 要相同。

用谷歌浏览器更好地调试
type: item
date: 2022-09-01T23:22:41+08:00
description: 你的 JavaScript 是否曾经无法正确执行，并且你很难找出原因？你的 CSS 是否曾经表现得很奇怪，并且你很难找出原因或让它按预期显示？调试是编程的基本组成部分，也是所有软件开发人员的基本技能。当你构建网站和应用程序时，你很快就会意识到调试会占用大量时间。因此，学习任何可以帮助你更有效地对 Web 应用程序进行故障排除的工具的基础知识和高级功能将使你成为更好的调试器。要成为更好的调试器，你必须熟悉使调试更容易的正确工具。本文重点介绍使用 Chrome DevTools 更轻松地对 Web 应用程序进行故障排除的一些最佳做法、关键功能和提示。什么是谷歌浏览器开发工具？谷歌浏览器可能是开发人员中使用最广泛和最受欢迎的网络浏览器，因为它与众不同。它已逐渐成为大多数开发人员测试和调试其网站和 Web 应用程序的首选 Web 浏览器。Google Chrome 为开发人员提供了使用浏览器中的内置开发人员工具（又名 DevTools）调试大多数 Web 应用程序的能力，而无需第三方调试工具。Google Chrome 的开发人员工具中有多种功能和工具可供开发人员直接在浏览器中编辑代码、测试和添加断点以检测问题，并更有效地调试代码。DevTools 面板的快速视图要访问 DevTools，请按 Control + Shift + C（在 Windows 或 Linux 上）和 Command + Option + C（在 Mac 上）。此外，你可以右键单击网页的任何部分，选择“检查元素”，或通过选项菜单访问它。 Google 的 Chrome DevTools 窗口在迷你窗口中打开时会在顶部显示一些快速选项卡，以及一些额外的隐藏选项卡，可通过单击它们旁边的 >> 符号或切换到全屏视图来访问这些选项卡。每个小组的职责的简要总结：Elements：在这里可以检查和编辑 DOM 节点和样式属性。Console：可以通过控制台查看和运行 JavaScript 代码。Sources：源代码可在此处获得。你可以调试 JavaScript 代码并添加断点等。Network：调试网络相关的活动。你可以查看和监控网络。Performance：分析速度并优化性能。Memory：通过跟踪内存使用情况来修复与内存相关的问题。Application：可以查看sessionStorage、localStorage、IndexDB、cookies，以及其他应用相关的数据文件。Security：调试证书问题和其他安全问题。Lighthouse：让你审核应用程序的性能、可访问性、SEO 等。monitor(function) - 监控一个函数Chrome 中提供了一些控制台实用程序 API，它们为常见的调试任务提供了方便的功能。顾名思义，monitor() 函数是此类控制台函数之一，用于监视特定函数以了解何时调用该函数以及在调用该函数时将哪些参数传递给该函数。目标函数必须作为参数传递给 monitor() 函数，以便它观察任何调用的指定函数。一旦被调用，就会立即将一条消息记录到控制台，其中包含函数名称及其参数，表明该函数已被调用。 使用该unmonitor()功能将取消对该功能的监控。monitorEvents() - 监控 DOM 对象事件此函数用于监视 DOM 中的对象是否有特定事件或事件。当在指定对象上触发此事件时，该函数立即将事件和对象输出到控制台。当指定对象上发生任何指定事件时，Event 对象将被记录到控制台。要监视的事件可以是特定事件、事件数组或映射到预定义集合的通用事件“类型”。此函数接收应监控的对象和特定事件，即monitorEvents(object [, events]). 例如，要监视窗口对象的任何调整大小事件：monitorEvents(window, "resize"); 输出： 你可以选择性地停止监视对象 ie 上的特定事件unmonitorEvents(object[, events])，或对象 ie 上的所有事件unmonitorEvents(window)。要了解有关此功能的更多信息，请访问文档。table() - 将数组输出为表从数据库或外部 API 获取数据时，它通常以对象数组的形式出现。想象一下，你正试图在你的 chrome 控制台中预览或读取此返回的数据，以找出在你的应用程序中不起作用的内容。该console.log()函数通常将其显示为难以阅读或分类的文本输出。你显然希望以更易于阅读的有条理的方式查看所有项目、属性及其相关属性。你可以在 chrome 控制台中使用table()函数即 table(data) 来完成此操作。这种方法以更人性化、更易于阅读和理解的表格格式打印和组织信息。例如：const users = [ {…

Vue3基础入门
type: item
date: 2022-09-01T18:46:19+08:00
description: Vue3基础选项式 API组件的初始化还是和Vue2那样 当前鼠标位置 x: {{ mouse.x }} y: {{ mouse.y }} 当前点击次数：{{ count }} 点击 组合式APIeg： 当前鼠标位置 x: {{ mouse.x }} y: {{ mouse.y }} 当前点击次数：{{ count }} 点击 代码抽离—hooks 钩子函数import { ref, reactive, onMounted, onUnmounted } from 'vue' // 抽离---hooks 钩子函数 // 业务 A const useCount = () => { const count = ref(0) const add = () => { count.value++ } onMounted(() => { // ❗✅多个生命周期，不会被合并 console.log('业务 A 生命周期') }) return { count, add } } // 业务 B const useMouseMove = () => { const mouse = reactive({ x: 100, y: 100 }) const mouseMove = e => { mouse.x = e.clientX mouse.y = e.clientY } onMounted(() => { document.addEventListener('mousemove', mouseMove) }) onUnmounted(() => { document.removeEventListener('mousemove', mouseMove) }) return { mouse } } export default { setup() { const { count, add } = useCount() const { mouse } = useMouseMove() return { count, add, mouse } } } Vue3生命周期图示 ❗✅多个生命周期，不会被合并setup 函数❗setup 函数是 Vue3 特有的选项，作为组合式API的起点，注意以下三点：从组件生命周期看，它在 beforeCreate 之前执行函数中 this 不是组件实例，是 undefined✨如果数据或者函数在模板中使用，需要在 setup 返回经验：今后在vue3的项目中几乎用不到 thisreactive 函数只能用于复杂类型数据，数组类型也不建议用1. 导入 reactive 函数import { reactive } from 'vue' 2. 通过 reactive 函数包装成响应式对象const obj = reactive({ name:'zs', age:18 }) const btn = () => { obj.age++ } 3. 返回给模板使用return { obj,btn } 组合式API-ref函数ref 函数，可以把任意类型数据转换成响应式。从 vue 中导入 ref 函数在 setup 函数中，使用 ref 函数包装成响应式数据(不分类型)最后 setup 函数返回一个对象，包含该响应式数据即可❗使用 ref 的两个注意点： computed 函数导入 computed 函数 import {computed} from 'vue'调用 computed 函数并传入一个回调函数 const computedRes = computed(() => { return xx})函数内部记得 return 返回结果const nextAge = computed(() => { return age.value + 1})computed 函数的另一个写法const nextAge2 = computed({ get() { return age.value + 2 }, set(value) { age.value = value - 2 } }) watch 函数watch 参数被监听的数据回调函数配置项(可选)基本写法基础类型import { ref,watch } from 'vue' const money = ref(1400) watch(money,() => { console.log('钱变化了', money.value) }) 复杂类型const arr = JSON.parse(localStorage.getItem('todoVue3')) || [ { id: 1, content: 'eat', done: true }, { id: 2, content: 'play', do…

【中秋快乐】如何用three.js实现我的太空遐想3D网页
type: item
date: 2022-08-28T16:21:06+08:00
description: 目录创作背景功能分解创建3d地球创建3d月球 创建3d小火箭设计地球自转轨迹和月球、小火箭旋转的行星轨道1.地球的自转轨迹2.月球的公转轨迹3.小火箭的公转轨迹最终效果展现 彩蛋*创作背景 马上又是一年中秋佳节到来之际，中秋佳节自古以来就是团圆，思乡的节日，佳节当晚一边赏着月色，一边品尝着美味的月饼，和亲人好友诉说着想念之情 ，悠闲惬意之情油然而生。 古人有诗云：”明月几时有，把酒问青天，不知天上宫阙，今夕是何年？“ 这是古人对月亮和太空的理解，那么当现代的我们抬头望向星空，望向月亮的时候，你的太空遐想是什么呢？正好博主最近也在研究3维方面技术栈，来吧，这篇文章会从0和你一起用three.js 来实现：你心目中的地球和月球，并且在漫天的繁星中画出行星运转轨迹，并保留有一个小彩蛋哦*功能分解3d地球3d月球3d小火箭地球自转轨迹 和 月球、小火箭旋转的行星轨道彩蛋*创建3d地球如何实现一个3d地球呢第一步：我们首先需要创造一个三维的空间场景 /* * 实例化场景 */ scene = new THREE.Scene(); three.js封装好了三维场景实例化的方法，通过new THREE.Scene()，我们就可以创建了一个三维场景第二步：我们向三维场景里面加一个摄像机，方便我们查看三维场景中的内容 /** * 场景添加相机 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); //透视相机 camera.position.z = 15; scene.add( camera ) 相机概念示意图第三步：创建我们的地球啦，先使用new THREE.SphereGeometry(EARTH_RADIUS, 32, 32)创建一个球体，再给咱们的球体贴上地球地图的材质，这里博主已经收集了，一并放在工程目录上，阅读完本文后，可以下载使用，最后再使用new THREE.Mesh(earthGeometry, earthMaterial1)方法，这样一个地球就创建成功啦材质图： /** * 场景中添加地球 */ const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 32, 32); //球体创建方法 const earthMaterial1 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('./asset/img/textures/planets/earth_atmos_2048.jpg'), // 添加纹理 shininess: 5, }) earth = new THREE.Mesh(earthGeometry, earthMaterial1) //网格模型对象Mesh earth.position.set(0, 0, 0) earth.castShadow = true; // 光源有阴影 earth.receiveShadow = true scene.add(earth); //创建地球 第四步：执行threejs的渲染函数requestAnimationFrame() 这个频率为每秒60帧，让我们的场景实时动起来创建3d月球创建3d月球的方法步骤和3d地球类似，这里就不重复概述啦，将成功创建后的3d月球场景p给大家看一下 创建3d小火箭因为3d火箭的模型结构较为复杂，这里我们直接使用three.js官方提供的模型文件来导入场景，方法如下： /** * 场景中添加飞船 （飞船造型太复杂，代码是画不出来滴 直接导入模型） * */ const loader = new LWOLoader(); loader.load('asset/model/lwo/Objects/LWO3/Demo.lwo', function(object) { rocket = object.meshes[2]; //这个模型有三部分 火箭是第三个 rocket.position.set(0, 0, 0); rocket.scale.set(0.5, 0.5, 0.5); // rocket.rotateZ(MathUtils.degToRad(-90)) scene.add(rocket); }); 这三个场景，博主已经分布写成三个demo，大家后续clone下来自行查看设计地球自转轨迹和月球、小火箭旋转的行星轨道刚刚我们都已经实现了模型的创建和加载，这里我们把…

通过NodeJS生成JWT
type: item
date: 2022-07-14T11:08:10+08:00
description: 前言JWT(全称：Json Web Token)是一个开放标准(RFC 7519)，它定义了一种紧凑的、自包含的方式，用于作为JSON对象在各方之间安全地传输信息。该信息可以被验证和信任，因为它是数字签名的。简单业务流程JWT组成Jwt由 Header.Payload.Signature 三部分数据拼接组成eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3d3dy5leGFtcGxlcy5jb20iLCJpYXQiOjE2NTM0ODI5NjAsImV4cCI6MTY1NDA4Nzc2MCwibmJmIjoxNjUzNDgyOTYwLCJqdGkiOiIyMjdjYTFmZi03ZGE1LTQzMGUtOTFjMy05ZTQxMDdjNWQ0YTgiLCJzdWIiOjF9.6LXlvsswMsKJpHD3ChsSGOzEJnYwm6eF212JE7Uc4p4 Header示例描述JWT元数据的Json对象,一般情况如下{ typ: "JWT", alg: "HS256", } 解码header// header数据为上面示例的第一部分 const header = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"; console.log(Buffer.from(header, "base64").toString("utf8")); // 输出：{"alg":"HS256","typ":"JWT"} Payload示例描述JWT元数据的Json对象,一般情况如下{ // 发行方 iss: "https://www.examples.com", // 签发日期 iat: 1653482960, // 到期日期 exp: 1654087760, // 不可用日期（在此之前） nbf: 1653482960, // JWT ID用于标识该JWT jti: "227ca1ff-7da5-430e-91c3-9e4107c5d4a8", // subject的缩写不知道该如何翻译，不过一般存储的都是 用户ID sub: 1 } 解码Payload因为payload仅为base64加密，很容易解码。所以不要在Payload中存储敏感信息。// payload数据为上面示例的第一部分 const payload="eyJpc3MiOiJodHRwczovL3d3dy5leGFtcGxlcy5jb20iLCJpYXQiOjE2NTM0ODI5NjAsImV4cCI6MTY1NDA4Nzc2MCwibmJmIjoxNjUzNDgyOTYwLCJqdGkiOiIyMjdjYTFmZi03ZGE1LTQzMGUtOTFjMy05ZTQxMDdjNWQ0YTgiLCJzdWIiOjF9"; console.log(Buffer.from(payload, "base64").toString("utf8")); // 输出：{"iss":"https://www.examples.com","iat":1653482960,"exp":1654087760,"nbf":1653482960,"jti":"227ca1ff-7da5-430e-91c3-9e4107c5d4a8","sub":1} Signature因为本文模拟数据中 Header 中的 alg 为 Hs256 所以，加密使用 HMAC-SHA256 作为签名算法// 秘钥 此秘钥不要泄漏。一般存放在后端的配置文件汇总 const secret = "lbOAmnKu9xpvjEz7TDUFLf2RXMCw1NeGBo04ksgWQidJy3SVPcH85atZhYrI6qxx"; // header头，与前文设置一样，进行base64加密 const header = Buffer.from( JSON.stringify({ alg: "HS256", typ: "JWT", }), "base64" ).toString("utf8"); // 载荷，与前文设置一样，进行base64加密 const payload = Buffer.from( JSON.stringify({ iss: "https://www.examples.com", iat: 1653482960, exp: 1654087760, nbf: 1653482960, jti: "227ca1ff-7da5-430e-91c3-9e4107c5d4a8", sub: 1, }), "base64" ).toString("utf8");Ï // 构造 hmac const hmac = crypto.cre…

web前端发展历程
type: item
date: 2022-06-02T18:51:32+08:00
description: 总览前端发展史前言浏览器的发展史走进前端HTMLCSSjavaScript小前端时代大前端时代写在最后前言目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。那么首先让我们来了解一下浏览器的发展历程。浏览器的发展史在中享思途的行业资讯中看到了他对浏览器的发展史总结如下： 1、1991年，WorldWideWeb浏览器发布，这款可以说是祖父级别的，它是全球用户最早注册的WEB浏览器，WorldWideWeb开发始于20世纪80年代末，之后10年间经过MTV的宣传以及Commodore 64的完善，终于在1991年这个有跨时代意义的Web浏览器发布了。WorldWideWeb原理很简单，可以显示基本的样式表。2、1992年，Erwise发布，他被称为世界上第一个图形网页浏览器，它是由赫尔辛基科技大学的4个芬兰学生开发，主要是针对在Unix上运行 XWindows的需要。ViolaWWW，它是最高老的浏览器之一，在1992年5月份发布，它的开发者是美国加州大学的学生Pei-Yuan Wei，他的目的和Erwise一样是针对在Unix上运行 X Windows的需要。MidasWWW也是1992年发表的，它是由托尼约翰逊在斯坦福线型加速器中心研发的。Lynx首发也是在1992年，它提供了一个语音转换接口为视觉和听觉障碍的人群提供了很好的功能。3、1993年，Mosaic1.0发布，Mosaic可以说在一定程度上升华了Erwise的图形化，并且将图形化浏览器推向了万维网的主流。Arena浏览器是第一个支持背景图片，表格、文字绕流图片和内嵌数学表达式的浏览器，支持背景图片，表格等。4、1994年，Cello发布，他支持的就比较多了，WorldWideWeb、Gopher、FTP、CSO/ph/qi、Usenet News retrieval以及其他的一些协议，他当时成为了Windows平台上第一款浏览器。IBM WebExplorer也在同年发布，IBM推出自己的操作系统，WebExplorer也是强行捆绑在了他的系统系统上。Netscape Navigator它是一款独立的浏览器，而其在当时他的市场份额远远超过了微软的Internet Explorer。5、1995年，IE发布，浏览器之战也就此爆发。微软的Internet Explorer在此年首次推出，为了打造最好的浏览器，微软的源代码从Mosaic上获益匪浅，学习并迅速开始调整自己的浏览器，IE早期并没有捆绑在Window95上，而是作为Window95插件包的一部分进行捆绑，当时他只有1M大小。IE2在同年晚些时间发布，微软当时声称这是一个跨平台的浏览器，支持Window和Mac，IE2也加入了支持JavaScript的潮流中，它支持安全套接字层（SSL），Cookie和包括英语在内的12种语言。IE3正式捆绑在了Windows 95OSR2中，它是第一个支持CSS的主流浏览器，IE3摆脱了Spyglass源代码的局限，开始支持ActiveX控件，Java小程序，和Internet邮件。6、1996年，Opera发布，Telenor是挪威最大的通讯公司，他们推出了Opera，并在两年后进军移动市场，推出了Opera的移动版。7、1997年，IE4伴随着Windows 98操作系统一起发布。在发布Window Xp之前发布了IE6，并且新系统中包括了浏览器的最新升级补丁。随后IE逐渐占据了市场绝大部分份额。其他浏览器败下阵来。8、1998年，Netscape浏览器走向开源，和IE之争最后以失败告终。9、2003年，苹果Safari浏览器发布，苹果进入浏览器市场推出了自己的Webkit引擎，该引擎非常优秀，后来被Google，Nokia之类的厂商用于手机浏览器。10、2004年，Firefox引发了第二场浏览器之争。11、2006年，IE7发布，IE6发布的第六年，迫于Firefox的压力，微软匆匆推出IE7应战，吸取了Firefox的一些设计思想。12、2008年，Google的Chrome参战，Google发布了他们自己的浏览器，以轻量级，快，异常的稳固让这款浏览器成为了一个不可轻视的对手。 以上就是浏览器的一个大致发展历程了。接下来看看HTML的一个发展史。走进前端首先前端是什么呢？这个好像大家没有对他一个最完美的诠释，记得在上家公司，有一天与我们公司老板做了同一趟电梯，老板问道你是做什么的，我回答在咱们公司做前端开发，能不能跟我说一下什么是前端开发？老板随和的问道，毫无准备的我脑海中飘出…

Treejs系列--7相机
type: item
date: 2022-04-29T20:45:01+08:00
description: Treejs系列--7相机序言正交相机透视相机立体相机立方相机序言摄像机在3D演示中扮演着重要的角色，Treejs提供了Camera对象及其子对象，可以非常方便的应用。正交相机使用正交投影来进行投影，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。渲染2D场景或者UI元素非常有用。OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number ) left: 摄像机视锥体左侧面。 right: 摄像机视锥体右侧面。 top: 摄像机视锥体上侧面。 bottom: 摄像机视锥体下侧面。 near: 摄像机视锥体近端面。 far: 摄像机视锥体远端面。 改变物体距离相机距离，物体大小始终如下 var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 1000 ); camera.position.z = 1; //改变相机距离物体位置，物体保持不变 //camera.position.z = 999; 透视相机这一摄像机使用透视投影来进行投影，用来模拟人眼所看到的景象，它是3D场景的渲染中使用最普遍的投影模式。PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov: 摄像机视锥体垂直视野角度 aspect: 摄像机视锥体长宽比 near: 摄像机视锥体近端面 far: 摄像机视锥体远端面 改变相机距离物理距离为466 改变相机距离物理距离为66 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //改变相机距离物体位置，犹如人眼平常看到的景象，远小近大。 camera.position.z = 466; //camera.position.z = 66; 立体相机双透视摄像机常被用于创建3D立体影像或者视差效果。StereoCamera(aspect : Float,eyeSep : Float,cameraL : PerspectiveCamera,cameraR : PerspectiveCamera) aspect: 摄像机视锥体的长宽比，默认值是1。例如设置为场景的宽高比。 eyeSep: 模拟人的瞳孔间距，默认值是0.064 cameraL: 左摄像机 cameraR: 右摄像机 立方相机创建6台相机，将它们的拍摄结果渲染。//构造器 CubeCamera( near : Number, far : Number, cubeResolution : Number ) near: 近剪切面的距离 far: 远剪切面的距离 cubeResolution: 设置立方体边缘的长度 //创建6台相机 var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 ); scene.add( cubeCamera ); //材质中设置环境贴图为相机拍摄 var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget.texture } ); var car = new Mesh( carGeometry, chromeMaterial ); scene.add( car ); // 更新相机 car.setVisible( false ); cubeCamera.position.copy( car.position ); cubeCamera.update( renderer, scene ); //渲染场景 car.setVisible( true ); renderer.render( scene, camera );

【Echarts数据可视化】一个项目带你学会酷炫的数据可视化
type: item
date: 2022-04-21T17:38:50+08:00
description: 文章の目录1.学会使用echarts库里的各种矢量图形表 2. 学会通过修改库中矢量图形的参数去定制自己需要的矢量图表 3. 学会边框图形的用法 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。 ​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …最终效果展示： 完成该项目需要具备以下知识：div + css 布局flex 布局css3动画css3渐变css3边框图片原生js + jquery 使用rem适配echarts基础粗略代码统计：css 580行html 450行js 400行 (有效) ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。通俗讲：是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图、柱状图、散点图、饼图、K线图官方教程链接下载echarts引入echarts dist/echarts.min.js准备一个具备大小的DOM容器代码示例： 初始化echarts实例对象var myChart = echarts.init(document.getElementById('main')); 指定配置项和数据(option)var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; 将配置项设置给echarts实例对象myChart.setOption(option); 以下配置很重要，小伙伴们一定要牢记哦！：series xAxis yAxis grid tooltip title legend colorseries系列列表。每个系列通过 type 决定自己的图表类型：图标数据，指定什么类型的图标，可以多个图表重叠。xAxis：直角坐标系 grid 中的 x 轴boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。yAxis：直角坐标系 grid 中的 y 轴grid：直角坐标系内绘图网格。title：标题组件tooltip：提示框组件legend：图例组件color：调色盘颜色列表数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。代码实例：var option = { color: ['pink', 'blue', 'green', 'skyblue', 'red'], title: { text: '我的折线图' }, tooltip: { trigger: 'axis' }, legend: { data: ['直播营销', '联盟广告', '视频广告', '直接访问'] }, grid: { left: '3%', right: '3%', bottom: '3%', // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签 // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签 containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 boundaryGap: false, data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '直播营销', // 图表类型是线形图 type: 'line', data: [120, 132, 101, 134, 90, 23…

Vue为何弃用经典的Ajax，选择新技术Axios？
type: item
date: 2022-02-10T13:35:16+08:00
description: 目录一、选择什么网络模块?二、axios功能特点三、axios支持多种请求方式四、发送并发请求五、全局配置六、创建axios实例七、常见的配置选项八、axios的封装九、封装一个request函数1、传入回调函数2、传入一个参数进行回调3、Promise用法4、简化Promise十、axios中的拦截器```为什么80%的码农做不了架构师？>>>```[Java专栏目录 | 点击这里](https://blog.csdn.net/guorui_java/article/details/120098618)一、选择什么网络模块?发送网络请求的方式有很多，下面来简单介绍一下：1、传统的Ajax是基于XMLHttpRequest（XHR）2、jQuery - Ajax为什么不适用jQuery的Ajax？在vue开发中不需要使用jQuery，因为jQuery很重量级。3、vue官方在Vue1.x的时候，推出了Vue-resource。Vue-resource角jQuery轻便很多，但在vue2.x之后，尤雨溪对Vue-resource不维护了，简言之，就是弃用了。4、尤雨溪推荐使用axios。二、axios功能特点在浏览器中发送XMLHttpRequest请求在node.js中发送http请求支持Promise API支持拦截请求和响应转换请求和响应数据三、axios支持多种请求方式axios(config)axios.request(config)axios.get(url,[,config])axios.delete(url,[,config])axios.head(url,[,config])axios.post(url,[,data[, config]])axios.put(url,[,data[, config]])axios.patch(url,[,data[, config]])四、发送并发请求有的时候，会同时发送多个请求。使用axios.all，可以放入多个请求的数组。axios.all([])返回的是一个数组，使用axios.spread可以将数组[res1,res2]展开为res1和res2。import axios from 'axios' export default { name: 'app', created(){ axios.all([axios.get('http://127.0.0.1:8080/getUserList'), axios.get('http://127.0.0.1:8080/getUserPage',{ params: {pageNum: 1, pageSize: 10} }) ]).then(axios.spread((res1,res2) => { console.log(res1) console.log(res2) })) } } 五、全局配置import axios from 'axios' export default { name: 'app', created(){ // 提取全局配置 axios.defaults.baseURL = 'http://127.0.0.1:8080' axios.all([axios.get('/getUserList'), axios.get('/getUserPage',{ params: {pageNum: 1, pageSize: 10} }) ]).then(axios.spread((res1,res2) => { console.log(res1) console.log(res2) })) } } 六、创建axios实例const instance1 = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) instance1({ url: '/home/getUserList' }).then(res => { console.log(res); }) instance1({ url: '/home/getUserPage', params: { type: 'pop', page: 1 } }).then(res => { console.log(res); }) const instance2 = axios.create({ baseURL: 'http://127.0.0.1:8081', timeout: 10000, // headers: {} }) 七、常见的配置选项1、请求地址\url:'http://127.0.0.1:8080/getUserList'2、请求类型method:'get'3、请求路径baseURL:'htt…