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

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

news 2026/3/26 8:59:02

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

51单片机按键控制实战：从消抖到状态切换的完整代码解析

51单片机按键控制实战&#xff1a;从消抖到状态切换的完整代码解析 在嵌入式系统开发中&#xff0c;按键控制是最基础也最关键的交互方式之一。无论是简单的家电控制面板&#xff0c;还是复杂的工业设备操作界面&#xff0c;按键作为人机交互的桥梁&#xff0c;其稳定性和响应速…...

编程新知 2026/3/26 7:42:24

当几何优化遇上时空建模：玩转TTAO-SE-CNN-LSTM黑科技

基于三角形拓扑结构优化算法优化卷积神经网络-长短时记忆网络结合SE注意力机制的数据分类预测(TTAO-SE-CNN-LSTM) 三角形拓扑结构优化算法TTAO优化长短时记忆网络隐藏层神经元数目、初始学习率和L2正则化参数 基于MATLAB环境 替换自己的数据即可 首先通过卷积神经网络提取数据…...

编程新知 2026/3/26 7:30:21

AI科学发现新范式！NSR综述知识图谱应用全解（非常详细），从入门到精通，收藏这一篇就够了！

在生物、化学、材料等数据密集型科学领域&#xff0c;海量实验数据与文献知识不断积累&#xff0c;但这些知识往往分散在不同数据库与研究论文中&#xff0c;难以被系统整合与有效利用。科学知识图谱&#xff08;Scientific Knowledge Graphs, SciKGs&#xff09;通过结构化方式…...

编程新知 2026/3/26 6:21:35

OpenClaw设备控制：Qwen3-32B通过USB接口操作硬件实验

OpenClaw设备控制&#xff1a;Qwen3-32B通过USB接口操作硬件实验 1. 为什么选择OpenClaw做硬件控制&#xff1f; 去年夏天&#xff0c;我在工作室调试一个温控风扇项目时&#xff0c;发现传统嵌入式开发存在一个痛点&#xff1a;每次修改控制逻辑都需要重新烧录固件。当我偶然…...

编程新知 2026/3/26 4:43:42

深度解析：SillyTavern如何通过五大革新打造终极AI对话体验？

深度解析&#xff1a;SillyTavern如何通过五大革新打造终极AI对话体验&#xff1f; 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 你是否曾想过&#xff0c;一个AI对话前端能如何超越简单…...

编程新知 2026/3/26 3:45:21

(复现)基于观测器的事件触发跟踪一致性控制（非理想一般线性多 智能体系统） 复现参考文献

(复现)基于观测器的事件触发跟踪一致性控制&#xff08;非理想一般线性多 智能体系统&#xff09; 复现参考文献&#xff1a;《Observer-based Event-triggered Tracking Consensus of Non-ideal General Linear Multi-agent Systems 》①控制&#xff1a;设计了一个分布式观测…...

编程新知 2026/3/26 3:15:14

如何利用OpenCode实现高效专业的AI驱动开发工作流？

如何利用OpenCode实现高效专业的AI驱动开发工作流&#xff1f; 【免费下载链接】opencode 一个专为终端打造的开源AI编程助手&#xff0c;模型灵活可选&#xff0c;可远程驱动。 项目地址: https://gitcode.com/GitHub_Trending/openc/opencode 在当今快速迭代的软件开发…...

编程新知 2026/3/26 1:24:50

Keil5嵌入式开发场景联想：Cosmos-Reason1-7B辅助生成硬件驱动注释与调试思路

Keil5嵌入式开发场景联想&#xff1a;Cosmos-Reason1-7B辅助生成硬件驱动注释与调试思路 1. 引言&#xff1a;从嵌入式调试到AI辅助编程 如果你用过Keil5这类嵌入式开发工具&#xff0c;肯定对那种感觉不陌生&#xff1a;面对着一行行寄存器配置代码&#xff0c;或者一个复杂…...

编程新知 2026/3/25 21:16:34

Leaflet 气象可视化实战：从风场、海浪到洋流的动态数据呈现

1. 气象数据可视化入门&#xff1a;为什么选择Leaflet&#xff1f; 第一次接触气象数据可视化时&#xff0c;我被各种专业GIS软件的门槛吓退了。直到发现Leaflet这个轻量级地图库&#xff0c;才真正体会到在网页上展示动态气象数据的乐趣。你可能不知道&#xff0c;全球超过60%…...

编程新知 2026/3/25 20:49:57

深入解析IKEv2与IPSec安全联盟的建立过程

1. IKEv2协议的核心价值与IPSec安全联盟 第一次接触IKEv2协议时&#xff0c;我被它简洁的交互流程惊艳到了。相比传统的IKEv1&#xff0c;这个2005年诞生的协议就像把瑞士军刀升级成了智能工具箱。IKEv2全称Internet Key Exchange version 2&#xff0c;它最大的突破在于将IPSe…...

编程新知 2026/3/25 17:35:03