Web - 分类

创建三维图形

点成线，线成面。利用预设好的x,y值来初始化点，再将各坐标点连线就能构成一个平面图形。因为是在一个平面上，所以各个点的z值是相同的，只需要定义好x,y坐标的值即可。Demo创建坐标点：设置每个点的消失点和中心点：将坐标点依次连线（连线的时候每个点的x,y值都是经过透视图计算的，因为是在三维里，所以不是用之前定义好的坐标）：使用三角形所有的三维图形在绘制前都会简化为一个三角形集合。使用三角形的好处：...

3 年前 Web

三维坐标旋转

二维的坐标旋转绕Z轴旋转，物体只有x、y坐标会变化（风车旋转），三维中还可以绕x和y轴旋转。绕x轴旋转：只有y、z坐标会变化（轮胎滚动）。绕y轴旋转，只有x，z坐标会变化（唱片机）。旋转公式二维：三维绕x轴：三维绕y轴：模拟三维坐标旋转Demo...

3 年前 Web

三维Z轴、透视图

Z轴除X，Y轴外，三维存在另外一个维度：深度，用Z表示。右手坐标系统：Z轴数值越大表示物体远离观察者，反之接近观察者。左手坐标系统：Z轴数值越大表示物体接近观察者，反之远离观察者。透视图三维中，尽管两个物体有相同的xy坐标，但是由于深度（z）不一样，所以会在不同的位置，透视图可以知道应该把物体放到哪个位置。物体的远离（Z轴增加），X和Y向消失点移动。因为缩放比例和接近消失点的比例相同，所以根据距...

3 年前 Web

Canvas 3D 云

...

3 年前 Web

动画-物体运动需要用到的力

一个正在运动的物体，会有一个速度，且是一个指定方向的速度（速度向量），它可以是匀速或者加速。除了速度，还可能会有阻力/摩擦力，比如空气的阻力，阻力会让速度逐渐变慢直到物体停止运动。当物体碰撞到墙壁或者其他物体时，会有一个弹力。物体由于地球的吸引而受到的力叫重力，它的方向总是竖直朝下的。速度向量 vx / vy与速度的区别是，速度向量会有一个方向，就是朝哪个方向运动的速度，在 canvas 的...

3 年前 Web

CSS3 实现全景图浏览效果

Demo实现思路利用 CSS3 做出一个 3D 立方体。在立方体的6个面设置目标图片（利用Pano2VR 或者类似的全景工具导出的图片，一共有6张）。使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。注：页面使用了ES6，浏...

3 年前 Web

实现 AMD 模块加载器

只处理了两个模块直接循环依赖，还没有解决模块间间接循环依赖的问题。...

3 年前 Web

设计模式 - 单例模式

单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例，这个类称为单例类，它提供全局访问的方法。单例模式是一种对象创建型模式。单例模式又名单件模式或单态模式。特点某个类只能有一个实例。它必须自行创建这个实例。它必须自行向整个系统提供这个实例。适用场景系统只需要一个实例对象，如系统要求提供一个唯一的序列号生成器，或者需要考虑资源消耗太大而只允许创建一个对象。客户调用类的单个实例只允...

4 年前 Web