文章里有相当多的用到中学数学中的知识，推导3d的几何模型是如何会知道2d平面中去的，最终利用推导出的结论编写代码，实现一个波纹的demo
项目地址：https://github.com/zz632893783/canvas-3d
npm install
npm run dev
之前所观测的B点是位于yz平面内，E点是位于xz平面内，但是如果是空间内任意位置的点呢
其实道理都是一样的，如下如
变换得
之前的推论到从z轴观察空间内任意位置的投影了，但是实际上A点是有特殊性的，因为它是位于z轴上的某一个点，其xy坐标都为0，如果A是空间内的任意一个点，情况又如何，请看下图
如下图
对于空间内任意位置，我们都可以看成是在z轴上的某一点A(0，0，zA)，先经历一次x轴方向的平移（此时投影H的y坐标不变），再经历一次y轴方向的平移（此时投影H的x坐标不变），平移之前点A观察到点G的投影H坐标可表示为
从空间内的任意点A(xA，yA，zA)观察空间内的任一点G(xG，yG，zG)，它在xy平面内的投影H的坐标为
<template>
<div class="cube">
<canvas ref="cube" v-bind:width="canvasWidth" v-bind:height="canvasHeight"></canvas>
</div>
</template>
<script>
export default {
data: function () {
return {
canvasWidth: 600,
canvasHeight: 400,
ctx: null,
visual: {
x: 0,
y: 0,
z: 300
},
pointMap: {
A: (-50, 50, 50),
B: (-50, 50, -50),
C: (50, 50, -50),
D: (50, 50, 50),
E: (-50, -50, 50),
F: (-50, -50, -50),
G: (50, -50, -50),
H: (50, -50, 50)
}
}
},
methods: {
init: function () {
this.ctx = this.$refs.cube.getContext('2d')
},
draw: function () {}
},
mounted: function () {
this.init()
this.draw()
}
}
</script>
绘制方法也很简单，分别绘制矩形ABCD，矩形EFGH，然后再将AE,BF,CG,DH连线即可，只不过这里的ABCDEFGH点需要换算成投影在三维坐标系xy平面上的点，运用我们之前得出的结论，我们定义一个转换坐标点的函数
transformCoordinatePoint: function (x, y, z, offsetX = this.canvasWidth / 2, offsetY = this.canvasHeight / 2) {
return {
x: (x - this.visual.x) * this.visual.z / (this.visual.z - z) + offsetX,
y: (y - this.visual.y) * this.visual.z / (this.visual.z - z) + offsetY
}
}
然后编写draw函数
draw: function () {
let point
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// 绘制矩形ABCD
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.A)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.B)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.C)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.D)
this.ctx.lineTo(point.x, point.y)
this.ctx.closePath()
this.ctx.stroke()
// 绘制矩形EFGH
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.E)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.F)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.G)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.H)
this.ctx.lineTo(point.x, point.y)
this.ctx.closePath()
this.ctx.stroke()
// 绘制直线AE
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.A)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.E)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线BF
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.B)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.F)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线CD
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.C)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.G)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线DH
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.D)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.H)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
}
查看代码运行结果
methods: {
init: function () {
this.ctx = this.$refs.cube.getContext('2d')
},
transformCoordinatePoint: function (x, y, z, offsetX = this.canvasWidth / 2, offsetY = this.canvasHeight / 2) {
return {
x: (x - this.visual.x) * this.visual.z / (this.visual.z - z) + offsetX,
y: (y - this.visual.y) * this.visual.z / (this.visual.z - z) + offsetY
}
},
draw: function () {
let point
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// 绘制矩形ABCD
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.A)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.B)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.C)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.D)
this.ctx.lineTo(point.x, point.y)
this.ctx.closePath()
this.ctx.stroke()
// 绘制矩形EFGH
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.E)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.F)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.G)
this.ctx.lineTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.H)
this.ctx.lineTo(point.x, point.y)
this.ctx.closePath()
this.ctx.stroke()
// 绘制直线AE
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.A)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.E)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线BF
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.B)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.F)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线CD
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.C)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.G)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
// 绘制直线DH
this.ctx.beginPath()
point = this.transformCoordinatePoint(...this.pointMap.D)
this.ctx.moveTo(point.x, point.y)
point = this.transformCoordinatePoint(...this.pointMap.H)
this.ctx.lineTo(point.x, point.y)
this.ctx.stroke()
this.ctx.closePath()
},
animationFrame: function () {
let rotationAngle = 1
window.requestAnimationFrame(() => {
for (let key in this.pointMap) {
let point = this.pointMap[key]
// 保存x,y,z坐标
let x = point[0]
let y = point[1]
let z = point[2]
// 变换后的x坐标
point[0] = x * Math.cos(rotationAngle / 180 * Math.PI) - z * Math.sin(rotationAngle / 180 * Math.PI)
// 绕y轴旋转，y左边不会发生变化
point[1] = y
// 变换后的z坐标
point[2] = z * Math.cos(rotationAngle / 180 * Math.PI) + x * Math.sin(rotationAngle / 180 * Math.PI)
}
this.draw()
this.animationFrame()
})
}
},
mounted: function () {
this.init()
this.animationFrame()
}
代码运行效果
波浪是由若干条正弦函数组成的，我们先绘制一条正弦函数 中学数学中，描述一条正弦函数的方程式 y=a*sin(b * x + c) + d，所以我们构造一个类，需要的参数也是a，b，c，d，为了确定函数的起始位置和结束位置，另外需要两个参数start，end
class Line {
constructor (a, b, c, d, start, end) {
this.a = a
this.b = b
this.c = c
this.d = d
this.start = start
this.end = end
}
}
export default Line
实际上每条正弦函数曲线并不是真正的连线，而是由于一个个点组成，我们在增加一个参数，确定每个点之间的间距，并在实例化的时候生成这些点，我们这里保存在pointList中
class Line {
constructor (a, b, c, d, start, end, gap) {
this.a = a
this.b = b
this.c = c
this.d = d
this.start = start
this.end = end
this.gap = gap
this.pointList = []
this.computePointList()
}
computePointList () {
this.pointList = []
for (let i = this.start; i <= this.end; i = i + this.gap) {
let x = i
let y = this.a * Math.sin((this.b * x + this.c) / 180 * Math.PI) + this.d
this.pointList.push({
x,
y
})
}
}
}
export default Line
在页面中，Line实例保存在lineList中，遍历lineList绘制点
<template>
<canvas class="wave" ref="wave" v-bind:width="canvasWidth" v-bind:height="canvasHeight"></canvas>
</template>
<script>
import Line from './line'
export default {
props: {},
data: function () {
return {
canvasWidth: 600,
canvasHeight: 400,
ctx: null,
visual: {
x: 0,
y: -100,
z: 1000
},
lineList: [
new Line(20, 2, 0, 0, -200, 200, 10)
]
}
},
methods: {
init: function () {
this.ctx = this.$refs.wave.getContext('2d')
},
draw: function () {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.lineList.forEach(line => {
line.pointList.forEach(item => {
this.ctx.beginPath()
this.ctx.arc(item.x + this.canvasWidth / 2, item.y + this.canvasHeight / 2, 2, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
})
})
}
},
mounted: function () {
this.init()
this.draw()
}
}
</script>
<style lang="stylus" scoped>
.wave {
border: 1px solid;
}
</style>
看一下代码效果
computePointList () {
this.pointList = []
for (let i = this.start; i <= this.end; i = i + this.gap) {
let x = i
let y = this.a * Math.sin((this.b * x + this.c) / 180 * Math.PI) + this.d
let offset = i
this.pointList.push({
x,
y,
offset
})
}
}
updatePointList () {
this.pointList.forEach(item => {
item.y = this.a * Math.sin((this.b * item.x + this.c + item.offset) / 180 * Math.PI) + this.d
})
}
在页面中，我们定义一个变量lineOffset，通过调整它控制line实例的c值（也就是对直线进行平移），并不断地调用之前写好的updatePointList方法，更新点的位置
animationFrame: function () {
window.requestAnimationFrame(() => {
this.lineList.forEach(line => {
line.c = this.lineOffset
line.updatePointList()
})
this.lineOffset = this.lineOffset + 1
this.draw()
this.animationFrame()
})
}
代码运行效果
constructor (a, b, c, d, z, start, end, gap) {
this.a = a
this.b = b
this.c = c
this.d = d
this.z = z
this.start = start
this.end = end
this.gap = gap
this.pointList = []
this.computePointList()
}
我们之前已经推导过，对于任一点D(xD，yD，zD)，其绕y轴旋转β角的时候，它的三维坐标变为(xDcosβ-zDsinβ，yD，zDcosβ+xDsinβ)，想象一下我们直线上的每一个点，其实都是绕着y轴旋转的，旋转之后y轴的坐标不会发生变化，然后看我们原型中声明的updatePointList方法
updatePointList () {
this.pointList.forEach(item => {
item.y = this.a * Math.sin((this.b * item.x + this.c + item.offset) / 180 * Math.PI) + this.d
})
}
y轴的坐标我们之前已经写好了，我们运用(xDcosβ-zDsinβ，yD，zDcosβ+xDsinβ)推导每个点旋转β角后的坐标位置
updatePointList (rotationAngleSpeed) {
this.pointList.forEach(item => {
let x = item.x
let z = item.z
item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.z = z * Math.cos(rotationAngleSpeed / 180 * Math.PI) + x * Math.sin(rotationAngleSpeed / 180 * Math.PI)
})
}
代码运行效果
updatePointList (rotationAngleSpeed, visual) {
this.pointList.forEach(item => {
let x = item.x
let y = item.y
let z = item.z
item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.z = z * Math.cos(rotationAngleSpeed / 180 * Math.PI) + x * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.y = this.a * Math.sin((this.b * x + this.c + item.offset) / 180 * Math.PI) + this.d
})
}
然后我们看一下运行结果
item.y = this.a * Math.sin((this.b * x + this.c + item.offset) / 180 * Math.PI) + this.d
但是我们实际上每计算一次item.y的值，我们通过控制this.c来实现平移，所以除了this.c之外，
this.a * Math.sin((this.b * x + this.c + item.offset) / 180 * Math.PI) + this.d
中的 this.a，x（这里的x也就是item.x），this.b，item.offset，this.d都不应该有变化，但是我们代码中的
item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI)
却在不停地变化item.x的值，所以我们需要保存一份最开始时时候的x值
computePointList () {
this.pointList = []
for (let i = this.start; i <= this.end; i = i + this.gap) {
let x = i
let y = this.a * Math.sin((this.b * x + this.c) / 180 * Math.PI) + this.d
let offset = i
this.pointList.push({
x,
y,
z: this.z,
originX: x,
offset
})
}
}
updatePointList (rotationAngleSpeed, visual) {
this.pointList.forEach(item => {
let x = item.x
let y = item.y
let z = item.z
item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.z = z * Math.cos(rotationAngleSpeed / 180 * Math.PI) + x * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.y = this.a * Math.sin((this.b * item.originX + this.c + item.offset) / 180 * Math.PI) + this.d
})
}
继续看运行效果
visual: {
x: 0,
y: -100,
z: 1000
}
并在每次updatePointList方法中调用它，计算这个点在平面xy上的投影位置
animationFrame: function () {
window.requestAnimationFrame(() => {
this.lineList.forEach(line => {
line.c = this.lineOffset
line.updatePointList(this.rotationAngleSpeed, this.visual)
})
this.lineOffset = this.lineOffset + 1
this.draw()
this.animationFrame()
})
}
在updatePointList函数中，我们拿到传入的视角点visual，并根据视角点计算空间内的点在平面xy上的投影，我们记为(canvasX，canvasY)
updatePointList (rotationAngleSpeed, visual) {
this.pointList.forEach(item => {
let x = item.x
let y = item.y
let z = item.z
item.x = x * Math.cos(rotationAngleSpeed / 180 * Math.PI) - z * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.z = z * Math.cos(rotationAngleSpeed / 180 * Math.PI) + x * Math.sin(rotationAngleSpeed / 180 * Math.PI)
item.y = this.a * Math.sin((this.b * item.originX + this.c + item.offset) / 180 * Math.PI) + this.d
item.canvasX = (item.x - visual.x) * visual.z / (visual.z - z)
item.canvasY = (item.y - visual.y) * visual.z / (visual.z - z)
})
}
由于我们现在是要绘制投影的坐标，所以我们的draw方法中的绘制圆点的方法需要换成(canvasX，canvasY)
draw: function () {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.lineList.forEach(line => {
line.pointList.forEach(item => {
this.ctx.beginPath()
this.ctx.arc(item.canvasX + this.canvasWidth / 2, item.canvasY + this.canvasHeight / 2, 2, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
})
})
}
运行结果
lineList: [
new Line(20, 2, 0, 0, -150, -200, 200, 10),
new Line(20, 2, 0, 0, -120, -200, 200, 10),
new Line(20, 2, 0, 0, -90, -200, 200, 10),
new Line(20, 2, 0, 0, -60, -200, 200, 10),
new Line(20, 2, 0, 0, -30, -200, 200, 10),
new Line(20, 2, 0, 0, 0, -200, 200, 10),
new Line(20, 2, 0, 0, 30, -200, 200, 10),
new Line(20, 2, 0, 0, 60, -200, 200, 10),
new Line(20, 2, 0, 0, 90, -200, 200, 10),
new Line(20, 2, 0, 0, 120, -200, 200, 10),
new Line(20, 2, 0, 0, 150, -200, 200, 10)
]
运行结果
animationFrame: function () {
window.requestAnimationFrame(() => {
this.lineList.forEach((line, index) => {
line.c = this.lineOffset
line.updatePointList(this.rotationAngleSpeed, this.visual)
})
this.lineOffset = this.lineOffset + 1
this.draw()
this.animationFrame()
})
}
line.c是被赋值为this.lineOffset，所以我们看到每条直线的偏移量都是一致的，我们试着修改代码，使每条直线的偏移量不一致
animationFrame: function () {
window.requestAnimationFrame(() => {
this.lineList.forEach((line, index) => {
line.c = this.lineOffset + index * 30
line.updatePointList(this.rotationAngleSpeed, this.visual)
})
this.lineOffset = this.lineOffset + 1
this.draw()
this.animationFrame()
})
}
代码运行结果
draw: function () {
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
this.lineList.forEach(line => {
line.pointList.forEach(item => {
this.ctx.beginPath()
// 暂且假定小圆点的原始半径是2,则投影半径可表示为
let pointSize = 2 * this.visual.z / (this.visual.z - item.z)
this.ctx.arc(item.canvasX + this.canvasWidth / 2, item.canvasY + this.canvasHeight / 2, pointSize, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
})
})
}
运行效果
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent