从网路冲浪到three.js+cannon.js

从网路冲浪开始

网络浏览器的发展史可以追溯到互联网的早期，随着时间的推移，浏览器已经经历了多次重大的变革和发展。

以下是网络浏览器发展史的一个简要概述：

1. 早期的文本浏览器

  • 1990年：蒂姆·伯纳斯-李（Tim Berners-Lee）开发了第一个网络浏览器WorldWideWeb（后来更名为Nexus），运行在NeXT计算机上。同时，他还开发了第一个网页服务器和HTML。
  • 1991年：伯纳斯-李的学生马克·安德森（Mark Andreessen）在伊利诺伊大学香槟分校参与开发了Mosaic，这是第一个广泛使用的图形界面浏览器。

2. 商业化和浏览器战争

  • 1994年：安德森与吉姆·克拉克（Jim Clark）共同创立了Mosaic Communications Corporation，后来改名为Netscape Communications。同年，Netscape发布了Netscape Navigator，迅速成为市场领导者。
  • 1995年：微软推出了Internet Explorer 1.0，并随Windows 95操作系统捆绑销售。这标志着浏览器战争的开始。
  • 1996年：Opera浏览器由挪威的Opera Software公司首次发布。

3. 标准化和开放源代码

  • 1998年：网景通信公司开源了其浏览器代码，创建了Mozilla项目，目标是开发一个开源的浏览器。
  • 2001年：基于Mozilla代码，网景通信公司发布了Netscape 6，但市场占有率继续下降。
  • 2002年：Phoenix（后来的Firefox）的第一个版本发布，它是Mozilla项目的衍生产品。

4. 现代浏览器的崛起

  • 2003年：苹果公司发布了Safari浏览器，最初是Mac OS X的默认浏览器。
  • 2008年：Google发布了Chrome浏览器，基于Webkit引擎，很快因其快速和简洁而受到欢迎。
  • 2009年：Mozilla基金会发布了Firefox 3.5，引入了新的JavaScript引擎TraceMonkey，显著提高了性能。

5. 移动和多样化

  • 2010年代：随着智能手机的普及，移动浏览器开始快速发展。Chrome、Safari、Firefox和Opera等都在移动平台上推出了相应的版本。
  • 2013年：微软推出了Internet Explorer 11，并开始开发新的浏览器Edge。
  • 2015年：Mozilla基金会发布了Firefox 44，支持多个操作系统和设备。
  • 2016年：微软的Edge浏览器随Windows 10周年更新发布，取代了Internet Explorer成为新的默认浏览器。

6. 当前和未来

  • 至今：浏览器继续发展，重点包括性能提升、安全性增强、隐私保护、对新兴Web标准的支持等。Chrome因其快速、安全、丰富的扩展程序而成为市场领导者。
  • 未来：随着Web技术的不断进步，浏览器将继续向着更加快速、安全、用户友好的方向发展。新的浏览技术，如WebAssembly和Service Workers，将进一步扩展浏览器的功能。

网络浏览器的发展史见证了互联网的快速成长和变革，从简单的文本浏览器到功能丰富的现代浏览器，它们已经成为我们日常生活中不可或缺的一部分。

C/S两层到B/S三层

B/S（Browser/Server，浏览器/服务器）模式和C/S（Client/Server，客户端/服务器）模式是两种常见的网络架构模式，它们在客户端和服务器之间的交互方式、软件部署、用户体验等方面有着显著的区别。

B/S模式

B/S模式是一种基于网络的架构，用户通过浏览器访问服务。主要特点包括：

  1. 集中管理：应用程序的核心逻辑和数据存储在服务器上，便于集中管理和维护。
  2. 客户端简单：用户通过浏览器访问服务，无需在客户端安装额外的软件。
  3. 跨平台兼容性：由于浏览器的普遍存在，B/S模式的应用程序通常能够跨不同的操作系统和设备工作。
  4. 网络依赖性：B/S模式需要持续的网络连接，客户端的体验受网络速度和质量的影响较大。
  5. 更新方便：服务器端更新应用程序后，所有用户都可以立即使用最新版本。

C/S模式

