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

WebGL 实践（一）开发环境搭建

news 文章来源：https://blog.csdn.net/lhr123789/article/details/144904015 2025/5/7 2:51:22

WebGL 是一种基于 JavaScript 的 API，用于在浏览器中渲染 2D和3D 图形，很多场景都能用，例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。

零、基础知识

相关基础知识很重要，如果会html、JavaScript等技术掌握起来会更快。后续学习过程中陆续给大家分享。

一、环境搭建

类似Python一样，WebGL也需要开发环境，查了下 ：

  • 开发工具：

    • 代码编辑器：VS Code、WebStorm。

    • 浏览器：支持 WebGL 的浏览器（如 Chrome、Firefox）。

  • 依赖管理：

    • 使用 npm 或 yarn 安装依赖库（如 Three.js、Webpack）。

  • 本地服务器：

    • 使用工具（如 http-server、Live Server）启动本地服务器，方便调试。

二、实践过程

1、下载VS code

到官网下载VS code软件，具体参考了：

Visual Studio Code (VS Code)安装教程（非常详细）从零基础入门到精通，看完这一篇就够了_vs code安装-CSDN博客

2、搜索WebGL案例

找了一段特别简单的代码：

<html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>webgl</title></head><body style="background-color: rgb(30,30,30);height: 100%;width: 100%;margin: 0px;padding: 0px;"><canvas id="WebGLCanvas" style="height: 100%;width: 100%;margin: 0px; padding: 0px;">10 Please use a browser that supports "canvas"</canvas></body>
</html>

3、实际效果

（1）在VS code里面新建一个项目，把上述代码copy进去，run之后会生成一个html文件。

（2）把html文件用chrome或者其他浏览器打开，打开之后如下效果。

（3）按F12打开开发者模式，在elements 里面可以看到我们copy的代码，调节rgb(30,30,30)变成别的可以发现颜色改变了，rgb的范围是0-255.

下图是rgb(50,60,200)的结果

三、小结

十分基础的实践过程分享，希望对你有所帮助，由于是非常新手的操作，也欢迎大佬指出不足之处。

相关文章：

WebGL 实践（一）开发环境搭建

WebGL 是一种基于 JavaScript 的 API&#xff0c;用于在浏览器中渲染 2D和3D 图形&#xff0c;很多场景都能用&#xff0c;例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。 零、基础知识 相关基础知识很重要&#xff0c;如果会html、JavaScript等技术掌握起来会更…...

编程日记 2025/1/4 9:32:10

在线机考|2024华为实习秋招春招编程题（最新）——第3题_PCB印刷电路板布线_300分（八）

题目内容 在PCB印刷电路板设计中，器件之间的连线需要避免线路的阻抗值增大、而且赛件之间还有别的器件和别的干扰源，在布线时我们希望受到的干扰尽量小。现将电路板简化成一个MN的矩阵，每个位置(单元格)的值表示其源干扰度。 如果单元格的值为0，表示此位置没有干扰源;如果单…...

编程日记 2025/1/4 9:30:08

Spring源码分析之事件机制——观察者模式（三）

目录 自定义事件 事件监听器 事件发布者&#xff08;服务层&#xff09; 使用示例controller层 Spring源码分析之事件机制——观察者模式&#xff08;一&#xff09;-CSDN博客 Spring源码分析之事件机制——观察者模式&#xff08;二&#xff09;-CSDN博客 这两篇文章是这…...

编程日记 2025/1/4 9:26:01

C#实现画图，及实现图像运动，C#中GDI+图形图像技术(Graphics类、Pen类、Brush类）C#之快速入门GDI+绘图 C#实现快速画图功能

下载源码 <-------- 在C#的世界里&#xff0c;GDI如同一位多才多艺的艺术家&#xff0c;以其强大的绘图能力&#xff0c;让开发者能够轻松地在应用程序中挥洒创意&#xff0c;绘制出丰富多彩的图形世界。GDI不仅支持基本的几何图形绘制&#xff0c;还能处理复杂的图像处理任…...

编程日记 2025/1/4 9:23:58

【51单片机零基础-chapter6:LCD1602调试工具】

实验0-用显示屏LCD验证自己的猜想 如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…...

编程日记 2025/1/4 9:16:45

算法题（24）：只出现一次的数字（二）

审题&#xff1a; 数组中除了答案元素只出现一次外&#xff0c;其他元素都会出现三次&#xff0c;我们需要找到并返回答案元素 思路&#xff1a; 由于现在会出现三次&#xff0c;所以利用异或运算符的方法就会失效。而所有数据都在32位二进制范围内&#xff0c;所以我们采用依次…...

编程日记 2025/1/4 9:15:44

趣味编程：心形曲线

目录 1.序言 2.代码展示 3.代码详解 3.1 头文件包含 3.2 绘制坐标轴函数 3.3 main 函数主体部分 4. 小结 1.序言 2025年的第一篇博客就用这个笛卡尔心形图开篇吧&#xff0c;寓意着新年大家能够有心有所属&#xff0c;祝诸位程序猿 / 程序媛 能够早点遇到自己的另一半。…...

