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

news2024/12/23 12:13:44

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

在这里插入图片描述

待续。。。。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

卷积神经网络模型之——LeNet

目录LeNet模型参数介绍该网络特点关于C3与S2之间的连接关于最后的输出层子采样参考LeNet LeNet是一个用来识别手写数字的最经典的卷积神经网络,是Yann LeCun在1998年设计并提出的。Lenet的网络结构规模较小,但包含了卷积层、池化层、全连接层&#xff0…

Mr. Cappuccino的第49杯咖啡——冒泡APP(升级版)之基于Docker部署Gitlab

冒泡APP(升级版)之基于Docker部署Gitlab基于Docker安装Gitlab登录Gitlab创建Git项目上传代码使用Git命令切换Git地址使用IDE更换Git地址基于Docker安装Gitlab 查看beginor/gitlab-ce镜像版本 下载指定版本的镜像 docker pull beginor/gitlab-ce:11.3.0…

c# 源生成器

本文概述了 .NET Compiler Platform(“Roslyn”)SDK 附带的源生成器。 通过源生成器,C# 开发人员可以在编译用户代码时检查用户代码。 生成器可以动态创建新的 C# 源文件,这些文件将添加到用户的编译中。 这样,代码可以…

线程(一)

线程 1. 线程 定义:线程是进程的组成部分,不同的线程执行不同的任务,不同的功能模块,同时线程使用的资源师由进程管理,主要分配CPU和内存。 ​ 在进程中,线程执行的方式是抢占式执行操作,需要考…

33--Vue-前端开发-使用Vue脚手架快速搭建项目

一、vue脚手架搭建项目 node的安装: 官方下载,一路下一步 node命令类似于python npm命令类似于pip 使用npm安装第三方模块,速度慢一些,需换成淘宝镜像 以后用cmpm代替npm的使用 npm install -g cnpm --registry=https://registry.npm.taobao.org安装脚手架: cnpm inst…

汉诺塔--课后程序(Python程序开发案例教程-黑马程序员编著-第6章-课后作业)

实例3:汉诺塔 汉诺塔是一个可以使用递归解决的经典问题,它源于印度一个古老传说:大梵天创造世界的时候做了三根金刚石柱子,其中一根柱子从下往上按照从大到小的顺序摞着64片黄金圆盘,大梵天命令婆罗门把圆盘从下面开始…

C++回顾(二十)—— vector容器 和 deque容器

20.1 vector容器 20.1.1 vector容器简介 vector是将元素置于一个动态数组中加以管理的容器。vector可以随机存取元素(支持索引值直接存取, 用[]操作符或at()方法)。vector尾部添加或移除元素非常快速。但是在中部或头部插入元素或移除元素比…

es6的class(类)

目录 一、class(类)的语法 二、代码 三、效果 一、class(类)的语法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以…

Java基础(二):原码、反码、补码及进制之间的运算

Java基础系列文章 Java基础(一):语言概述 Java基础(二):原码、反码、补码及进制之间的运算 Java基础(三):数据类型与进制 目录一、不同进制的表示方式二、二进制三、进制之间的转换四、byte的取值范围一、不同进制的表示方式 所有数字在计…

Leetcode 141.环形链表 142环形链表II

141环形链表 文章目录快慢指针快慢指针 代码思路: slow 和fast 指向 head slow走一步,fast走两步 没有环: fast每次走2步 ,如果 fast 最终遇到NULL(链表中的元素是 偶数)或者fast->next(链表中的元素是 奇数)遇到NULL&#xf…

【ArcGIS Pro二次开发】(12):txt文件和Excel文件的读写

在Arcgis Pro的工作流中,数据的输入是很常见的。这里以TXT和Excel两种文件为例,在SDK中实现数据的读取和写入。 一、txt文件的读写 txt文件的读写相对简单,可以用Arcgis Pro自带的OpenItemDialog打开txt文件,并直接读取&#xff…

浙江大学海宁IMBA提面经验分享

先来介绍一下我的个人情况:本人毕业于浙江一所普通的本科院校,毕业已经6年了,在一家互联网公司担任市场部经理。其实在参加浙大IMBA项目提面之前,我也参加了浙大MBA项目的提面,可惜只拿到了良好的结果,所以…

力扣-每天的领导和合伙人

大家好,我是空空star,本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目:1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…

SWMM从入门到实践教程 04 快速入门案例的模拟执行

文章目录1 模拟时间的设置2 模拟执行3 报告查看3.1 完整报告3.2 总结报告4 纵断面查看5 结果播放1 模拟时间的设置 在左侧双击Options中的Dates,即可弹出时间的设置。此处为了教学,建议仅模拟6个小时,加快结果的生成。实际项目中,…

Gradle 的下载安装教程

Gradle 8.0.1 下载安装教程笔者的环境: Java 17.0.1 Gradle 8.0.1 Windows 10 教育版 64位 在继续阅读本教程之前,需要先完成 JDK 的安装。JDK 需要选择 8 及以上的版本。关于 JDK 的安装,可见笔者的另一篇博客: Java 的下载安…

卷积神经网络之AlexNet

目录概述AlexNet特点激活函数sigmoid激活函数ReLu激活函数数据增强层叠池化局部相应归一化DropoutAlexnet网络结构网络结构分析AlexNet各层参数及其数量模型框架形状结构关于数据集训练学习keras代码示例概述 由于受到计算机性能的影响,虽然LeNet在图像分类中取得了…

【轻轻松松学MongoDB】操作命令02:插入/删除

文档&#xff08;document&#xff09;的数据结构和 JSON 基本一样。所有存储在集合中的数据都是 BSON 格式。 一、文档插入 db.collection.insert( <document or array of documents>, { writeConcern: <document>, ordered: <boolean> } ) 例子&#xff…

【编程基础】009.输入两个正整数m和n,求其最大公约数和最小公倍数。

最大公约数与最小公倍数 题目描述 输入两个正整数m和n&#xff0c;求其最大公约数和最小公倍数。 输入格式 两个整数 输出格式 最大公约数&#xff0c;最小公倍数 样例输入 5 7 样例输出 1 35 题目思路 在这里我们用m表示较大的那个数&#xff0c;n表示较小的数。求…

三分钟拥有自己的 chat-gpt (开发到上线)

三分钟拥有自己的 chat-gpt (开发到上线) 首先你需要有一个 laf 账号&#xff0c;如果你还不知道 laf 是什么&#xff0c;点击这里三分钟学会然后你还需要有一个 chat-gpt 的账号并且生成一个 apiKey (这一步可以问 Google ) 云函数 具备了上面这两个条件我们就可以开始啦。…

CNCF x Alibaba云原生技术公开课 第八章 应用配置管理

Pod配置管理分类 可变配置就用 ConfigMap&#xff1b;敏感信息是用 Secret&#xff1b;身份认证是用 ServiceAccount&#xff1b;资源配置是用 Resources&#xff1b;安全管控是用 SecurityContext&#xff1b;前置校验是用 InitContainers。 1、ConfigMap 概念&#xff1a;…