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

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

news 2026/2/7 16:13:56

前端前沿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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/1/26 1:54:23

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/1/26 14:22:31

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19