C/S模式是一种传统的客户端-服务器架构，客户端和服务器之间通常有直接的连接。主要特点包括：

  1. 分布式架构：客户端和服务器分工明确，客户端负责用户界面和部分业务逻辑，服务器负责数据处理和存储。
  2. 客户端复杂：客户端通常需要安装专用的客户端软件，这可能涉及到跨平台的兼容性问题。
  3. 性能优势：部分业务逻辑在客户端处理，可以减少服务器负载，提高性能。
  4. 离线工作：某些C/S应用允许客户端在离线状态下工作，减少对网络的依赖。
  5. 更新困难：客户端软件的更新需要用户手动进行，这可能导致不同用户使用不同版本的应用程序。

对比分析

  • 用户体验：B/S模式通常提供更加一致的用户体验，而C/S模式可以提供更加丰富和响应迅速的用户界面。
  • 部署和维护：B/S模式在部署和维护方面更加简便，而C/S模式可能需要更多的客户端配置和维护工作。
  • 网络依赖：B/S模式更加依赖于网络，而C/S模式可以在一定程度上减少对网络的依赖。
  • 性能和响应：C/S模式在性能和响应速度方面可能具有优势，尤其是对于复杂和计算密集型的应用。
  • 适用场景：B/S模式适合于信息查询、在线交易等Web应用，而C/S模式适合于需要高性能、复杂客户端逻辑或离线工作的应用。

选择B/S还是C/S模式取决于应用的需求、用户体验的要求、网络的可靠性以及维护和部署的便利性等因素。随着技术的发展，这两种模式也在不断地演变和融合，例如，通过使用HTML5和WebAssembly等技术，B/S应用可以提供更加丰富的客户端体验。

RESTful API

RESTful API是基于REST（Representational State Transfer）原则设计的一种软件架构风格，用于在网络上构建分布式系统。它使用HTTP协议进行通信，并通过HTTP动词（GET，POST，PUT，DELETE等）来执行操作。

RESTful API的设计原则包括：

  1. 资源：将应用程序的数据和功能表示为资源，并使用唯一的URL（统一资源定位符）来标识每个资源。

  2. 表示：资源的表示应该使用通用的标准格式，例如JSON（JavaScript Object Notation）或XML（eXtensible Markup Language）。

  3. 状态转移：通过HTTP动词来执行对资源的操作，例如GET获取资源，POST创建新资源，PUT更新资源，DELETE删除资源。

  4. 无状态：API应该是无状态的，服务器不会保存客户端的状态。每个请求都是独立的，每个请求都应包含足够的信息来处理该请求，简化了系统设计，提高了可伸缩性。

使用RESTful API来构建web应用程序的步骤如下：

  1. 定义资源：确定应用程序中的数据和功能，将其表示为资源，并为每个资源定义唯一的URL。

  2. 设计URL：根据资源的层次结构和关系来设计URL。使用合适的HTTP动词来表示对资源的操作。

  3. 实现HTTP方法：根据定义的URL和HTTP方法（如GET、POST、PUT、DELETE），实现相应的资源的CRUD（创建、读取、更新、删除）操作功能。例如，使用GET方法来获取资源的列表或特定资源的详细信息，使用POST方法创建新资源，使用PUT方法更新资源，使用DELETE方法删除资源。RESTful API通常遵循统一的接口设计原则，使用标准的HTTP方法（如GET、POST、PUT、DELETE）来进行资源的CRUD（创建、读取、更新、删除）操作。利用HTTP缓存机制，减少客户端和服务器之间的数据传输，提高性能。

  4. 处理错误：在API的设计中考虑错误处理机制，为每种可能的错误情况定义合适的HTTP状态码，并返回相应的错误信息。

  5. 身份验证和授权：如果需要，为API添加身份验证和授权机制，以确保只有授权用户可以访问资源。

  6. 文档化：为API提供清晰的文档，包括资源的定义、URL的示例和参数的说明，以便开发人员可以使用和理解API。

RESTful API的设计和使用促进了不同系统之间的互操作性。它是现代微服务架构和云服务的关键组成部分。通过遵循REST原则，开发者可以创建易于理解、可扩展、可维护、可靠且高效的API，实现数据的共享和交互，提供更好的用户体验。