编程日记 2025/1/4 9:14:42

C# 设计模式（结构型模式）：享元模式

C# 设计模式&#xff08;结构型模式&#xff09;&#xff1a;享元模式 (Flyweight Pattern) 在软件开发中&#xff0c;尤其是在处理大量对象时&#xff0c;我们常常会面临内存和性能上的挑战。当多个对象具有相似的状态时&#xff0c;通常会占用大量的内存资源&#xff0c;从而…...

编程日记 2025/1/4 9:13:41

计算机毕业设计Django+Tensorflow音乐推荐系统 音乐可视化 卷积神经网络CNN LSTM音乐情感分析 机器学习 深度学习 Flask

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/1/4 9:09:38

mysql 死锁案例及简略分析

准备数据 # 创一个测试表&#xff0c;存储引擎使用 innodb create table test_lock (id int primary key auto_increment,name varchar(20),age int )engine innodb;insert into test_lock (name,age) values (ionc001,10); insert into test_lock (name,age) values (ionc00…...

编程日记 2025/1/4 9:07:35

第四届计算机、人工智能与控制工程

第四届计算机、人工智能与控制工程 The 4th International Conference on Computer, Artificial Intelligence and Control Engineering 重要信息 大会官网&#xff1a;www.ic-caice.net 大会时间&#xff1a;2025年1月10-12日 大会地点&#xff1a;中国合肥 (安徽大学磬苑…...

编程日记 2025/1/4 9:06:34

RIP配置实验

RIP配置实验 案例简介 天一公司下属三个分公司&#xff0c;属于不同的地区&#xff0c;三个公司之间用路由器连接&#xff0c;路由器名称分别为分别为 Router0、Router1、Router2&#xff0c;请把一公司的部门pc0,通过二公司路由器&#xff0c;连接三公司的部门pc1,公司之间通…...

编程日记 2025/1/4 9:04:28

C# 整型、浮点型 数值范围原理分析

总目录 前言 一、整型、浮点型 数值范围列表 二、什么是大小、范围 在上面的列表中&#xff0c;每个数据类型都有自己的Range (范围) 和 Size (大小)。 1. 范围 范围好理解&#xff0c;就是对应数据类型的数据范围&#xff0c;如 sbtyte 的数据范围是 -128~127&#xff0c;超…...

编程日记 2025/1/4 9:03:22

Adobe Acrobat Pro DC 2023 下载安装教程，附详细图文

简介&#xff1a; Adobe Acrobat Pro DC 2023 是由 Adobe 公司推出的一款全面的 PDF 编辑、查看和管理软件。这款软件无论是个人用户还是企业级用户&#xff0c;都可以凭借其强大的功能满足不同的需求。作为一款业内领先的 PDF 处理工具&#xff0c;Adobe Acrobat Pro DC 不仅…...

编程日记 2025/1/4 9:01:19

stable diffusion秋叶启动器安装roop插件

方法简洁明了&#xff1a; 第一步&#xff1a;下载秋叶启动器 第二步&#xff1a;输入网址&#xff1a;https://visualstudio.microsoft.com/zh-hans/downloads/&#xff0c;下载vs安装程序&#xff0c;安装开始会自动弹出如下窗口&#xff0c;选择2个环境&#xff1a;Python开…...

编程日记 2025/1/4 8:53:10

7-14 统计工龄

给定公司多名员工的工龄&#xff0c;按输入工龄顺序输出每个工龄段有多少员工。 输入格式: 给出多个整数&#xff0c;即每个员工的工龄&#xff0c;范围在[0, 50]。 输出格式: 按输入工龄顺序输出每个工龄的员工个数&#xff0c;格式为&#xff1a;“工龄:人数”。 每项占一…...

编程日记 2025/1/4 8:50:07

OLED的显示

一、I2C I2C时序&#xff1a;时钟线SCL高电平下&#xff1a;SDA由高变低代表启动信号&#xff0c;开始发送数据&#xff1b;SCL高电平时&#xff0c;数据稳定&#xff0c;数据可以被读走&#xff0c;开始进行读操作&#xff0c;SCL低电平时&#xff0c;数据发生改变&#xff1…...

编程日记 2025/1/4 8:42:57

本地测试文件解析

PostMapping("/test") public void test() throws IOException {Path csvFile Paths.get("D:\\test/27.csv");//虚拟机退出时删除临时文件csvFile.toFile().deleteOnExit();List<String> list Files.readAllLines(csvFile, Charset.forName("…...

编程日记 2025/1/4 8:41:53

Elasticsearch JavaRestClient版

文章目录 初始化RestHighLeveClient&#xff08;必要条件&#xff09;索引库操作1.创建索引库&#xff08;4步&#xff09;2.删除索引库&#xff08;3步&#xff09;3.判断索引库是否存在&#xff08;3步&#xff09;4.总结&#xff1a;四步走 文档操作1.创建文档&#xff08;4…...

编程日记 2025/1/4 8:39:51

ubuntu 使用s3fs配置自动挂载对象存储

一、环境准备 1.有访问对象存储权限的AKSK 2.服务器、对象存储 二、实施步骤 sudo apt update sudo apt install s3fs echo "AK:SK" >/home/ubuntu/.passwd-s3fs ---位置自定义 chmod 600 /home/ubuntu/.passwd-s3fs ---权限必须要有 mkdir /data sudo s3fs …...

编程日记 2025/1/4 8:37:49

SQL字符串截取函数——Left（）、Right（）、Substring（）用法详解

SQL字符串截取函数——Left&#xff08;&#xff09;、Right&#xff08;&#xff09;、Substring&#xff08;&#xff09;用法详解 1. LEFT() 函数&#xff1a;从字符串的左侧提取指定长度的子字符串。 LEFT(string, length)string&#xff1a;要操作的字符串。length&#x…...

编程日记 2025/1/4 8:36:48

关系分类(RC)模型和关系抽取(RE)模型的区别

目标不同 关系分类模型&#xff1a;对给定的实体对在给定句子中预测其关系类型。两阶段&#xff08;RC&#xff09; 关系抽取模型&#xff1a;从句子中识别出所有潜在实体对&#xff0c;并为其预测关系类型。一阶段&#xff08;NERRE&#xff09; 训练/预测阶段输入输出数据不…...

编程日记 2025/1/4 8:32:43

什么是索引

在数据库管理系统中&#xff0c;索引是一种数据结构&#xff0c;用于快速定位数据库表中的特定记录。索引类似于一本书的目录&#xff0c;可以帮助数据库引擎迅速找到所需的数据&#xff0c;而不必扫描整个表。 类型&#xff1a;常见的数据库索引类型包括B树索引、哈希索引、全…...

编程日记 2025/1/4 8:25:34

OJ随机链表的复制题目分析

题目内容&#xff1a; 138. 随机链表的复制 - 力扣&#xff08;LeetCode&#xff09; 分析&#xff1a; 这道题目&#xff0c;第一眼感觉非常乱&#xff0c;这是正常的&#xff0c;但是我们经过仔细分析示例明白后&#xff0c;其实也并不是那么难。现在让我们一起来分析分析…...

编程日记 2025/1/4 8:23:31

UE5材质节点Distance

Distance可以计算两个物体间的距离&#xff0c;可以用来做过渡效果 当相机和物体距离3000的时候&#xff0c;就会渐渐从蓝过渡到红色&#xff0c;除以500是为了平滑过渡...

编程日记 2025/1/4 8:21:29

OSPF - SPF算法简述

SPF全称最短路径树算法&#xff0c;相信学过数据结构朋友应该看起来很熟悉  在一个区域内的路由器都会产生描述自己网络连接信息的LSA&#xff0c;包括两种信息&#xff0c;有路由信息和拓扑信息&#xff0c;简单的来说拓扑信息就是我连着谁&#xff0c;路由信息就是链路的地址…...

编程日记 2025/1/4 8:15:23

7.UE5横板2D游戏，添加分类，创建攻击，死亡逻辑，黑板实现追击玩家行为

目录 1.将变量分类 2.创建攻击 3.应用伤害逻辑 4.死亡逻辑&#xff0c;停止AI行为 5.AI追击玩家&#xff0c;使用黑板实现 1.将变量分类 2.创建攻击 创建攻击输入为鼠标左键&#xff0c;并绑定映射。 攻击动画&#xff0c;在角色状态的枚举中添加一个新的枚举 攻击输入的…...

编程日记 2025/1/4 8:12:20

PostgreSQL对称between比较运算

本文介绍PostgreSQL对称between比较功能&#xff1a;between symmetric&#xff0c;在动态拼接SQL时利用它可以简化判断。PostgreSQL 9.4 及以上版本支持BETWEEN SYMMETRIC操作符&#xff0c;MySQL、Oracle、MsSQL没有对应功能。 between 比较 PostgreSQL的between结构允许你对…...

编程日记 2025/1/4 8:11:18

Spring AOP面向切面编程

Spring AOP面向切面编程 面向切面编程AOP作用AOP功能AOP总结 AOP核心概念AOP的实现方式Spring 对AOP支持支持Aspect声明一个切面声明一个切入点AspectJ描述符如下AspectJ类型匹配的通配符常用的匹配规则 声明增强 用AOP实现日志拦截一般的实现仅拦截需要的方法先定义一个日志注…...

编程日记 2025/1/4 8:09:16

Visual Studio 中增加的AI功能

前言&#xff1a; 人工智能的发展&#xff0c;在现在&#xff0c;编程技术的IDE里面也融合了AI的基本操做。本例&#xff0c;以微软的Visual Studio中的人工智能的功能介绍例子。 本例的环境&#xff1a; Visual Studio 17.12 1 AI 智能变量检测&#xff1a; 上图展示了一…...

编程日记 2025/1/4 8:08:15