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

能源建设投资有限公司网站/搜索引擎优化目标

news 文章来源：https://blog.csdn.net/qq_45902692/article/details/135326323 2025/2/27 8:23:29
能源建设投资有限公司网站,搜索引擎优化目标,南昌seo排名,谷歌建站哪家好个人简介 👀个人主页： 前端杂货铺 🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展 📃个人状态： 研发工程师，现效力于中国工业软件事业 🚀人生格言： 积跬步…

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

文章目录

    • 前言
    • 一、绘制一个水平移动的点（attribute）
    • 二、通过鼠标控制绘制
      • 1、鼠标点击绘制点
      • 2、鼠标移动绘制点
      • 3、模拟画笔
    • 总结

前言

大家好，这里是前端杂货铺。

上一篇文章，我们学习了如何给画布换颜色、如何绘制一个点并且了解了三维坐标系…

接下来，继续我们 WebGL 内容的学习！

鼠标绘制的三种效果

一、绘制一个水平移动的点（attribute）

我们在着色器源程序中声明 attribute 变量，js 可以给这个变量传值，再绘制出来，从而就可以实现动态修改点的位置。

以下是 声明 attribute 变量，需要注意的是，attribute 只能在顶点着色器中使用，不能在片元着色器中使用。

// attribute: 存储限定符; vec4: 类型; aPosition: 变量名;
attribute vec4 aPosition;

以下是 获取 attribute 变量，需要注意的是 获取 attribute 变量需要在 initShader 函数之后，因为会用到 program 这个程序对象。获取之后返回变量的存储地址。

// program: 程序对象; 'aPosition': 指定想要获取存储地址的 attribute 变量的名称
const aPositon = gl.getAttribLocation(program, 'aPosition');

以下是 给 attribute 变量赋值，可以传递 1/2/3 个分量的值，没有传递的值为 0.0。

// location: 指定 attribute 变量的存储位置; v0, v1, v2, v3: 传入的分量值; 
gl.vertexAttrib1f(location, v0);
gl.vertexAttrib2f(location, v0, v1);
gl.vertexAttrib3f(location, v0, v1, v2);
gl.vertexAttrib4f(location, v0, v1, v2, v3);

绘制流程如下：

在这里插入图片描述

基于以上知识点，我们使用 attribute 变量绘制一个水平移动的点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script>
</head><body><canvas id="canvas" width="400" height="400" style="background: gray;">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE = `// 存储限定符 类型 变量名 分号 (注: attribute 只传递顶点数据)attribute vec4 aPosition;void main() {gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)gl_PointSize = 30.0;}`;// 片元着色器const FRAGMENT_SHADER_SOURCE = `void main() {// r g b agl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 获取 attribute 变量，返回变量的存储地址const aPosition = gl.getAttribLocation(program, 'aPosition');let x = 0;setInterval(() => {x += 0.1;if (x > 1.0) {x = 0;}// 给 attribute 变量赋值gl.vertexAttrib1f(aPosition, x);// 执行绘制gl.drawArrays(gl.POINTS, 0, 1);}, 200)</script>
</body></html>

attribute绘制一个水平移动的点

二、通过鼠标控制绘制

1、鼠标点击绘制点

接下来，我们通过鼠标来控制在画布上绘制点。

  • 屏幕坐标通过 event.clickX 和 event.clickY 来获取
  • 画布边距通过 event.target.getBoundingClientRect() 来获取，其 .left 和 .right 等同于 ctx.offsetWidth 和 ctx.offsetHeight
  • 画布的坐标通过 屏幕坐标 - 画布边距 获取
  • 转为 ndc 坐标：设画布的长和宽均为 400px，那么原点为 0，最左为 -200px，最右为 200px。想要转为原点为 0，最左为 -1，最右为 1，就可以均除以 200。最上和最下同理。

在这里插入图片描述