RESTful API在实际项目中的应用非常广泛，尤其是在构建微服务架构、前后端分离的应用程序、以及提供第三方服务的平台上。以下是一些具体的应用场景：

  1. 前后端分离：在现代Web应用中，通常会将前端（用户界面）和后端（服务器逻辑）分离。RESTful API作为前后端之间的通信桥梁，前端通过HTTP请求与后端进行数据交互，后端返回JSON或XML格式的数据。

  2. 移动应用开发：移动应用经常使用RESTful API与服务器进行数据同步。例如，一个天气应用可能会使用API来获取天气预报数据。

  3. 微服务架构：在微服务架构中，不同的服务通常通过网络进行通信。RESTful API是服务之间进行通信的一种常见方式，每个服务都暴露出一组API供其他服务调用。

  4. 第三方集成：许多企业和开发者会提供公开的API，允许第三方开发者利用这些服务来增强自己的应用程序。例如，Google Maps API允许开发者将地图集成到自己的应用中。

  5. 物联网（IoT）：物联网设备通常需要将收集到的数据发送到服务器进行分析和处理。RESTful API可以用于设备与服务器之间的数据交换。

  6. 数据分析和报告：数据分析工具可以使用RESTful API从不同的数据源获取数据，然后进行加工和分析，生成报告。

在实际应用中，设计和实现RESTful API时需要考虑以下几个方面：

  • 资源的设计：确定API要操作的资源，并为它们设计合理的URL结构。
  • HTTP方法的使用：根据资源的CRUD操作，选择合适的HTTP方法（GET、POST、PUT、DELETE等）。
  • 状态码的返回：使用合适的HTTP状态码来反映请求的处理结果。
  • 数据的格式：通常使用JSON或XML格式来交换数据。
  • 安全性：考虑API的安全性，如使用OAuth、JWT等机制进行身份验证和授权。
  • 限流和缓存：为了防止滥用和提高性能，可以实施限流和缓存策略。

RESTful API的成功应用需要在设计、实现和文档编写方面下功夫，确保API易于理解、使用和维护。

主流浏览器

目前，常用的浏览器主要有：Chrome、IE（Edge）、Safari、Firefox等。不同的浏览器在结构方面虽然有所差异，但是整体的设计理念是相似的。因此，可以抽象得到如下图所示的参考结构：

浏览器的结构

浏览器的抽象分层结构图中将浏览器分成了以下8个子系统：

  • 用户界面（User Interface）
    用户界面主要包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了浏览器主窗口显示请求的页面之外，其他显示的部分都属于用户界面。
    用户界面还可以与桌面环境集成，以提供浏览器会话管理或与其他桌面应用程序的通信。
  • 浏览器引擎（Browser Engine）
    浏览器引擎是一个可嵌入的组件，其为渲染引擎提供高级接口。
    浏览器引擎可以加载一个给定的URI，并支持诸如：前进/后退/重新加载等浏览操作。
    浏览器引擎提供查看浏览会话的各个方面的挂钩，例如：当前页面加载进度、JavaScript alert。
    浏览器引擎还允许查询/修改渲染引擎设置。
  • 渲染引擎（Rendering Engine）
    渲染引擎为指定的URI生成可视化的表示。
    渲染引擎能够显示HTML和XML文档，可选择CSS样式，以及嵌入式内容（如图片）。
    渲染引擎能够准确计算页面布局，可使用“回流”算法逐步调整页面元素的位置。
    渲染引擎内部包含HTML解析器。
  • 网络（Networking）
    网络系统实现HTTP和FTP等文件传输协议。 网络系统可以在不同的字符集之间进行转换，为文件解析MIME媒体类型。 网络系统可以实现最近检索资源的缓存功能。
  • JavaScript解释器（JavaScript Interpreter）
    JavaScript解释器能够解释并执行嵌入在网页中的JavaScript（又称ECMAScript）代码。 为了安全起见，浏览器引擎或渲染引擎可能会禁用某些JavaScript功能，如弹出窗口的打开。
  • XML解析器（XML Parser）
    XML解析器可以将XML文档解析成文档对象模型（Document Object Model，DOM）树。 XML解析器是浏览器架构中复用最多的子系统之一，几乎所有的浏览器实现都利用现有的XML解析器，而不是从头开始创建自己的XML解析器。
  • 显示后端（Display Backend）
    显示后端提供绘图和窗口原语，包括：用户界面控件集合、字体集合。
  • 数据持久层（Data Persistence）
    数据持久层将与浏览会话相关联的各种数据存储在硬盘上。 这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。

渲染引擎

浏览器的组成模块众多，而渲染引擎则是浏览器中最重要的模块（渲染引擎有时候也被称为“浏览器内核”，这种说法并不严谨，不推荐使用）。目前，常见的渲染引擎有Trident、Gecko、WebKit等。下表所示为几种渲染引擎在不同浏览器中的应用：

