前言
学习目标
- 创建Scene对象
- 理解Scene对象的功能和运行逻辑
知识点
- 渲染封装
- 坐标转换
前情回顾
之前我们创建了Group对象，接下来我们建立Scene对象。
1-Scene对象的功能分析
Scene 对象是场景对象，是渲染所有元素的舞台，继承自Group对象。
Scene 对象绑定了一个相机对象，负责对场景中的物体进行拍照。
我当前尚未考虑一个场景多相机的状态，因为这样会增加项目复杂度，等以后有需要了，再另行考虑。
Scene中还挂载一些坐标系转换的方法，因为这些坐标系的转换需要知道画布尺寸和相机状态，所以我就直接挂载在Scene对象上了。
2-Scene对象的代码实现
其整体代码如下：
- /src/lmm/core/Scene.ts
import { Camera } from './Camera'
import { Group } from '../objects/Group'
import { Object2D } from '../objects/Object2D'
import { Vector2 } from '../math/Vector2'
import { Matrix3 } from '../math/Matrix3'
type SceneType = {
canvas?: HTMLCanvasElement
camera?: Camera
autoClear?: boolean
}
class Scene extends Group {
// canvas画布
_canvas = document.createElement('canvas')
// canvas 上下文对象
ctx: CanvasRenderingContext2D = this._canvas.getContext(
'2d'
) as CanvasRenderingContext2D
// 相机
camera = new Camera()
// 是否自动清理画布
autoClear = true
// 类型
readonly isScene = true
constructor(attr: SceneType = {}) {
super()
this.setOption(attr)
}
get canvas() {
return this._canvas
}
set canvas(value) {
if (this._canvas === value) {
return
}
this._canvas = value
this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
}
/* 设置属性 */
setOption(attr: SceneType) {
for (let [key, val] of Object.entries(attr)) {
this[key] = val
}
}
/* 渲染 */
render() {
const {
canvas: { width, height },
ctx,
camera,
children,
autoClear,
} = this
ctx.save()
// 清理画布
autoClear && ctx.clearRect(0, 0, width, height)
// 裁剪坐标系：将canvas坐标系的原点移动到canvas画布中心
ctx.translate(width / 2, height / 2)
// 渲染子对象
for (let obj of children) {
ctx.save()
// 视图投影矩阵
obj.enableCamera && camera.transformInvert(ctx)
// 绘图
obj.draw(ctx)
ctx.restore()
}
ctx.restore()
}
/* client坐标转canvas坐标 */
clientToCanvas(clientX: number, clientY: number) {
const { canvas } = this
const { left, top } = canvas.getBoundingClientRect()
return new Vector2(clientX - left, clientY - top)
}
/* canvas坐标转裁剪坐标 */
canvastoClip({ x, y }: Vector2) {
const {
canvas: { width, height },
} = this
return new Vector2(x - width / 2, y - height / 2)
}
/* client坐标转裁剪坐标 */
clientToClip(clientX: number, clientY: number) {
return this.canvastoClip(this.clientToCanvas(clientX, clientY))
}
/* 基于某个坐标系，判断某个点是否在图形内 */
isPointInObj(obj: Object2D, mp: Vector2, matrix: Matrix3 = new Matrix3()) {
const { ctx } = this
ctx.beginPath()
obj.crtPath(ctx, matrix)
return ctx.isPointInPath(mp.x, mp.y)
}
}
export { Scene }
Scene 对象的属性
- canvas：canvas 画布。
- ctx：canvas 的上下文对象。
- camera：相机
- autoClear：是否自动清理画布。
Scene 对象的方法
- setOption(attr: SceneType)：设置属性。
- render()：渲染。
render() {
const {
canvas: { width, height },
ctx,
camera,
children,
autoClear,
} = this
ctx.save()
// 清理画布
autoClear && ctx.clearRect(0, 0, width, height)
// 裁剪坐标系：将canvas坐标系的原点移动到canvas画布中心
ctx.translate(width / 2, height / 2)
// 渲染子对象
for (let obj of children) {
ctx.save()
// 相机逆变换
obj.enableCamera && camera.transformInvert(ctx)
// 绘图
obj.draw(ctx)
ctx.restore()
}
ctx.restore()
}
在渲染方法中会先做两次变换：
ctx.translate(width / 2, height / 2)： 将canvas坐标系的原点移动到canvas画布中心，从而形成裁剪坐标系。
camera.transformInvert(ctx)：基于视图投影矩阵做变换。若scene的子对象的enableCamera 为false，次变换不会执行。
- clientToCanvas(clientX: number, clientY: number)：client坐标转canvas坐标。
clientToCanvas(clientX: number, clientY: number) {
const { canvas } = this
const { left, top } = canvas.getBoundingClientRect()
return new Vector2(clientX - left, clientY - top)
}
client坐标：鼠标点击的位置，默认就是鼠标在整个窗口中的位置。
canvas坐标：鼠标在canvas 画布中的位置。
- canvastoClip(canvasPos: Vector2)：canvas坐标转裁剪坐标。
- clientToClip(clientX, clientY) ：client坐标转裁剪坐标。
- isPointInObj(obj, mp, matrix)：基于某个坐标系坐标系，判断某个点是否在图形内。
3-Scene对象测试
在examples中建立一个Img.vue文件。
- /src/lmm/examples/Scene.vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Scene } from '../lmm/core/Scene'
import { Vector2 } from '../lmm/math/Vector2'
import { Img } from '../lmm/objects/Img'
// 获取父级属性
const props = defineProps({
size: { type: Object, default: { width: 0, height: 0 } },
})
// 对应canvas 画布的Ref对象
const canvasRef = ref<HTMLCanvasElement>()
/* 场景 */
const scene = new Scene()
/* 图案 */
const image = new Image()
image.src =
'https://yxyy-pandora.oss-cn-beijing.aliyuncs.com/stamp-images/1.png'
const pattern = new Img({ image })
scene.add(pattern)
/* 鼠标的裁剪坐标位 */
const mouseClipPos = new Vector2(Infinity)
/* 测试 */
function test(canvas: HTMLCanvasElement) {
const imgSize = new Vector2(image.width, image.height).multiplyScalar(0.6)
pattern.setOption({
/* 模型矩阵 */
rotate: 0.4,
position: new Vector2(0, -50),
scale: new Vector2(0.5),
/* Img属性 */
size: imgSize.clone(),
offset: imgSize.clone().multiplyScalar(-0.5),
/* 样式 */
style: {
globalAlpha: 0.8,
shadowColor: 'rgba(0,0,0,0.5)',
shadowBlur: 0,
},
})
/* 相机位移测试 */
scene.camera.position.set(0, 100)
/* 记录鼠标的裁剪坐标位 */
canvas.addEventListener('mousemove', ({ clientX, clientY }) => {
mouseClipPos.copy(scene.clientToClip(clientX, clientY))
})
/* 动画 */
ani()
}
function ani(time = 0) {
/* 相机缩放测试 */
const inter = (Math.sin(time * 0.002) + 1) / 2
scene.camera.zoom = inter + 0.5
/* 投影 */
pattern.style.shadowOffsetY = 80 * (1 - inter)
pattern.style.shadowBlur = 10 * (1 - inter)
/* 选择测试 */
if (scene.isPointInObj(pattern, mouseClipPos, pattern.pvmoMatrix)) {
pattern.rotate += 0.02
}
/* 渲染 */
scene.render()
requestAnimationFrame(ani)
}
onMounted(() => {
const canvas = canvasRef.value
if (canvas) {
scene.setOption({ canvas })
image.onload = function () {
test(canvas)
}
}
})
</script>
<template>
<canvas ref="canvasRef" :width="size.width" :height="size.height"></canvas>
</template>
<style scoped></style>
在上面我对Scene对象的实例化、添加对象、对象选择、相机变换都做了测试，大家可以自己运行看看。
总结
Scene对象重点就是渲染封装和图形选择，下一章我们会建立一个相机轨道控制器。
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
