创建三维图形

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

三维坐标旋转

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

三维Z轴、透视图

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

React Native IOS 开发笔记

记录遇到的问题以及如何解决。问题创建 React Native App 有两种方式, 一种使用 npm install create-react-native-app -g 安装,通过 create-react-native-app 命令来初始化你的应用。特点是:这种方式官方说是不需要安装 Xcode 或者 Android Studio,也不需要配置任何工具来构建代码,只要在手机安装 Expo 客...

Canvas 实现 3D 云朵

页面使用了ES6,必须开启相关的功能才可以看到效果。Chrome 打开 chrome:flags 启用 Experimental Web Platform featuresDemo实现代码...

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

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

进制之间的转换

其它进制数 => 十进制将目标进制数按从低位到高位(即从右往左)计算,第0位的权值是目标进制数的0次方,第1位的权值是目标进制数的1次方,第2位的权值是目标进制数的2次方,依次递增下去,把最后的结果相加的值就是十进制的值了。parseInt(string, radix)解析一个字符串,并返回一个整数。string - 必需。要被解析的字符串。radix - 可选。表示要解析的数字的基数。该值介于2...

常用的三角函数方法

角度与弧度之间换算正弦Math.sin - 对边与斜边的比率余弦Math.cos - 邻边与斜边的比率正切Math.tan - 对边与邻边的比率反正弦/反余弦/反正切Math.asin/Math.acos/Math.atan - 正弦余弦正切的逆运算,输入一个比率可获得对应的角的弧度还有个 Math.atan2 ,根据传入的y,x参数计算弧度...