网路HTML文档

TCP三次握手

TCP三次握手是TCP/IP协议中用于建立网络连接的过程。它确保了数据的可靠传输。以下是TCP三次握手的步骤：

  1. 第一次握手（SYN）：客户端发送一个带有SYN（同步序列编号）标志的数据包给服务器，以便开始一个新的连接。

  2. 第二次握手（SYN-ACK）：服务器收到SYN后，会应答一个带有SYN-ACK（同步和确认）标志的数据包，确认收到了客户端的SYN，同时也告诉客户端，服务器已经准备好建立连接了。

  3. 第三次握手（ACK）：客户端收到服务器的SYN-ACK后，会发送一个带有ACK（确认）标志的数据包，确认收到了服务器的SYN-ACK。此时，连接建立成功，客户端和服务器可以开始数据传输。

TCP四次挥手

TCP四次挥手是TCP/IP协议中用于终止网络连接的过程。以下是TCP四次挥手的步骤：

  1. 第一次挥手（FIN）：当客户端完成数据传输后，它会发送一个带有FIN（结束）标志的数据包给服务器，请求关闭连接。

  2. 第二次挥手（ACK）：服务器收到这个FIN请求后，会发送一个带有ACK标志的数据包，确认收到了客户端的FIN请求。

  3. 第三次挥手（FIN）：服务器准备好关闭连接时，也会发送一个带有FIN标志的数据包给客户端。

  4. 第四次挥手（ACK）：客户端收到服务器的FIN请求后，会发送一个带有ACK标志的数据包，确认收到了服务器的FIN请求。在发送完这个ACK后，客户端会等待一段时间（通常是2倍的最大段生命周期MSL），以确保服务器收到了客户端的ACK包。

文档解析流程

浏览器加载和解析HTML文档的过程的基本步骤：

  1. 域名解析（DNS查询）：浏览器首先解析URL中的域名，找到对应的IP地址。

  2. 建立连接：浏览器使用TCP三次握手与服务器建立连接。

  3. 发送请求：浏览器发送HTTP请求，请求服务器提供HTML文档。

  4. 接收响应：服务器处理请求后，返回HTTP响应，包含HTML文档的内容。

  5. 构建DOM树：浏览器解析HTML文档，构建DOM（文档对象模型）树。DOM树是HTML文档的树形结构表示，用于表示文档中的元素和它们之间的关系。

  6. 执行脚本：如果HTML文档中包含JavaScript脚本，浏览器会执行这些脚本，可能会修改DOM树。

  7. 加载外部资源：浏览器加载HTML文档中引用的外部资源，如CSS样式表、图片、视频等。

  8. 渲染页面：浏览器根据DOM树和CSS样式，计算页面的布局，并渲染页面。

  9. 交互：用户与页面交互，浏览器根据交互事件进行相应的处理和响应。

  1. Parsing HTML to Construct DOM Tree 渲染引擎使用HTML解析器（调用XML解析器）解析HTML（XML）文档，将各个HTML（XML）元素逐个转化成DOM节点，从而生成DOM树。同时，渲染引擎使用CSS解析器解析外部CSS文件以及HTML（XML）元素中的样式规则。元素中带有视觉指令的样式规则将用于下一步，以创建另一个树结构：渲染树。
  2. Render Tree construction 渲染引擎使用第1步CSS解析器解析得到的样式规则，将其附着到DOM树上，从而构成渲染树。
    渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
  3. Layout of Render Tree 渲染树构建完毕之后，进入本阶段进行“布局”，也就是为每个节点分配一个应出现在屏幕上的确切坐标。
  4. Painting Render Tree 渲染引擎将遍历渲染树，并调用显示后端将每个节点绘制出来。

  • HTML（XML）解析器
    解析HTML（XML）文档，主要作用是将HTML（XML）文档转换成DOM树。
  • CSS解析器
    将DOM中的各个元素对象进行计算，获取样式信息，用于渲染树的构建。
  • JavaScript解释器
    使用JavaScript可以修改网页的内容、CSS规则等。JavaScript解释器能够解释JavaScript代码，并通过DOM接口和CSSOM接口来修改网页内容、样式规则，从而改变渲染结果。
  • 布局
    DOM创建之后，渲染引擎将其中的元素对象与样式规则进行结合，可以得到渲染树。布局则是针对渲染树，计算其各个元素的大小、位置等布局信息。
  • 绘图
    使用图形库将布局计算后的渲染树绘制成可视化的图像结果。

