当前位置： 首页 > news >正文

前端前沿web 3d可视化技术 ThreeJS学习全记录

news 2025/7/5 8:11:37

前端前沿web 3d可视化技术

随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式

前端方向主要流向的3D图形库包括Three.js和WebGL
WebGL灵活高性能，但代码量大，难度大，需要掌握很多底层知识和数学知识
Threejs封装了WebGL的底层细节，可拓展性强，有很多开源的插件和工具，更易上手

就像2G时代文字信息是主要传输媒介 3G时代的图片 4G时代的视频
随着硬件性能与技术的提升，未来的前端也一定是3D的

开始学习

threejs官方项目

首先要有一定的前端开发基础以及开发环境 不多赘述

访问https://threejs.org/ 点击github
在这里插入图片描述
在这里插入图片描述

拷贝项目到本地即可查看文档 案例文件 使用编辑器等
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

parcel打包工具

就像前端需要webpack来进行模块化开发 three JS也需要一个对应的工具，他就是PARCEL https://www.parceljs.cn/
当然，也可以使用前端常用的webpack vite等 各有优劣
parcel的优势在于上手速度快 0配置
在这里插入图片描述
本地新建空文件夹 使用npm init 命令创建新的NPM包
npm install -g parcel-bundler 安装parcel
手动建立如图的目录结构与基础文件 参考
在这里插入图片描述
在这里插入图片描述

到此 使用parcel搭建的最基础的threeJS开发环境就完成了

可以拿到ThreeJS的各种接口 方法 常量等

在这里插入图片描述

待续。。。。

相关文章：

前端前沿web 3d可视化技术 ThreeJS学习全记录

前端前沿web 3d可视化技术 随着浏览器性能和网络带宽的提升 使得3D技术不再是桌面的专利 打破传统平面展示模式 前端方向主要流向的3D图形库包括Three.js和WebGL WebGL灵活高性能，但代码量大，难度大，需要掌握很多底层知识和数学知识 Threej…...

编程日记 2023/3/13 12:39:48

链表经典笔试题（LeetCode刷题）

本篇文章主要是对力扣和牛客网上一些经典的和链表有关的笔试题的总结归纳，希望对你有所帮助。 目录 一、移除链表元素 1.1 问题描述 1.2 思路一 1.2.1 分析 1.2.2 代码 1.3 思路二 1.3.1 分析 1.2.3 思路三 1.3 代码实现 1.3.1 思路1的代码 1.3.2 思路2的…...

编程日记 2023/3/13 12:34:47

SpringCloud五大组件

微服务SpringCloud整合技术组件基本流程： 引入组件启动器依赖坐标覆盖默认配置即application.properties配置文件(每个微服务只有一个并且服务启动默认加载)引导类(微服务入口即main方法)自定义开启组件注解 SpringCloudEureka 服务注册中心，分为Eure…...

编程日记 2023/3/13 12:29:45

Echart的使用初体验，Echarts的基本使用及语法格式，简单图表绘制和使用及图例添加【学习笔记】

Echart？ ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome&#xf…...

编程日记 2023/3/13 12:24:44

聊聊腾讯T13技术专家被开除

这两天腾讯的技术大佬stonehuang被曝离开腾讯，据他老婆在小红书上发的帖子称是遭遇了裁员，说实话刚看到这个消息我挺震惊的，stonehuang在中国大前端领域是排得上号的专家，同时他2005年就加入了腾讯，在qq空间的发展历程…...

编程日记 2023/3/13 12:19:42

c++ 常见宏、模板用法【1】

目录1、宏定义实现简单的断言2、可变参数模板3、变量模板4、宏定义实现范围内的for循环5、模板实现函数对象6、宏定义实现作用域限定7、类型萃取模板1、宏定义实现简单的断言 #define ASSERT(expr) \if(!(expr)) { \std::cout << "assertion failed: " <&l…...

编程日记 2023/3/13 12:14:39

【25】Verilog进阶 - 序列检测

VL25 输入序列连续的序列检测 本题并不难【中等】难度给高了 【做题关键】 （1）需要使用移位寄存器的思路。其实reg型是寄存器，也可以当做是移位寄存器，重要的是对其的处理，使用的是移位寄存器的思路 （2）注意新移入数据存放在低位 1 题目 + 代码 + TestBench 很简单，没…...

编程日记 2023/3/13 12:04:15

如何绕开运营商的 QoS 限制

运营商针对 UDP 进行限制&#xff0c;这是 QUIC 以及类似 UDP-Based 协议的推广阻力之一&#xff0c;上了线很多问题&#xff0c;丢包&#xff0c;慢等的问题严重增加运维&#xff0c;运营成本。 按照运营商五元组 QoS 这种简单粗暴不惹事的原则&#xff0c;只要换一个端口就可…...

编程日记 2023/3/13 11:59:13

C#基础教程22 异常处理

文章目录 C# 异常处理语法C# 中的异常类异常类 描述异常处理创建用户自定义异常C# 异常处理 异常是在程序执行期间出现的问题。C# 中的异常是对程序运行时出现的特殊情况的一种响应，比如尝试除以零。 异常提供了一种把程序控制权从某个部分转移到另一个部分的方式。C# 异常处理…...

编程日记 2023/3/13 11:54:11

java八股文--java基础