示例：我们点击画布的左上角的位置，查看控制台输出的坐标，如下

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script><style>* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}</style>
</head><body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE = `// 存储限定符 类型 变量名 分号 (注: attribute 只传递顶点数据)attribute vec4 aPosition;void main() {gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)gl_PointSize = 10.0; // 点的大小}`;// 片元着色器const FRAGMENT_SHADER_SOURCE = `void main() {// r g b a 绘制颜色gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 获取 attribute 变量，返回变量的存储地址const aPosition = gl.getAttribLocation(program, 'aPosition');ctx.onclick = function (event) {// 坐标const x = event.clientX;const y = event.clientY;console.log("鼠标点击的屏幕坐标：", x, y);// 获取边距 (上边距和左边距) domPosition.left 等同于 ctx.offsetLeft 的值const domPosition = event.target.getBoundingClientRect();console.log("画布边距：", domPosition.left, domPosition.top);// 点击的点位于画布上方 、 左侧的距离 (domPosition.left: 568(基于我显示屏的长度), domPosition.top: 50)const domx = x - domPosition.left;const domy = y - domPosition.top;console.log("画布的坐标：", domx, domy);// 固定值，画布长和宽的一半，均为200const halfWidth = ctx.offsetWidth / 2;const halfHeight = ctx.offsetHeight / 2;console.log("画布长和宽的一半：", halfWidth, halfHeight);// 转为 ndc坐标 (-1, 1)const clickX = (domx - halfWidth) / halfWidth;const clickY = (halfHeight - domy) / halfHeight;console.log("转为ndc的坐标：", clickX, clickY);// 给 attribute 变量赋值gl.vertexAttrib2f(aPosition, clickX, clickY);// 执行绘制gl.drawArrays(gl.POINTS, 0, 1);}</script>
</body>
</html>

通过鼠标点击绘制点

2、鼠标移动绘制点

改为 ctx.onmousemove 实现鼠标移动：

绘制点跟随鼠标

3、模拟画笔

改为 ctx.onmousemove 的基础上，在 ctx.onmousemove 之前定义一个存储点的数组 points

const points = [];

把以下内容替换掉，从而实现画笔效果：

    // 给 attribute 变量赋值// gl.vertexAttrib2f(aPosition, clickX, clickY);// 执行绘制// gl.drawArrays(gl.POINTS, 0, 1);for (let i = 0; i < points.length; i++) {gl.vertexAttrib2f(aPosition, points[i].clickX, points[i].clickY);gl.drawArrays(gl.POINTS, 0, 1);}

画笔

总结

本文，我们首先实现了绘制水平移动的点，之后通过坐标的转移，认识了 ndc 坐标的求解，从而实现了鼠标控制绘制，（包括点击绘制、移动绘制和模拟画布）的效果。

更多 WebGL 和 Three.js 内容正在更新中…

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. 百度百科 · WebGL
  2. WebGL + Three.js入门与实战【作者：yancy_慕课网】

在这里插入图片描述

相关文章：

WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制（点击绘制、移动绘制、模拟画笔）

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

编程日记 2024/2/8 5:37:05

大数据环境搭建(一)-Hive

1 hive介绍 由Facebook开源的,用于解决海量结构化日志的数据统计的项目 本质上是将HQL转化为MapReduce、Tez、Spark等程序 Hive表的数据是HDFS上的目录和文件 Hive元数据 metastore&#xff0c;包含Hive表的数据库、表名、列、分区、表类型、表所在目录等。 根据Hive部署模…...

编程日记 2024/2/8 5:34:01

mac电脑上使用android studio创建flutter项目

mac电脑环境配置可以看这篇文章&#xff1a;https://xiaoshen.blog.csdn.net/article/details/136068650 配置玩环境之后&#xff0c;开始创建第一个flutter项目&#xff1a;点击new flutter project或者new project都可以 然后选择flutter&#xff1a; 并将sdk配置为解压后的…...

编程日记 2024/2/8 5:21:47

Excel——分类汇总

1.一级分类汇总 Q&#xff1a;请根据各销售地区统计销售额总数。 第一步&#xff1a;排序&#xff0c;我们需要根据销售地区汇总数据&#xff0c;我们就要对【销售地区】的内容进行排序。点击【销售地区】列中任意一个单元格&#xff0c;选择【数据】——【排序】&#xff0c…...

编程日记 2024/2/8 5:19:45

Backtrader 文档学习- Observers - Reference

Backtrader 文档学习- Observers - Reference 1.Benchmark class backtrader.observers.Benchmark() 观察器存储策略的回报和参考资产的回报&#xff0c;参考资产是传递给系统的数据之一。 参数&#xff1a; timeframe (default: None) &#xff0c;如果None&#xff0c;则将…...

编程日记 2024/2/8 5:17:42

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Radio组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Radio组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Radio组件 单选框&#xff0c;提供相应的用户交互选择项。 子组件 无。 接口 …...

编程日记 2024/2/8 5:16:41

【go】结构体切片去重

场景 自定义结构体切片&#xff0c;去除切片中的重复元素&#xff08;所有值完全相同&#xff09; 代码 // 自定义struct去重 type AssetAppIntranets struct {ID string json:"id,omitempty"AppID string json:"app_id,omitempty"IP …...

编程日记 2024/2/8 5:15:40

百面嵌入式专栏（面试题）C语言面试题22道

沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇我们将介绍C语言相关面试题 。 宏定义是在编译的哪个阶段被处理的？答案：宏定义是在编译预处理阶段被处理的。 解读：编译预处理：头文件包含、宏替换、条件编译、去除注释、添加行号。 写一个“标准”宏MIN，这个…...