在网络浏览器中，事件循环（event loop）是一个核心的概念，它负责处理各种异步事件，如用户输入、网络请求、定时器等。事件循环可以分为宏任务（macrotasks）和微任务（microtasks）。了解这两种任务对于理解JavaScript的异步编程非常重要。

宏任务（Macrotasks）

宏任务是指那些在浏览器事件循环中运行的长时间任务。它们通常由浏览器核心引擎（如JavaScript引擎）执行。宏任务包括以下几种：

  1. script：这是最常见的宏任务，包括JavaScript代码。当页面加载时，HTML解析完成后，JavaScript代码会作为一个宏任务执行。

  2. setTimeout：这是一个异步执行的宏任务，它在指定的毫秒数后执行。

  3. setInterval：这也是一个异步执行的宏任务，与setTimeout类似，但它会在指定的时间间隔内重复执行。

  4. I/O：这包括所有与输入/输出相关的任务，如文件读写、网络请求等。

  5. UI rendering：这涉及浏览器渲染界面和响应用户输入，如点击、滚动等。

  6. postMessage：这是一个允许跨源通信的API，当一个源向另一个源发送消息时，它会产生一个宏任务。

微任务（Microtasks）

微任务是指那些在浏览器事件循环中快速执行的任务。它们通常用于处理JavaScript引擎内部的操作，如Promise的解决和拒绝。微任务包括以下几种：

  1. Promise：当Promise状态改变时，它们会被添加到微任务队列中。

  2. MutationObserver：这是一个API，用于监听DOM的变动，当DOM发生变化时，它会产生一个微任务。

  3. Observer：这是一个旧版本的MutationObserver，现在已经不推荐使用。

  4. Async/Await：当使用async/await语法执行Promise时，它们会添加到微任务队列中。

  5. IntersectionObserver：这是一个API，用于检测目标元素是否进入视口，如果进入，它会产生一个微任务。

事件循环的工作原理

当一个新的任务被添加到事件循环中时，它会按照以下顺序执行：

  1. 执行当前宏任务队列中的任务。
  2. 执行当前微任务队列中的所有任务。
  3. 重复步骤1和2，直到宏任务和微任务队列都为空。

这个过程会持续进行，直到所有任务都执行完毕。微任务通常在宏任务之后立即执行，但有时它们也可能在某些情况下提前执行。

了解宏任务和微任务对于编写高效的JavaScript代码非常重要，尤其是在处理异步操作时。通过合理地使用这两种任务，可以优化代码的执行顺序和性能。

Canvas

HTML5的Canvas元素是一个HTML5的API，它提供了一个画布，允许使用JavaScript在网页上绘制图形和动画。Canvas元素通常与JavaScript一起使用，以实现动态的图形和动画效果。以下是Canvas元素的一些基本特性和使用方法：

  1. 基础结构：

    • 创建一个Canvas元素：在HTML文档中添加一个<canvas>标签，并设置其宽度和高度属性。
    <canvas id="myCanvas" width="800" height="600"></canvas>

  2. 获取上下文：

    • 通过Canvas元素的getContext方法获取一个2D绘图上下文。
    var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

  3. 绘制基础图形：

    • 绘制点、线、矩形、圆形等基本图形。
    ctx.fillRect(100, 100, 50, 50); // 绘制一个填充矩形
ctx.strokeRect(150, 150, 50, 50); // 绘制一个边框矩形
ctx.beginPath();
ctx.arc(300, 300, 50, 0, Math.PI * 2); // 绘制一个圆形
ctx.fill(); // 填充图形
ctx.stroke(); // 绘制边框

  4. 绘制文本：

    • 在画布上绘制文本。
    ctx.fillText('Hello, Canvas!', 200, 200);

  5. 绘制路径：

    • 使用路径（Path）来绘制复杂的图形。
    ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.closePath();
ctx.fill(); // 填充路径

  6. 使用样式和效果：

    • 设置线宽、线型、填充颜色等样式属性。
    • 应用阴影、透明度、旋转、缩放等效果。

  7. 图像处理：

    • 将图像绘制到画布上。
    • 可以使用ImageData对象来操作图像像素数据。

  8. 动画和交互：

    • 通过循环和定时器创建动画效果。
    • 添加事件监听器，响应用户交互。

