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

前端前沿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的各种接口 方法 常量等

在这里插入图片描述

待续。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/418.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【动态规划】最长上升子序列、最大子数组和题解及代码实现

Halo,这里是Ppeua。平时主要更新C语言,C,数据结构算法......感兴趣就关注我吧!你定不会失望。 🌈个人主页:主页链接 🌈算法专栏:专栏链接 我会一直往里填充内容哒! &…

JDK如何判断自己是什么公司的

0x00 前言 因为一些事情,遇到了这样一个问题,JDK如何判断自己是什么公司编译的。因为不同的公司编译出来,涉及到是否商用收费的问题。 平时自己使用的时候,是不会考虑到JDK的编译公司是哪一个,都是直接拿起来用&#…

指针和数组笔试题解析【下篇】

文章目录👁️6.指针笔试题👀6.1.试题(1)👀6.2.试题(2)👀6.3.试题(3)👀6.4.试题(4)👀6.5.试题(5&am…

四边形不等式技巧(上)

文章目录1、引入1.1 题目描述1.2 思路分析1.3 代码实现1.4 小结2、题目二2.1 题目描述2.2 思路分析2.3 代码实现2.4 小结3、题目三:合并石子3.1 题目描述3.2 思路分析3.3 代码实现3.4 枚举优化3.5 对数器4、四边形不等式技巧特征5、应用:画家问题5.1 题目…

金三银四最近一次面试,被阿里P8测开虐惨了...

都说金三银四涨薪季,我是着急忙慌的准备简历——5年软件测试经验,可独立测试大型产品项目,熟悉项目测试流程...薪资要求?5年测试经验起码能要个20K吧 我加班肝了一页半简历,投出去一周,面试电话倒是不少&a…

javaSE系列之继承与多态

💗 💗 博客:小怡同学 💗 💗 个人简介:编程小萌新 💗 💗 如果博客对大家有用的话,请点赞关注再收藏 🌞 javaSE系列之继承与多态继承关键字extends父类与子类在子类中访问父类的成员变…

【c++】继承

目录 一、继承的表现 子类对父类成员的访问权限 二、父类与子类之间的相互赋值 三、继承的作用域 如果是父类和子类构成隐藏呢? 四、子类的成员函数怎么写 1.default构造函数 2.析构函数 所以析构函数不需要我们显式调用。 五、继承与友元函数 六、继承与静…

记录使用chatgpt的复杂经历

背景 由于最近要写论文,c站的gpt也变样了,无奈之下和同学借了一个gpt账号,才想起没有npv,不好意思去要,也不想买,于是我找了很多临时免费的直到我看到有一家,邀请10人即可,而且只用…

力扣-股票的资本损益

大家好,我是空空star,本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目:1393. 股票的资本损益二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其他…

码农饭碗不保——ChatGPT正在取代Coder

码农饭碗不保——ChatGPT正在取代Coder 最近被OpenAI的ChatGPT刷屏了。我猜你已经读了很多关于ChatGPT的文章,不需要再介绍了。假如碰巧您还不太了解ChatGPT是什么,可以先看一下这篇文章,然后再回来继续。 与ChatGPT对话很有趣,…

GPT4论文翻译 by GPT4 and Human

GPT-4技术报告解读 文章目录GPT-4技术报告解读前言:摘要1 引言2 技术报告的范围和局限性3 可预测的扩展性3.1 损失预测3.2 人类评估能力的扩展4 能力评估4.1 视觉输入 !!!5 限制6 风险与缓解:7 结论前言: 这篇报告内容太多了!&am…

【MySQL基础】13—变量、流程控制、游标和触发器

⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以,麻烦各位看官顺手点个star~😊 如果文章对你有所帮助,可以点赞👍…

金丹一层 —— 深度刨析简单问题

目录 前言: 深度刨析问题 前言: 1.CSDN由于我的排版不怎么好看,我的有道云笔记比较美观,请移步有道云笔记 2.修炼必备 1)入门必备:VS2019社区版,下载地址:Visual Studio 较旧的下…

Python基础—面向对象(超详版)

Python基础—面向对象面向对象简介什么是面向对象类与对象父类与子类面向对象的特性单继承与多继承单继承多继承多层继承封装多态重写与调用python重写python调用super函数前言: 🏠个人主页:以山河作礼。 📝​📝​此专…

基于stm32智能语音电梯消毒系统

这次来分享个最近做的项目,stm32智能语音电梯消毒系统功能说明:在电梯,房间,客道区域内,检测到人,则执行相关动作!例如继电器开关灯,喷洒酒精等行为。手机app/微信小程序可以控制需要…

滑动窗口算法

🍏🍐🍊🍑🍒🍓🫐🥑🍋🍉🥝 啥是滑动窗口,它能解决什么样的问题? 文章目录🍐滑动窗口的概念🍏适用场景…

Docker圣经:大白话说Docker底层原理,6W字实现Docker自由

说在前面: 现在拿到offer超级难,甚至连面试电话,一个都搞不到。 尼恩的技术社群(50)中,很多小伙伴凭借 “左手云原生右手大数据”的绝活,拿到了offer,并且是非常优质的offer&#…

蓝桥杯C++组怒刷50道真题

🌼深夜伤感网抑云 - 南辰Music/御小兮 - 单曲 - 网易云音乐 🌼多年后再见你 - 乔洋/周林枫 - 单曲 - 网易云音乐 50题才停更,课业繁忙,有时间就更,2023/3/14/15:06写下 目录 👊填空题 🌼一…

ChatGPT作者John Schulman:我们成功的秘密武器

来源|TalkRL OneFlow编译 翻译|杨婷、徐佳渝、贾川 除了OpenAI,外界可能很少有人知道ChatGPT模型成功的真正原因,实际上,OpenAI也会对ChatGPT拥有的巨大影响力感到不可思议。这种困惑和惊喜就像工程师们解bug时获得的意…

在Docker上部署FastApi(最新)

目录 1 文件上传与新建目录 文件目录 2 修改requirements.txt文件 3 修改Dockerfile.txt文件 4 打包成镜像 5 运行启动 6 查看运行状态与日志 1 文件上传与新建目录 新建以下目录,其中.py文件是自己上传的 文件目录 新建以下文件 2 修改requirements.txt文件…