Threejs系列：灯光
本文介绍threejs中的灯光相关设置threejs中的光照配置的标配： 环境光 + 光源
环境光： 无处不在的光
// 环境光
const envLight = new THREE.AmbientLight('white', 1)
scene.add(envLight)
注意：不添加环境光，物体设置的颜色无法显示。
点光源
// 灯光配置
const pointLight = new THREE.PointLight(0xffffff,1, 1000)
pointLight.position.set(2, 3, 2)
pointLight.castShadow = true
scene.add(pointLight)
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize, 'white' );
scene.add( pointLightHelper );
注意， 此处我们还加了一个helper帮助显示光源位置
创建物体和地面
// 物体
...
Threejs系列：相机
本文主要研究一下threejs中的相机threejs中的相机：
ArrayCamera：包含着一组子摄像机，常用于多人同屏的渲染，更好地提升VR场景的渲染性能
StereoCamera：双透视摄像机（立体相机），常用于创建 3D 立体影像，比如 3D 电影之类或 VR
CubeCamera：有6个渲染，分别是立方体的6个面，常用于渲染环境、反光等
OrthographicCamera：正交相机，在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。
PerspectiveCamera：透视相机，这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
透视相机语法：PerspectiveCamera( fov, aspect, near, far )fov：摄像机视锥体垂直视野角度aspect：摄像机视锥体长宽比，一般设置为Canvas画布宽高比width / heightnear：摄像机视锥体近端面far：摄像机视锥体远端面，far-near构成了视锥体高度方向
...
Canvas系列: 基本使用
本文记录一些基本的操作基本图形绘制
具体代码：
c.beginPath()
c.arc(300, 200, 100, 0, 2 * Math.PI)
const g = c.createLinearGradient(0, 0, 600, 400)
g.addColorStop(0, 'green')
g.addColorStop(1, 'red')
c.fillStyle = g
c.fill()
c.stroke()
c.closePath()
c.beginPath()
c.arc(250, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.arc(350, 150, 20, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.ellipse(300, 200, 10, 30, 0, 0, 2 * Math.PI)
c.stroke()
c.closePath()
c.beginPath()
c.moveTo(250, 300)
...
Canvas系列：windows泡泡屏保
本文尝试用原生canvas实现windows的泡泡屏保效果，基于vue3框架最终效果如下：
首先html代码创建一个canvas画布
<div class="steam">
<canvas width="360" height="520"></canvas>
</div>
...
...
// 页面挂载完毕后，依次执行画布和circle初始化
onMounted(() => {
initCanvas()
createCircles()
})
const initCanvas = () => {
const canvas: any = document.querySelector('canvas')
c = canvas.getContext('2d')
canvas.onmousemove = (e: any) => {
moveInfo.x = e.x
moveInfo.y = e.y
moveInfo.actualX = moveInfo.x - canvas.get ...
Games-104: 第一回
本系列文章，是围绕Game-104课程的内容，做的备忘录及自己的一些想法游戏的伟大之处在于，他在尝试模仿上帝的行为。任何游戏引擎的核心，看俩函数：tickLogic、tickRender。前者用于计算obj的各种状态，后者用于绘制出来。这里的tick，可以理解为时间片。我们说动画的理论基础是：人是靠视觉残留感知一个连续世界的。在之前介绍屏幕刷新率中我们有解释过，对于人眼而言，若一秒钟闪24张图片，那么人眼就认为是连续的。即使是我们正常浏览网页，看起来页面是没有在动的，但实际上却在以屏幕刷新率的闪动频率不停的变化着。那么游戏引擎的基石也是如此。需要在每一帧的时间间隔内完成上面的俩函数的绘制。在tick1时刻，张三静止，tick2时刻张三挥拳打了李四，李四掉了五点血（假定在这个区间内完成），ticklogic做的事情是计算拳头、李四等obj的各个状态，确定之后，重新render生成新的帧绘制出来。
而也就是这两部分，决定了不管是软件还是web应用的性能。
算法：动态规划
本文介绍一种经典的算法思想：动态规划
官方文邹邹定义：将一个问题拆成几个子问题，分别求解这些子问题，即可推断出大问题的解。个人理解：未来取决于当下，脱钩于过去使用DP的场景：能将大问题拆成几个小问题，且满足无后效性、最优子结构性质。
经典算法必须有经典场景：斐波那契数列。这种数列的一个最大特点： 初始值：f(1) = 1, f(2) = 1,之后的每一项都是前两项的和。所以f(3) = f(1) + f(2) = 2….
1. 爬楼梯爬楼梯的方式有两种，一次一级或者两级，那么跳到n级，有多少种跳法？实际就是一个斐波拉契数列，f(1) = 1, f(2) = 1…
const climbStairs = function(n) {
if (n <= 1) return 1
const f = [1,2]
for (let i = 2; i < n; i++) {
f[i] = f[i-1] + f[i-2]
}
return f ...
算法：大数相加
js的大数相加所遇到的问题这里只需要明确一点，就是思路。两数相加很简单：
return a + b
如此这般，最后的结果： 1e3之类。
正确的思路应该是用指针遍历，进位累加即可。
响应常用状态码
本文记录一些常用状态码1xx：
100: 请求已被处理，需要客户端继续发送请求。例如post。
2xx：请求成功。
200: 请求成功，返回数据
204: 请求成功，无数据
3xx：重定向
301: 永久
302: 暂时
304: 协商缓存
4xx：客户端错误
401: 未授权，要求身份验证
403: forbidden
404: not-found
5xx：服务器错误
500: 服务器遇到错误，无法完成请求。
502: 网关错误
503: 停机维护服务器无法使用
算法：递归
本文介绍递归思想先看一道经典的题：
全排列// 非重复数字：
/**
* @param {number[]} nums
* @return {number[][]}
*/
var permute = function(nums) {
let res = []
let used = new Array(nums.length).fill(0)
const f = (n1) => {
if(n1.length === nums.length) {
// let temp = JSON.parse(JSON.stringify(n1))
res.push([...n1])
// 此处发现一个很懵逼的问题，若写成res.push(n1),结果居然都为空。。。
}
for(let i = 0; i < nums.length;i++) {
...