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

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

news 2026/2/10 20:17:38

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

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

编程新知 2026/1/31 9:25:11

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2026/2/10 0:52:03

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2026/2/10 0:32:51

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/9/21 1:58:01

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2026/2/7 9:52:39