java基础1.什么是面向对象&#xff0c;谈谈对面向对象的理解2.JDK JRE JVM的区别与联系3.和equals4.hashCode与equals5.String StringBuffer StringBuilder的区别6.重载和重写的区别7.接口和抽象类8.List和Set的区别9.ArrayList和LinkedList10.HashMap和HashTable的区别&#x…...

编程日记 2023/3/13 11:49:08

2022年全国职业院校技能大赛（中职组）网络安全竞赛试题A模块第四套解析（详细）

2022年全国职业院校技能大赛（中职组） 网络安全竞赛试题 （4） （总分100分） 赛题说明 一、竞赛项目简介 “网络安全”竞赛共分A.基础设施设置与安全加固；B.网络安全事件响应、数字取证调查和应用安全；C.CTF夺旗-攻击；D.CTF夺旗-防御等四个模块。根据比赛实际情况，竞…...

编程日记 2023/3/13 11:44:06

【Spark】spark使用jdbc连接带有kerberos认证的hive jdbc

背景 这个需求就是spark不通过spark-hive的方式访问hive数据&#xff0c;而是通过spark读取hive jdbc的方式访问hive数据&#xff0c;因为这个hive有kerberos认证&#xff0c;在网上也不是很容易搜索到这样的操作案例。不多bb&#xff0c;直接上教程。 准备工作 准备一个hiv…...

编程日记 2023/4/19 11:21:49

【Maven】项目中pom.xml坐标定义以及pom基本配置

目录 一、pom.xml坐标定义 二、pom 基本配置 一、pom.xml坐标定义 在 pom.xml 中定义坐标&#xff0c;内容包括&#xff1a;groupId、artifactId、version&#xff0c;详细内容如下&#xff1a; <!--项目名称&#xff0c;定义为组织名项目名&#xff0c;类似包名-->&l…...

编程日记 2023/3/13 11:33:59

Linux GCC 编译详解

文章目录一、GCC 编译器简介二、GCC 工作流编程语言的发展GCC 工作流程gcc 和 g 的区别三、使用 GCC 编译GCC 编译格式GCC 编译流程多个源文件编译一、GCC 编译器简介 首先&#xff0c;什么是编译器呢&#xff1f; 我们可以使用编辑器&#xff08;如 linux 下的 vi、windows 下…...

编程日记 2023/3/13 11:28:57

谁说程序员不懂了浪费，女神节安排

Python的PyQt框架的使用一、前言二、女神节文案三、浪漫的代码四、官宣文案一、前言 个人主页: ζ小菜鸡大家好&#xff0c;我是ζ小菜鸡&#xff0c;特在这个特殊的日子献上此文&#xff0c;希望小伙伴们能讨自己的女神欢心。 二、女神节文案 1.生活一半是柴米油盐&#xff0c…...

编程日记 2023/3/13 11:23:54

上市公司管理层短视指标（2007-2020）

1、数据说明&#xff1a;将研发⽀出的减少量&#xff08;∆R&D&#xff09;作为管理层短视⾏为的度量指标&#xff0c;即∆R&D为公司t年的研发⽀出减去t-1年的研发⽀出并除以t-1年末的总资产再乘以100。2、数据来源&#xff1a;自主整理3、时间跨度&#xff1a;2007-20…...

编程日记 2023/3/13 11:18:52

IDDPM 和 DDIM 对比

IDDPM 和 DDPM 对比IDDPMDDIMIDDPM IDDPM&#xff1a;Improved Denoising diffusion probabilistic models learning Σθ\Sigma_{\theta}Σθ​&#xff0c; 即Σθ(xt,t)exp⁡(vlog⁡βt(1−v)log⁡β~t)\Sigma_{\theta}\left(x_{t}, t\right)\exp \left(v \log \beta_{t}(1…...

编程日记 2023/3/13 11:13:43

链表OJ题（上）

✅每日一练&#xff1a;876. 链表的中间结点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 定义快慢指针&#xff0c;让快指针走2步&#xff0c;慢指针走1步&#xff0c;当fast或者fast.next为空时&#xff0c;走完链表&#xff0c;此时slow就是中间位置 pub…...

编程日记 2023/3/13 11:08:39

【题解】百度2021校招Web前端工程师笔试卷（第一批）：单选题、多选题

题目来源&#xff1a;牛客网公司真题_免费模拟题库_企业面试|笔试真题 (nowcoder.com) 若有错误请指正&#xff01; 单选题 1 某主机的 IP 地址为 212.212.77.55&#xff0c;子网掩码为 255.255.252.0。若该主机向其所在子网发送广播分组&#xff0c;则目的地址可以是&…...

编程日记 2023/3/13 11:03:36

论文解读：SuperPoint: Self-Supervised Interest Point Detection and Description

发表时间: 2018年 项目地址&#xff1a;https://arxiv.org/abs/1712.07629 论文地址&#xff1a;https://github.com/magicleap/SuperPointPretrainedNetwork 本文提出了一种用于训练计算机视觉中大量多视点几何问题的兴趣点检测器和描述符的自监督框架。与patch-based的神经网…...

编程日记 2023/3/13 10:58:33

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/7/4 9:50:55

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/7/4 16:49:43

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/5 1:30:02

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/7/5 5:41:42

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/7/4 14:06:52

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/7/5 5:12:05

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/6/20 0:50:46

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/7/2 14:16:01

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/6/20 12:51:17

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/6/21 2:22:29