1. 默认第一个参数如果不写就是从上到下的 2. 如果有第一个参数(top/left/bottom/right) 3. 使用角度也可以angle(角度值deg)进行控制 1. 可以使用英文字母进行颜色控制 2. 可以使用16进制#RRGGBB进行颜色控制 3. 可以使用16进制…

CSS3dObject这个对象，可以让我们像操作threejs对象那样来操作div，使用threejs丰富的api来实现css+div的3d效果。实际上最终效果就是把threejs的参数转化为css的matrix。我们看一段简单的代码，这是创建一个div元素，然后使用three…

Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D …

我们常见的坐标是平面坐标，x 轴和 y 轴，那么我们地图里面也有坐标，地理位置的坐标大家应该清楚，是经度和纬度，那么平面坐标和经纬度能转换吗，答案是能的~它们坐标的转换是基于一张地图的大小来转换的。我们通常处理位置坐标需要注意，百度地图里面识别的坐标为地理点坐标对象，一定要通过…

在webgl中处理图像其实也比较简单，我们先来画一个矩形，然后为这个矩形加上纹理（本例中就是一张图片）。渲染纹理需要使用纹理坐标而不是像素坐标，纹理坐标和顶点着色器需要的裁剪空间坐标类似，坐标范围始终是0.0到1.0。如果还不知道顶点找色器是什么可以看一下之前的文章——WebG…

这两天正在重新实现maptalks.js的三维变换逻辑， 需要从底层重新实现一遍三维投影转换的算法。 好在三维投影算法已有很成熟的实现范式， 我选择了THREE.js作为参考对象， 这篇文章也是我对THREE.js中矩阵转换关系的总结。 三维投影算法就是将上诉因素抽象为数学算法…

看了饿了么小小倩老师的canvas作品，心血来潮，学着做了个3D地球，也算是入坑WebGL了吧。之前有用过原生的canvas画2D的图形，这次则是用了Three.js和stats.js的3D框架，边学边练手，效果还算比较满意...毕竟第一次接触WebGL 代码还有很多不足，求大…

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…

对使用 JavaScript、HTML5 和 WebGL 技术开发 3D 游戏的开发者来说，JavaScript 3D 游戏引擎是当下的一个热门话题。基于浏览器的游戏的最大优势是跨平台，可以运行在 iOS，Android，Windows 或者其它系统平台上。 行业内使用 HTM…