vue2使用three.js实现一个旋转球体
vue页面中
<div ref="container"></div>data声明
scene: null, camera: null, renderer: null, controls: null, rotationType: 'sphere', rotationTimer: null,backgroundImageUrl: 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/screen-bg.png',sphereGroup: null,defautNum: 200,渲染方法
initThree() {this.clearScene();// 创建场景this.scene = new THREE.Scene();// 设置场景背景为透明this.scene.background = null;// 创建相机this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);this.camera.position.z = 10;// 创建渲染器this.renderer = new THREE.WebGLRenderer({ alpha: true });this.renderer.setSize(window.innerWidth, window.innerHeight);this.renderer.setClearColor(0x000000, 0); // 设置清除颜色为透明const canvas = this.renderer.domElement;canvas.style.zIndex = 1; // 设置画布的 z-indexthis.$refs.container.appendChild(canvas);// 创建控制器this.controls = new OrbitControls(this.camera, canvas);// 创建一个用于存放球体元素的组this.sphereGroup = new THREE.Group();this.scene.add(this.sphereGroup);},animate() {this.isAnimate = true;requestAnimationFrame(this.animate);if (this.rotationType === 'sphere') {if (this.sphereGroup) {this.sphereGroup.rotation.y += 0.01;}}this.controls.update();this.renderer.render(this.scene, this.camera);},createInitialSphere() {const radius = 5;if(this.signList.length > 0){if (this.signList.length >= this.defautNum) {// 超出200个截取组成this.peopleList = this.signList.slice(0, this.defautNum);} else {// 未超出200个随机截取组成for (let i = 0; i < this.defautNum; i++) {const randomIndex = Math.floor(Math.random() * this.signList.length);this.peopleList.push(this.signList[randomIndex]);}}}else{for (let i = 0; i < 200; i++) {this.peopleList.push({uid: null,nickname: '默认用户',avatar: 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/liveCardBj.png'});}}for (let i = 0; i < this.defautNum; i++) {const participant = this.peopleList[i];const loader = new THREE.TextureLoader();loader.load(participant.avatar, (texture) => {const material = new THREE.MeshBasicMaterial({ map: texture });const geometry = new THREE.PlaneGeometry(1, 1);const mesh = new THREE.Mesh(geometry, material);const group = new THREE.Group();group.add(mesh);participant.group = group;const phi = Math.acos(-1 + (2 * i) / this.defautNum);const theta = Math.sqrt(this.defautNum * Math.PI) * phi;const x = radius * Math.cos(theta) * Math.sin(phi);const y = radius * Math.sin(theta) * Math.sin(phi);const z = radius * Math.cos(phi);group.position.set(x, y, z);group.lookAt(0, 0, 0);this.sphereGroup.add(group);});}},渲染有一个问题 重新触发会导致球体运动加速；再这里要加个判断如果有触发动画的话；再次渲染不需要加载动画方法
that.initThree();if (!that.isAnimate){that.animate();}that.createInitialSphere();相关文章：
vue2使用three.js实现一个旋转球体
vue页面中 <div ref"container"></div>data声明 scene: null, camera: null, renderer: null, controls: null, rotationType: sphere, rotationTimer: null,backgroundImageUrl: https://mini-app-img-1251768088.cos.…...
社交平台推出IP关联机制：增强用户体验与网络安全的新举措
社交平台为我们提供与亲朋好友保持联系、分享生活点滴的便捷渠道，还成为了信息传播、观点交流的重要平台。然而，随着社交平台的普及，网络空间中的虚假信息、恶意行为等问题也日益凸显。为了应对这些挑战，许多社交平台相继推出IP关…...
sherpa-ncnn：音频处理跟不上采集速度 -- 语音转文本大模型
目录 1. 问题报错2. 解决方法 1. 问题报错 报错： An overrun occurred, which means the RTF of the current model on your board is larger than 1. You can use ./bin/sherpa-ncnn to verify that. Please select a smaller model whose RTF is less than 1 fo…...
【android bluetooth 协议分析 01】【HCI 层介绍 8】【ReadLocalVersionInformation命令介绍】
1. HCI_Read_Local_Version_Information 命令介绍 1. 功能（Description） HCI_Read_Local_Version_Information 命令用于读取本地 Bluetooth Controller 的版本信息，包括 HCI 和 LMP 层的版本，以及厂商 ID 和子版本号。 这类信息用…...
android13以太网静态ip不断断开连上问题
总纲 android13 rom 开发总纲说明 文章目录 1.前言2.log记录3.问题分析4.代码修改5.彩蛋1.前言 android13以太网静态ip不断断开连上，具体情况为保存静态以太网成功后，可以看到以太网链接成功的图标，但是几秒后会消失，出现断网，几秒后又出现，反复出现和消失。 2.log记录…...
)
UA 编译和建模入门教程(zhanzhi学习笔记)
一、使用SIOME免费工具建模 从西门子官网下载软件SIOS，需要注册登录，下载安装版就行。下载后直接安装就可以用了，如图： 安装完成后打开，开始建模，如图左上角有新建模型的按钮。 新建了新工程后，…...
系统架构设计-案例分析总结
系统架构设计-案例分析总结 2024年下半年系统架构设计师案例第1题 2022年下半年系统架构设计师案例第1题第2题 2021年下半年系统架构设计师案例第1题第2题 2024年下半年系统架构设计师案例 题：效用树可用性中ping/echo策略和心跳策略比较 第1题 阅读以下关于面向质…...
【QT】一个界面中嵌入其它界面（三）
在 Qt 中，通过 UI 设计 或 代码布局 实现界面 A 中同时显示界面 B 和 C，并精确指定它们的位置，可以通过以下两种方式实现。以下是详细步骤和完整代码： 方法 0：使用 Qt Designer 可视化布局 通过 Qt Designer 拖拽控件…...
实战教程：影刀RPA采集闲鱼商品并分享钉钉
1.实战目标 采集字段： 采集时间商品ID商品标题标价商品链接 采集的第一个品 可通过钉钉分享给好友 也可以通过钉钉群通知指令，发送到指定群 2.实战代码 2.1 主体代码 2.2 采集初始化 先初始化环境 这一步骤主要是连接手机，能使用影刀RPA操…...
多模态大语言模型arxiv论文略读（八十二）
Emotion-LLaMA: Multimodal Emotion Recognition and Reasoning with Instruction Tuning ➡️ 论文标题：Emotion-LLaMA: Multimodal Emotion Recognition and Reasoning with Instruction Tuning ➡️ 论文作者：Zebang Cheng, Zhi-Qi Cheng, Jun-Yan H…...
常见排序算法整理（Java实现）
1.冒泡排序（Bubble Sort） 原理 重复遍历数组，比较相邻元素，若顺序错误则交换。每趟将最大元素"冒泡"到末尾。 每次遍历保证了最大元素被放在最后，所以内层循环不需要遍历到最后的位置。 代码实现 public …...
c++字符串常用语法特性查询示例文档（二）
在 C中，除了std::string和std::string_view，还有其他一些与字符串相关的类型，它们各自针对不同的场景进行了优化。以下是一些常见的字符串类型及其使用方式和适用场景的汇总。 紧接上篇 c字符串常用语法特性查询示例文档（一&#…...
10.14 Function Calling与Tool Calling终极解析：大模型工具调用的5大核心差异与实战优化
Function Calling vs Tool Calling：大模型工具调用机制深度解析 关键词：Function Calling 原理, Tool Calling 实现, @tool 装饰器, ToolMessage 机制, 工具调用优化 1. 核心概念对比分析 #mermaid-svg-uDxSPB1CoQrHDxrT {font-family:"trebuchet ms",verdana,ari…...
opencascade如何保存选中的面到本地
环境：occ 7.6 需求场景：用户点击了一个TopoDS_Shape，还选中了其中一个面，这时候他点了保存。用户下次打开模型文件时，我们的viewer窗口要恢复上次的选中状态。 核心问题：如何把用户选中的面保存，…...
CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景
CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景 在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。 1. 绝对单位 px 特点： 像素（Pixel）是绝对长度单位1px 对应屏…...
YOLO模型predict（预测/推理）的参数设置
上一章描述了预测初体验，基本可以使用现有的yolo模型进行预测/推理。本次我们了解一下这个过程中的参数的作用。 1.参数示例 conf=0.68 ：表示模型识别这个东西是车的概率为68% 。一般默认的情况下，概率小于25%的就不显示了。 1）调整一下python的代码的参数如下,可以预测图…...
MATLAB中NLP工具箱支持聚类算法
文章目录 前言一、层次聚类（Hierarchical Clustering）二、DBSCAN（基于密度的空间聚类）三、高斯混合模型（GMM）四、谱聚类（Spectral Clustering）五、模糊 C 均值（Fuzzy C-M…...
甘特图工具怎么选？免费/付费项目管理工具对比测评（2025最新版）
2025年甘特图工具的全面指南 在项目管理领域，甘特图作为最直观的任务规划和进度追踪工具，已成为团队协作和项目执行的核心手段。随着数字化技术的快速发展，2025年的甘特图工具市场呈现出前所未有的多元化和智能化趋势。从开源软件到云端协作…...
Google设置app-ads.txt
问题： 应用上架后admob后台显示应用广告投放量受限，需要设置app-ads.txt才行。 如何解决： 官方教程: 看了下感觉不难，创建一个txt，将第二条的代码复制进行就得到app-ads.txt了。 然后就是要把这个txt放到哪才可以…...
Swift 二分查找实战：精准定位第一个“Bug版本”（LeetCode 278）
文章目录 摘要描述示例 题解答案（Swift）题解代码分析示例测试及结果输出结果： 时间复杂度分析空间复杂度分析总结 摘要 在版本迭代频繁的项目开发中，定位引入 bug 的第一个版本是一项高频任务。LeetCode 第278题“第一个错误的版…...
《AI革命重塑未来五年：医疗诊断精准度翻倍、自动驾驶事故锐减90%，全球科技版图加速变革》
1. 显著突破领域：AI 引发医疗与自动驾驶的范式变革 医疗领域的突破： AI正深刻改变医学研发和临床诊疗模式。在新药研发现代生物学中，DeepMind公司推出的 AlphaFold AI 模型在蛋白质折叠预测上取得了重大突破，被视为解决了困扰科学…...
【盈达科技】AICC™系统：重新定义生成式AI时代的内容竞争力
盈达科技AICC™系统：重新定义生成式AI时代的内容竞争力 ——全球首款AI免疫化内容中台的技术革命与商业实践 一、技术破局：AICC™系统如何重构AI内容生态 1. 技术架构：四大引擎构建闭环护城河 盈达科技AICC™（AI-Immunized Con…...
芯驰科技与安波福联合举办技术研讨会，深化智能汽车领域合作交流
5月15日，芯驰科技与全球移动出行技术解决方案供应商安波福（Aptiv）在上海联合举办以“芯智融合，共赢未来”为主题的技术研讨会。会上，双方聚焦智能座舱与智能车控的发展趋势，展开深入交流与探讨，…...
开发 前端搭建npm v11.4.0 is known not to run on Node.js v14.18.1.
错误nodejs 和npm 版本不一致 ERROR: npm v11.4.0 is known not to run on Node.js v14.18.1. This version of npm supports the following node versions: ^20.17.0 || >22.9.0. You can find the latest version at https://nodejs.org/. ERROR: D:\softTool\node-v14…...
关于systemverilog中在task中使用force语句的注意事项
先看下面的代码 module top(data);logic clk; inout data; logic temp; logic sampale_data; logic [7:0] data_rec;task send_data(input [7:0] da);begin(posedge clk);#1;force datada[7];$display(data);(posedge clk);#1;force datada[6]; $display(data); (posed…...
国产 iPaaS 与国外 iPaaS 产品相比如何？以谷云科技为例
iPaaS（Integration Platform as a Service）作为企业集成的关键技术，受到了广泛关注。国产 iPaaS 产品与国外 iPaaS 产品存在诸多差异，以下将从多个方面进行分析探讨。 一、技术架构与创新 国外 iPaaS 产品往往技术架构成熟且先进…...
低功耗：XILINX FPGA如何优化功耗？
优化Xilinx FPGA及其外围电路的功耗需要从硬件设计、软件配置和系统级优化三个层面综合考虑。以下是具体的优化策略，涵盖硬件和软件方面： 一、硬件层面的功耗优化 选择低功耗FPGA型号 选择Xilinx低功耗系列芯片，如7系列中的Artix-7ÿ…...
从纸质契约到智能契约：AI如何改写信任规则与商业效率？——从智能合约到监管科技，一场颠覆传统商业逻辑的技术革命
一、传统合同的“低效困境”：耗时、昂贵、风险失控 近年来，全球商业环境加速向数字化转型，但合同管理却成为企业效率的“阿喀琉斯之踵”。据国际商会（International Chamber of Commerce）数据显示，全球企业…...
在金融发展领域，嵌入式主板有什么优点？
在金融发展领域，嵌入式主板能够有力推动金融行业的智能化与高效化进程。主板的强大计算能力可以保障业务高效运行。例如在银行的高频交易场景下，其强大计算能力可确保系统在高负荷下依然保持流畅稳定，快速响应用户需求，大大提升金…...
打卡Day30
导入官方库的三种手段 方法一：直接导入整个模块 import math print(math.sqrt(16)) # 输出: 4.0方法二：从模块中导入特定函数或类 from datetime import datetime now datetime.now() print(now) # 输出当前日期和时间方法三：使用别名简…...
AI量化交易是什么？它是如何重塑金融世界的？
第一章：证券交易的进化之路 1.1 从喊价到代码：交易方式的革命性转变 在电子交易普及之前，证券交易依赖于交易所内的公开喊价系统。交易员通过手势、喊话甚至身体语言传递买卖信息，这种模式虽然直观，但效率低下且容易…...
AIGC与数字金融：人工智能金融创新的新纪元
AIGC与数字金融：人工智能金融创新的新纪元 引言 人工智能生成内容（AIGC）在数字金融领域发挥着关键作用，从金融内容生成到智能风控，从个性化服务到投资决策，AIGC正在重塑金融的方式和效果。本文将深入探讨A…...
芯片生态链深度解析（四）：芯片制造篇——纳米尺度上的精密艺术
开篇：芯片制造——现代工业的"皇冠明珠" 在芯片生态链的版图中，芯片制造是连接设计与封测的核心枢纽，堪称现代工业的“皇冠明珠”。如果说芯片设计是人类对微观世界的构想，那么制造便是将这种构想转化为现实的终极工程…...
黄金批次在流程和离散行业的概念解析
流程行业 概念 流程行业中： “黄金批次”：通常指生产过程中质量最优、性能最稳定、符合甚至超越所有关键指标的特定批次产品。这类批次在流程行业中具有标杆意义，常用于质量控制、工艺优化和客户交付。 核心特征 在流程行业中，“黄金批次”的核心特征包括： 1、质量一…...
Transformer实战——循环神经网络详解
Transformer实战——循环神经网络详解 0. 前言1. 基本循环神经网络单元1.1 循环神经网络工作原理1.2 时间反向传播1.3 梯度消失和梯度爆炸问题 2. RNN 单元变体2.1 长短期记忆2.2 门控循环单元2.3 Peephole LSTM 3. RNN 变体3.1 双向 RNN3.2 状态 RNN 4. RNN 拓扑结构小结 0. 前…...
基于Qt的app开发第九天
写在前面 笔者的课设截止时间已经越来越近了，还有不少地方的功能没有完成，所以重构一事还是放到做完整个项目、学完设计模式再考虑。目前就是继续往屎山堆屎。 需求分析 笔者的学长要做多线程，传数据的时候涉及到互斥锁之类的内容࿰…...
Baklib内容中台驱动资源管理创新
内容中台驱动智能整合 现代企业数字化进程中，内容中台通过结构化数据治理与智能算法协同，有效解决跨系统内容孤岛问题。以Baklib为例，其核心功能通过多语言支持与API接口集成能力，实现营销素材、产品文档等异构资源的统一索引与动…...
项目记录：「五秒反应挑战」小游戏的开发全过程
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 灵感来源与目标设定 最近我突然有个小想法：想做一个简洁但富有科技感的小型游戏，最好能…...
Git本地使用小Tips
要将本地仓库 d:\test 的更新推送到另一个本地仓库 e:\test，可以使用 Git 的远程仓库功能。以下是具体步骤： 在 e:\test 中添加 d:\test 作为远程仓库 在 e:\test 目录中打开 Git Bash 或命令行，执行以下命令： git remo…...
【AWS入门】AWS身份验证和访问管理（IAM）
【AWS入门】AWS身份验证和访问管理（IAM） [AWS Essentials] AWS Identity and Access Management (IAM) By JacksonML 众所周知，AWS亚马逊云科技位列全球云计算服务第一位，并且持续为广大客户提供安全、稳定的各类云产品和服务。…...
【NLP】36. 从指令微调到人类偏好：构建更有用的大语言模型
从指令微调到人类偏好：构建更有用的大语言模型 大语言模型（LLMs）已经成为现代自然语言处理系统的核心，但单纯依赖传统语言建模目标，往往难以满足实际应用的“人类意图”。从 Instruction Tuning（指令微调&…...
蓝桥杯1447 砝码称重
问题描述 你有一架天平和 N 个砝码，这 N 个砝码重量依次是 W1,W2,⋅⋅⋅,WN。 请你计算一共可以称出多少种不同的重量？ 注意砝码可以放在天平两边。 输入格式 输入的第一行包含一个整数 N。 第二行包含 N 个整数：W1,W2,W3,⋅⋅⋅,WN…...
每日c/c++题 备战蓝桥杯（洛谷P4715 【深基16.例1】淘汰赛 题解）
洛谷P4715 【深基16.例1】淘汰赛 题解 题目大意 有 (2^n) 名选手进行淘汰赛，每场比赛两人对决，能力值高者胜出；若能力值相同，则编号较小者胜出。最终决出冠军，要求输出亚军的编号。 解题思路 关键观察：…...
基于深度学习的电力负荷预测研究
一、深度学习模型框架 在当今数字化时代，基于深度学习的电力负荷预测研究正成为保障电力系统稳定、高效运行的关键领域。其模型构建是一个复杂而精妙的过程，涉及多学科知识与前沿技术的融合应用。首先，要明确电力负荷预测的目标，…...
没有 Mac，我如何用 Appuploader 完成 iOS App 上架
没有 Mac，我如何用 Appuploader 完成 iOS App 上架｜一个跨平台开发者的实战笔记 在做移动开发这些年里，唯一让我频繁想砸电脑的时刻，大概就是每次要把 iOS App 上传到 App Store。 作为一个主要在 Windows 和 Linux 开发的程序员…...
卓力达手撕垫片：精密制造的创新解决方案与多领域应用
目录 引言 一、手撕垫片的技术特性与核心功能 二、手撕垫片的多领域应用 三、南通卓力达手撕垫片的核心优势 四、未来技术展望 结语 引言 手撕垫片作为一种创新型精密金属部件，凭借其“可分层剥离、快速安装”的特性，在工业制造、电子通信、航空航天等…...
[[春秋云境] Privilege仿真场景
文章目录 靶标介绍：知识点卷影拷贝(VSS) 外网任意文件读取Jenkins管理员后台rdp远程登录Gitlab apiToken 内网搭建代理 Oracle RCESeRestorePrivilege提权mimikatzspn卷影拷贝提取SAM 参考文章 靶标介绍： 在这个靶场中，您将扮演一名资深黑客…...
【工具推荐】--Git详解
本文讲诉，git命令环境的安装和git命令的介绍 Git 是一个非常流行的分布式版本控制系统，它帮助开发者管理和跟踪项目中的代码变化。通俗地说，可以认为 Git 就像是一个代码的时间机器，它记录了项目从开始到结束的每一次代码变动。 …...
在linux里上传本地项目到github中
首先先安装git，安装完git后，输入如下操作指令： 输入自己的用户名和邮箱（为注册GITHUB账号时的用户名和邮箱）： git config --global user.name "111"git config --global user.email "121…...
操作入门)
【基础】Windows开发设置入门8：Windows 子系统 (WSL)操作入门
前言 大家熟悉的docker、Python，但对于Windows上有一套开配合开发的相对底层的环境设置，包括powershell、winget、WSL、还有开发驱动器什么的，我准备系统学一下，不然地基不牢，也盖不起冲天高楼~ 本节，介绍…...