编程日记 2024/2/8 5:11:37

Docker方式创建keepalived连接MGR集群

记录一下简单的搭建步骤以便后期查验 目录 前言步骤1. 安装环境2. 重新制作镜像3. 导入新镜像4. 创建容器 前言 假设已经搭建了MySQL8的MGR集群方式&#xff08;一主两从&#xff09;。 MGR本身有故障转移重新选举新的主节点功能&#xff0c;但是上游的应用程序需要自己手动修…...

编程日记 2024/2/8 5:08:34

Oracle PL/SQL Programming 第5章：Iterative Processing with Loops 读书笔记

总的目录和进度&#xff0c;请参见开始读 Oracle PL/SQL Programming 第6版 本章探讨 PL/SQL 的迭代控制结构&#xff08;也称为循环&#xff09;&#xff0c;它允许您重复执行相同的代码。 PL/SQL 提供了三种不同类型的循环结构&#xff1a; 简单或无限循环FOR 循环&#x…...

编程日记 2024/2/8 5:06:32

C入门番外篇——C, Are you OK?

今日路上看到一个车牌&#xff0c;52U0K&#xff0c;感觉很有意思&#xff0c;如果做一下简单的翻译就是&#xff0c;“我爱你&#xff0c;好么&#xff1f;” 这样让我脑子中闪现了这样的一个画面&#xff1a;“一个男生追一个女生&#xff0c;看到女生不怎么搭理自己的样子&a…...

编程日记 2024/2/8 5:05:31

python-产品篇-游戏-象棋

文章目录 代码效果 代码 import pygame import time import constants from button import Button import pieces import computerclass MainGame():window NoneStart_X constants.Start_XStart_Y constants.Start_YLine_Span constants.Line_SpanMax_X Start_X 8 * Lin…...

编程日记 2024/2/8 5:03:29

用linux文件系统的链接功能实现文件缓存LRU

概述： 目前，随着家庭宽带网络、无线宽带技术，以及终端设备性能的不断发展，基于多媒体的应用越来越广泛，特别是互联网视频的应用更是成为推动这些技术发展的源动力。作为互联网视频VOD的应用，提高视频播放的流畅度是一个非常重要的指标之一。除了编解码技术，视频C…...

编程日记 2024/2/8 5:02:28

AI大模型开发架构设计（10）——AI大模型架构体系与典型应用场景

文章目录 AI大模型架构体系与典型应用场景1 AI大模型架构体系你了解多少?GPT 助手训练流程GPT 助手训练数据预处理2个训练案例分析 2 AI 大模型的典型应用场景以及应用架构剖析AI 大模型的典型应用场景AI 大模型应用架构 AI大模型架构体系与典型应用场景 1 AI大模型架构体系你…...

编程日记 2024/2/8 5:00:26

C# async/await的使用

C# 中的 async 和 await 关键字是用于实现异步编程的重要工具&#xff0c;它们简化了编写和维护非阻塞代码的过程。以下是对这两个关键字用法的简要说明&#xff1a; async 关键字 定义异步方法&#xff1a;在方法声明前使用 async 关键字&#xff0c;表示该方法是一个异步方…...

编程日记 2024/2/8 4:57:22

C语言之找单身狗

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a; 我要学编程(ಥ_ಥ)-CSDN博客 题目&#xff1a; 在一个整型数组中&#xff0c;只有一个数字出现一次&#xff0c;其他数组都是成对出现的&#xff0c;请找出那个只出现一次的数字。…...

编程日记 2024/2/8 4:56:19

读懂 FastChat 大模型部署源码所需的异步编程基础

原文&#xff1a;读懂 FastChat 大模型部署源码所需的异步编程基础 - 知乎 目录 0. 前言 1. 同步与异步的区别 2. 协程 3. 事件循环 4. await 5. 组合协程 6. 使用 Semaphore 限制并发数 7. 运行阻塞任务 8. 异步迭代器 async for 9. 异步上下文管理器 async with …...

编程日记 2024/2/8 4:54:18

【华为】GRE VPN 实验配置

【华为】GRE VPN 实验配置 前言报文格式 实验需求配置思路配置拓扑GRE配置步骤R1基础配置GRE 配置 ISP_R2基础配置 R3基础配置GRE 配置 PCPC1PC2 抓包检查OSPF建立GRE隧道建立 配置文档 前言 VPN &#xff1a;&#xff08;Virtual Private Network&#xff09;&#xff0c;即“…...

编程日记 2024/2/8 4:51:15

创建一个VUE项目（vue2和vue3）

