Threejs系列：第二回（(基础组件及三方模块）
本文继续探索threejs，简单介绍几个基础组件,及如何将第三方软件绘制的模型导入。1. 我们希望他能够跟随鼠标的方向进行转动，如何实现？
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
...
...
// 设置轨道,实现鼠标拖动效果
setOrbit() {
this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
// 搭配阻尼，效果更佳
this.orbit.enableDamping = true
},
2. 为了直观的研究坐标体系，我们就得先直观的看到。如何实现？代码如下：
// 添加坐标轴
setAxes() {
this.axesHelper = new Three.AxesHelper(500)
this.axesHelper.setColors('red','green','ora ...
Threejs系列：第一回
本文简单介绍threejs的基本内容。开宗明义three.js官方定义的三大要素：场景（scene）、相机（camera）、渲染器（render）。我觉得还得加上一个物体（内容）。本文以一个简单的球形案例带大家一起入个门。（基于vue2）
首先html骨架代码，很简单：
<template>
<div class="circleEarth-container flex-cc">
<div id="container" ref="container" class="container"></div>
</div>
</template>
JS完整代码
const container = this.$refs['container']
let scene = new Three.Scene()
const geometry = new Three.SphereBufferGeometry(60, 40, 40)
const material = new Three.MeshStanda ...
webgl系列：概览
本文简单介绍webgl基础什么是webgl
WebGL可以直接与HTML5标签Canvas进行集成，并且可以通过GPU来执行高性能图形计算。总结一下，WebGL的本质 —— JavaScript操作OpenGL接口。
那么什么是OpenGL？
OpenGL 通过为 3D 图形渲染的基本操作提供简单、直接的接口来满足这些标准。它支持点、线段、多边形和图像等基本图形基元，以及仿射和投影变换和光照计算等基本渲染操作 。它还支持高级渲染功能，例如纹理映射和抗锯齿。
看我专栏的因该都知道paperjs这个二维图形库, 所以OpenGL基本可以理解为三维层面的图形库。
Webpack系列：第六回
本文浅谈webpack的热更新机制啥是热更新？当我们对已经在运行的程序代码做些许修改时，页面能够自动的局部刷新，这就是热更新机制
如何实现的？
初次打包： 编译打包，生成bundle.js，然后开启一个静态资源服务器，根据对应的地址打开页面
开启热更新时改动代码：webpack重新编译 > 根据变化的内容生成俩文件：manifest.js及chunk.js，通过HMRserver主动推送给浏览器（本质一个websocket通信），浏览器根据manifest.js文件获取变化的内容，重新render。
注： bundlejs中除了自己写的模块代码，还包含了HMR-runtime
坦克大战：第二回
本文介绍第一回中主要功能的具体实现坦克类坦克实例对象初始化时，会绘制自身躯体，由三部分组成：坦克底座（Path.Rectangle）、炮塔（Path.Circle）及炮管（Path）,具体代码如下：
init() {
this.path = new paper.Group({
children: [
// 炮身
new paper.Path.Rectangle({
name: 'base',
center: this.position,
size: new paper.Size(SIZE),
strokeColor: this.color
}),
// 炮管
new paper.Path({
name: 'turret',
segments: [this.position, this.position.add(this.direction)],
strok ...
坦克大战：第一回
本文简单介绍一个小游戏：坦克大战，基于paperjs开发
满满的压迫感。
目前该版本的基本功能：
按键控制坦克的移动，鼠标左键射击。
随机生成的NPC（enemy），自动定位player的位置，无限逼近。
炮塔能够随着鼠标方向转动。
地图边界限制，player不会越界。
效果如下：
初始化我们的坦克initRole() {
const position = new paper.Point(this.WIDTH / 2, this.HEIGHT / 2)
const end = new paper.Point(position.x, position.y - 50)
const direction = end.subtract(position)
this.tank = new Tank(position, 'white', direction)
},
Tank类的入参有三个，分别是随机位置，坦克颜色，以及当前随即方向。坦克类完整代码如下：
/*
* @Author: Hhvcg
* @Date: 2023-03-01 14 ...
性能的考量：NMS过滤算法
本文将详细的介绍一个算法思路NMS。详细的业务场景：
我们需要把后端返回的点数据，画到canvas中的大圆上。数据量较少的情况下比如几千个，那完全不需要用算法去做筛减。但是设想一下。后端返回了数万甚至是百万级别的点数据如何？在之前介绍浏览器图形化编程极限的时候，我们详细测试过，目下的谷歌浏览器，10000个图形绘制几近极限（注意,是需要支持拖拽缩放等操作时页面流畅的最大图形个数）。这个时候，我们就需要对点数据作筛减。
理由： 没必要显示那么多，同时目下浏览器也扛不住。
具体实现：
我们会给画布上图形个数，设定一个阈值K。将wh区域划分成一个个格子区域。为了最终限制在500，即wh / 500 = T，每个区域面积T中，最多输出1个。即可保证总输出的个数<= 500。
根据宽高数值，将画布按照一定的尺寸网格化，最后输出一个grid三维数组。分别表示行、列及各自一块区域内的所有缺陷得集合数组。
业务场景代码举例：
console.log('过滤前>>>', defects)
console.log('viewRange>>>', viewRange)
c ...
网络协议相关
UDP与TCP的区别到底是啥？说人话
二者都是传输层的协议，但是，后者提供的是面向连接的、可靠的传输服务。而前者提供的，是不可靠的服务。
为什么？
传输过程中出现丢包，UDP不负责重发
包的到达顺序出现乱序，没有纠错功能。
收到包原样发出去，即使网络拥堵也这德行。所以不支持流量控制。
双人打僵尸系列：第一回
本文开始，我们将尝试借助paperjs的能力，尽可能完善的写一个童年小游戏： “双人打僵尸”该游戏的名字听起来有点low，且功能不算复杂，但确实是我印象最为深刻的一款游戏，操作简单，很耐玩。归纳一下我们的需求：
按键控制角色移动。
角色可以切换枪械武器进行射击，枪械不同，打出的子弹及对应的伤害也不尽相同。
游戏为关卡制度，随着关卡级别越高，怪物的数量也会越多，同时还会出现血量值更高的boss怪。
怪物只能从地图的上下两个口出来，随机涌现普通怪及boss怪。
玩家能够放置油桶或者白块充当阻碍。其中油桶受到攻击会爆炸，白块会被损毁。