Canvas元素是HTML5中的一个强大工具，它为网页提供了丰富的图形和动画功能。通过Canvas，开发者可以创建各种视觉效果，如游戏、数据可视化、图像编辑器等。

WebGL

WebGL（Web Graphics Library）是一个用于在网页上渲染2D和3D图形的JavaScript API。它使用HTML5的Canvas元素作为画布，并利用OpenGL ES 2.0 API进行图形渲染。

WebGL渲染流程大致可以分为以下几个步骤：

  1. 环境初始化：

    • 创建一个Canvas元素作为绘图的画布。
    • 获取WebGL上下文，并配置其属性，如颜色、深度测试等。
    • 创建一个着色器程序，包括顶点着色器和片元着色器，用于定义图形的绘制规则。

  2. 数据准备：

    • 创建顶点缓冲区（Vertex Buffer Objects, VBOs），用于存储顶点数据。
    • 创建索引缓冲区（Index Buffer Objects, IBOs），用于存储顶点索引，以定义图形的形状。
    • 配置顶点属性，如位置、颜色、纹理坐标等。

  3. 绘制准备：

    • 绑定着色器程序到WebGL上下文。
    • 绑定顶点缓冲区和索引缓冲区。
    • 配置视口、投影矩阵和模型视图矩阵，用于确定如何将3D空间中的物体映射到2D屏幕上。

  4. 绘制操作：

    • 使用WebGL API调用，如drawArrays或drawElements，来执行实际的绘制操作。
    • 这些API会根据配置的顶点数据和着色器程序，生成最终的图像。

  5. 后处理：

    • 如果需要，可以执行后处理操作，如应用滤镜、变换等。
    • 完成后，将渲染结果发送到Canvas元素，用户就可以看到最终的图形。

WebGL渲染流程的核心是着色器程序的编写，它定义了如何将顶点数据转换为最终的像素数据。

开发者需要熟悉OpenGL ES 2.0的着色器语言，以及如何使用WebGL API来控制图形渲染过程。

由于WebGL的渲染过程涉及到复杂的图形学知识，对于初学者来说可能有些难度。但是，通过学习和实践，可以逐渐掌握WebGL的开发技巧，并利用它创建出丰富的2D和3D图形效果。

这些过程是网络通信和Web开发中的基础知识点，对于理解网络协议和Web工作原理非常重要。

three.js+cannon.js小试牛刀