背景&#xff1a;电脑已经安装完vue2和vue3环境 一台Mac同时安装vue2和vue3 https://blog.csdn.net/c103363/article/details/136059783 创建vue2项目 vue init webpack "项目名称"创建vue3项目 vue create "项目名称"...

编程日记 2024/2/8 4:49:13

Android 10.0 动态壁纸 LiveWallpaper

前言 在 Android 中&#xff0c;壁纸分为动态与静态两种&#xff0c;但其实两者得本质都是一样。都以一个 Service 得形式在后台运行&#xff0c;在一个类型为 TYPE_WALLPAPER 的窗口上绘制内容。也可以这么去理解&#xff1a;静态壁纸是一种特殊的动态壁纸&#xff0c;它仅在…...

编程日记 2024/2/8 4:46:10

Linux内核与驱动面试经典“小”问题集锦（4）

接前一篇文章&#xff1a;Linux内核与驱动面试经典“小”问题集锦&#xff08;3&#xff09; 问题5 问&#xff1a;Linux内核中内存分配都有哪些方式&#xff1f;它们之间的使用场景都是什么&#xff1f; 备注&#xff1a;这个问题是笔者近期参加蔚来面试时遇到的一个问题。这…...

编程日记 2024/2/8 4:42:06

使用python实现：判断任意坐标点在STL几何模型的内部或外部

简介 在STL几何模型处理的过程中&#xff0c;经常需要判断一个点是否在模型的内部。网上给出的资料主要是使用C vtk的&#xff0c;而python vtk的很少。本文给出了一段精简版的python代码&#xff0c;实现判断任意坐标点在STL几何模型的内部或外部。 代码 首先定义三个函数 …...

编程日记 2024/2/8 4:39:03

leetcode（滑动窗口）483.找到字符中所有字母异位词（C++详细解释）DAY4

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&a…...

编程日记 2024/2/8 4:38:02

Leaf——美团点评分布式ID生成系统

0.普通算法生成id的缺点 1.Leaf-segment数据库方案 第一种Leaf-segment方案&#xff0c;在使用数据库的方案上&#xff0c;做了如下改变&#xff1a; - 原方案每次获取ID都得读写一次数据库&#xff0c;造成数据库压力大。改为利用proxy server批量获取&#xff0c;每次获取一…...

编程日记 2024/2/8 4:36:00

ProcessSlot构建流程分析

ProcessorSlot ProcessorSlot构建流程 // com.alibaba.csp.sentinel.CtSph#lookProcessChain private Entry entryWithPriority(ResourceWrapper resourceWrapper, int count, boolean prioritized, Object... args)throws BlockException {// 省略创建 Context 的代码// 黑盒…...

编程日记 2024/2/8 4:34:58

工业笔记本丨行业三防笔记本丨亿道加固笔记本定制丨极端温度优势

工业笔记本是专为在恶劣环境条件下工作而设计的高度耐用的计算机设备。与传统消费者级笔记本电脑相比&#xff0c;工业笔记本在极端温度下展现出了许多优势。本文将探讨工业笔记本在极端温度环境中的表现&#xff0c;并介绍其优势。 耐高温性能: 工业笔记本具有更高的耐高温性…...

编程日记 2024/2/8 4:32:56

游戏服务器多少钱一台？腾讯云32元，阿里云26元

游戏服务器租用多少钱一年&#xff1f;1个月游戏服务器费用多少&#xff1f;阿里云游戏服务器26元1个月、腾讯云游戏服务器32元&#xff0c;游戏服务器配置从4核16G、4核32G、8核32G、16核64G等配置可选&#xff0c;可以选择轻量应用服务器和云服务器&#xff0c;阿腾云atengyu…...

编程日记 2024/2/8 4:30:53

实战分享：SpringBoot在创新创业项目管理中的应用

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…...

编程日记 2024/2/8 4:29:52

vue3：28— Vue 2 对 Vue 3 的所有非兼容性改变。（vue3学习笔记终）

非兼容性改变 | Vue 3 迁移指南 过渡类名v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from 。keyCode 作为 v-on 修饰符的支持。v-model 指令在组件上的使用已经被重新设计&#xff0c;替换掉了v-bind.sync.v-if 和 v-for 在同一个元素身上使用时的优先级发…...

编程日记 2024/2/8 4:28:51

【学习笔记】TypeScript学习笔记1 --TypeScript中的类型

文章目录 TS总的变量类型References TS总的变量类型 备注&#xff1a; 如果一个变量设置为了any 类型之后相当于变量关闭了TS的类型检测 let d: any; d 10; d hello;//unknown表示的是未知类型&#xff0c;实际是上一个安全的any,unknown类型的变量不能直接赋值给其他变量le…...

编程日记 2024/2/8 4:24:45