摘要： 其实在3D引擎/库的帮助下，我们做webgl开发的难度已经很大大地降低了，熟悉相关API的话，开发一个简单的3D程序可以说是很轻松的事情。 在我看来，webgl的核心就是着色器(顶点着色器、片元着色器)，这两者决定了如何在屏幕上绘制出我们想要的效果。所以，无论你是刚入门的3D开发者(我也是刚刚探索3 阅读全文

摘要： 我们常常会听说什么栈内存、堆内存，那么他们到底有什么区别呢，在js中又是如何区分他们的呢，今天我们来看一下。 一、栈内存和堆内存的区分 一般来说，栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、Undefined、Null...以及对象变量的指针，这时候栈内存给 阅读全文

摘要： 我们知道js执行环境有全局环境（window）和局部环境（一般指函数环境）之分。 上述代码，虽然有两个num变量，但是他们所在的执行环境却是不同的，第一个num执行环境是全局执行环境（window），第二个执行环境是函数执行环境（calc函数）。 某个执行环境中的所有代码执行完毕后，该环境被销毁，保 阅读全文

摘要： 一、原型继承父类的实例 控制台输出： 标注： ①注意这里的子类原型指向一个父类的实例（引用传递），那么这块的父类实例就是内存中的一块地址，以后所有的子类实例都会有一个原型属性指向这块地址，并且子类A对这块地址中数据更改也会影响到子类B。 图示： 所以你可以看到，instance1.name是从父类实 阅读全文

摘要： 看了网上多篇关于tween的使用教程，基本上千篇一律，大多数的写法都是像下面这样： 正如你所见到的，我们会在每个补间变化的时候（其实就是position变化的时候），取出当前值对模型进行一定的更改。 我一直好奇，为什么onUpdate回调里面的this是一个{y:0.768}这样的数据，不应该是tw 阅读全文

摘要： 第2章：在html中使用javascript ①script标签的defer属性 这个属性的用途是表明脚本在执行时不会印影响页面的构造（立即下载，延迟执行），整个页面都解析完毕后再按顺序运行。（放在dom前面依旧会阻塞页面加载） ②script标签的async属性 立即下载，但是执行顺序并不保证按照 阅读全文

摘要： 近期因为使用inline-block，在项目部署后出现了一点小问题，几番解决未果，遂使用flex布局，于是借此机会对flex布局的用法做一个简要的汇总。 遇到的bug如下： 本想两个div使用inlin-block，父元素text-align属性值为右对齐，从而实现两个图标右对齐挨在一起，本地没问题 阅读全文

摘要： 看这篇博客，默认你已经知道了3D模型实现三维空间内旋转的实现方式（矩阵、欧拉角、四元数）。 ok，下面正式切入主题，房门的打开和关闭，先上图： 正如你所看到的那样，这个“房门”已经被打开了。 一、three.js中物体的旋转 这是three.js为object3D类（基本上所有的物体都是继承自这个类 阅读全文

摘要： 先来了解一下四元数的基本概念。 一、复数的概念 高中数学中有说到复数的概念，什么是复数呢？ 百度百科奉上：https://baike.baidu.com/item/%E5%A4%8D%E6%95%B0/254365?fr=aladdin 基本上你只需要了解，复数这玩意儿长这样： z = a + bi 阅读全文

摘要： 一、鼠标控制模型旋转 实质的根据鼠标移动前后的位置比较得出x，y轴的旋转角度； 图中是一个屏幕，有一个模型（恩，他是一个模型），鼠标由P点移动到P1点，我们假定移动单位步长旋转β角度； P（x1,y1） >P1（x2,y2），x轴移动（x2-x1），y轴移动（y2-y1），所以x轴旋转 （x2-x1 阅读全文

摘要： 书中340页，开始讲到层次模型（关节模型），也就是整个物体，可以自由控制其各部位单独运动，就像关节一样，互不干扰或者有一定关联。 就像图中，左右键控制整个物体（arm1和arm2）的Y轴旋转，上下键控制arm2的X轴旋转。 如果你只是扣教程上的字眼的话，会指出上面这句话是错的，但是如果你理解了教程中 阅读全文

摘要： 之前的所有案例中物体都是静止的并且是平行光照射，这里我们来讨论一下运动物体和点光源。 一、运动物体 我们知道对于一个提供原始顶点坐标和原始顶点法向量数据的着色器绘制出来的图形看上去是这样的： 看上去很有立体感，但是如果把颜色去掉之后： 立体感全无，这是因为没有对光线做出反映。 通过前面的学习，我们知 阅读全文

摘要： 注意点： ①通过矩阵处理position 模型矩阵：物体的运动（平移、旋转、缩放）； 视图矩阵：设置人的视角，也就是第一人称视角； 透视投影矩阵：处理物体的远近，远的物体小，近的物体大； ②开启隐藏面消除 因为webgl渲染的图形的时候，同一个像素点上，后一个绘制的会把前一个绘制的遮盖； 开启隐藏面 阅读全文

摘要： 相对于之前的为正方形添加单个纹理来说，多了一些变化，文中已经用红字标出： ①片元着色器中新增一个取样器，并且main方法输出的颜色是这两个取色器颜色的乘积； ②用两个纹理对象来加载纹理，并且启用不同的纹理单元（gl.TEXTURE0、gl.TEXTURE1）；配置好参数后将纹理传递给对应的纹理单元 阅读全文

摘要： 注意： ①每个顶点着色器数据（-0.5, 0.5, 0.0, 1.0）前两个表示webgl的坐标系，后两个表示纹理坐标系； ②顶点着色器需要传入两个参数数据源a_Position、a_TexCoord，分别代表webgl顶点坐标和纹理坐标； ③对于纹理坐标，无论是顶点坐标系输入输出（a_TexCoo 阅读全文