<!DOCTYPE html>
<html class="fullscreen" lang="zh-CN">
  <head>
	<title>three.js+cannon.js Web 3D</title>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<meta name="renderer" content="webkit">
	<meta name="force-rendering" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">
	<meta data-rh="true" name="keywords" content="three.js,JavaScript,canon.js">
	<meta data-rh="true" name="description" content="three.js+cannon.js Web 3D">
	<meta data-rh="true" property="og:title" content="THREE.JS and CANON.JS">
	<meta data-rh="true" property="og:url" content="">
	<meta data-rh="true" property="og:description" content="three.js+cannon.js Web 3D">
	<meta data-rh="true" property="og:image" content="">
	<meta data-rh="true" property="og:type" content="article">
	<meta data-rh="true" property="og:site_name" content="">
    <link rel="icon" href="">
    
    <style>
	
		.fullscreen {
		  margin: 0px;
		  padding: 0px;
		  width: 100vw;
		  height: 100vh;
		  overflow: hidden;
		}

		html, body {

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

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

相关文章

【十二】图解mybatis日志模块之设计模式

【十二】图解mybatis日志模块之设计模式

图解mybatis日志模块之设计模式 概述 最近经常在思考研发工程师初、中、高级工程师以及系统架构师各个级别的工程师有什么区别&#xff0c;随着年龄增加我们的技术级别也在提升&#xff0c;但是很多人到了高级别反而更加忧虑&#xff0c;因为it行业35岁年龄是个坎这是行业里的共…
阅读更多...
【轻松搞定形象照】助你打造编程等级考试、竞赛专属二寸靓照，报名无忧，展现最佳风采！

【轻松搞定形象照】助你打造编程等级考试、竞赛专属二寸靓照，报名无忧，展现最佳风采！

更多资源请关注纽扣编程微信公众号 ​ 在数字化时代&#xff0c;拍照似乎变得轻而易举&#xff0c;但当我们需要一张特定规格的一寸照片时&#xff0c;事情就变得复杂起来。随着编程等级考试和各类信息学竞赛的日益临近&#xff0c;不少考生都为了一张符合要求的一寸照片而忙…
阅读更多...
2.2 OpenCV随手简记（三）

2.2 OpenCV随手简记（三）

图像的阈值处理定义 &#xff1a;将图像转化为二值图像&#xff08;黑白图&#xff09;, 也可以用于彩色图形&#xff0c;达到夸张的效果 目的&#xff1a;是用来提取图像中的目标物体&#xff0c;将背景和噪声区分开&#xff08;可以近似的认为除了目标全是噪声&#xff09;。…
阅读更多...
Capto 标准版【简体中文+Mac 】

Capto 标准版【简体中文+Mac 】

Capto 是一套易于使用的屏幕捕捉、视频录制和视频编辑 Capto-capto安装包-安装包https://souurl.cn/DPhBmP 屏幕录制和教程视频制作 记录整个屏幕或选择的任何特定区域。在创建内容丰富的教程视频时选择显示或隐藏光标。无论您做什么&#xff0c;都可以确保获得高质量的视频。…
阅读更多...
C# WinForm —— 24 Threading.Timer 组件介绍与使用

C# WinForm —— 24 Threading.Timer 组件介绍与使用

1. 简介 System.Threading.Timer 多线程 轻量级 精度高 提供以指定的时间间隔对线程池线程执行方法的机制 和System.Timers.Timer 类似&#xff0c;每隔一段时间触发事件&#xff0c;执行操作(不是由UI线程执行的)&#xff0c;即使事件中执行了比较耗时的操作&#xff0c;也…
阅读更多...
教育新基建背景下的光网校园：安徽中澳科技职业学院以太全光网建设之路

教育新基建背景下的光网校园：安徽中澳科技职业学院以太全光网建设之路

作者/安徽中澳科技职业学院 网络中心 刘正峰 安徽中澳科技职业学院隶属于安徽省科技厅,是一所公办高等职业院校。学院在“德厚三分,技高一筹”的校训指引下,坚持“开放性、精品化、技能型”的发展理念,坚持“贴近市场需求、强化实践教学、突出办学特色、培养实用人才”的办学思…
阅读更多...
一款高效办公软件及48个快捷键

一款高效办公软件及48个快捷键

君子生非异也&#xff0c;善假于物也。 一天&#xff0c;技术同事亲自操刀要撰写一篇公号文档&#xff0c;于是问我需要什么样的排版格式&#xff1f; 我很快甩了一篇《水经注文档排版规范》给对方。 片刻之后&#xff0c;同事觉得这样写文档的效率太低&#xff0c;于是说要…
阅读更多...
视频修复工具助你完成高质量的视频作品！

视频修复工具助你完成高质量的视频作品！

在短视频发展兴起的时代&#xff0c;各种视频层出不穷的出现在了视野中&#xff0c;人们已经从追求数量转向追求质量。内容相同的视频&#xff0c;你视频画质好、质量高的更受大家欢迎&#xff0c;那么如何制作高质量、高清晰度的视频呢&#xff1f;与您分享三个视频修复工具。…
阅读更多...
【小白向】微信小程序解密反编译教程

【小白向】微信小程序解密反编译教程

# 前言 最近笔者有做到微信小程序的渗透测试&#xff0c;其中有一个环节就是对微信小程序的反编译进行源码分析&#xff0c;所谓微信小程序反编译&#xff0c;就是将访问的小程序进行反向编译拿到部分源码&#xff0c;然后对源码进行安全审计&#xff0c;分析出其中可能存在的…
阅读更多...
Docker基础篇之Docker容器数据卷

Docker基础篇之Docker容器数据卷

文章目录 1. Docker配置容器卷配置时的一个建议2. Docker容器卷目录3. Docker容器卷案例 1. Docker配置容器卷配置时的一个建议 Docker挂载主机目录访问如果出现cannot open directory.:Permission dnied 解决方法&#xff1a;在挂载目录后加一个–privilegedtrue 如果是Cento…
阅读更多...
动手学深度学习4.8 数值稳定性和模型初始化-笔记练习（PyTorch）

动手学深度学习4.8 数值稳定性和模型初始化-笔记练习（PyTorch）

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;14 数值稳定性 模型初始化和激活函数【动手学深度学习v2】_哔哩哔哩_bilibili 本节教材地址&…
阅读更多...
C语言指针用法完善篇

C语言指针用法完善篇

一&#xff0c;指针定义&#xff1a; 1&#xff0c;讲解 指针变量用来记录地址数据&#xff0c;没有记录有效地址的指针变量不可以使用。 定义一个变量A和一个指针B,此时变量A存放在内存1000区间&#xff0c;将变量A赋值给指针变量B&#xff0c;此时指针变量B所接收到的并不是…
阅读更多...
冯喜运：6.3黄金原油晚间最新行情及独家操作策略指导

冯喜运：6.3黄金原油晚间最新行情及独家操作策略指导

【黄金消息面分析】&#xff1a;在全球经济的波动和不确定性中&#xff0c;黄金作为传统的避险资产&#xff0c;其价格走势和市场分析一直是投资者关注的焦点。本周一&#xff08;北京时间6月3日&#xff09;&#xff0c;现货黄金价格基本持平&#xff0c;交易商正在等待本周公…
阅读更多...
Leecode---技巧---颜色分类、下一个排列、寻找重复数

Leecode---技巧---颜色分类、下一个排列、寻找重复数

思路&#xff1a; 遍历一遍记录0,1,2的个数&#xff0c;然后再遍历一次&#xff0c;按照0,1,2的个数修改nums即可。 class Solution { public:void sortColors(vector<int>& nums){int n0 0, n1 0, n2 0;for(int x: nums){if(x0) n0;else if(x1) n1;else n2;}for…
阅读更多...
机器学习第十一次课

机器学习第十一次课

前言 从现在开始进入神经网络的领域了 正文 先是一段历史介绍,这个就跳过吧,我觉得这里最重要的就是反向传播这里 反向传播 反向传播&#xff08;Backpropagation&#xff09;是一种训练人工神经网络的算法&#xff0c;它通过计算损失函数关于网络参数的梯度来调整网络参数…
阅读更多...
MySQL事务与并发控制案例

MySQL事务与并发控制案例

目录 1. MySQL在事务与并发控制情况下加锁案例实现 2. 锁超时或死锁怎么办&#xff1f; 1. MySQL在事务与并发控制情况下加锁案例实现 第一步&#xff1a;开启一个事务并发锁 第二步&#xff1a;对加X锁&#xff08;排他锁&#xff09;的数据进行操作 可以看到锁被阻塞了&am…
阅读更多...
YOLOv10训练教程—用YOLOv10训练自己的数据集

YOLOv10训练教程—用YOLOv10训练自己的数据集

文章目录 YOLOv10简介亮点模型介绍 下载源码环境配置准备数据集训练模型&#xff1a;命令行py文件 验证模型推理参考文献 ✨✨✨✨立志真正解决大家问题&#xff0c;只写精品博客文章&#xff0c;感谢关注&#xff0c;共同进步✨✨✨✨ YOLOv9还没捂热乎&#xff0c;YOLOv10就推…
阅读更多...
初中英语优秀作文分析-003My Favorite Movie Type-我最喜欢的电影类型

初中英语优秀作文分析-003My Favorite Movie Type-我最喜欢的电影类型

PDF格式公众号回复关键字:SHCZYF003 记忆树 1 I’d like to share my favorite movie type with you. 翻译 我想和你分享我最喜欢的电影类型。 简化记忆 电影类型 句子结构 I 主语 我&#xff0c;would 情态动词 愿意做某事&#xff0c;like 谓语 喜欢&#xff0c;to sha…
阅读更多...
zynq-7015启动分析及裸机BootLoader编写(未完待续)

zynq-7015启动分析及裸机BootLoader编写(未完待续)

使用lwip-tcp远程对QSPI进行更新、QSPI FLASH启动 W25Q128资料&#xff1a; W25Q128JV datasheet(1/78 Pages) WINBOND | 3V 128M-bit serial flash memory with dual/quad spi (alldatasheet.com) UG585资料&#xff1a; Zynq 7000 SoC Technical Reference Manual-UG585 翻译…
阅读更多...
SQL进阶day9————聚合与分组

SQL进阶day9————聚合与分组

目录 1聚合函数 1.1SQL类别高难度试卷得分的截断平均值 1.2统计作答次数 1.3 得分不小于平均分的最低分 2 分组查询 2.1平均活跃天数和月活人数 2.2 月总刷题数和日均刷题数 2.3未完成试卷数大于1的有效用户 1聚合函数 1.1SQL类别高难度试卷得分的截断平均值 我的错误…
阅读更多...
最新文章

Copyright @ 2022~2023