-

zhangwei

2024-08-21 9efb46fe04b3bb9098e92979ae2c658256446f25

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
module.exports = Behavior({
    // 全局变量
    session: undefined, // 全局的VKsession对象
    canvas: undefined,  // canvas
    // XRFrame相关变量
    xrScene: undefined, // xr-frame 的场景
    xrCamera: undefined, // xr-frame 的相机
    xrFrameReady: undefined, // xr-frame初始化完毕
    // WebGL相关
    camera: undefined,  // 主要相机
    // ThreeJs 相关变量
    gl: undefined,      // 全局gl对象
    THREE: undefined,   // THREE 对象
    // 全局 data
    data: {
        domWidth: 0,
        domHeight: 0,
        width: 0,       // canvas大小
        height: 0,      // canvas大小
        widthScale: 1,      // canvas宽度缩放值
        heightScale: 0.8,   // canvas高度缩放值
        cameraPosition: 0,  // 相机朝向，默认后置摄像头
    },
    methods: {
        onReady() {
            // 获取canvas
            wx.createSelectorQuery()
                .select('#canvas')
                .node()
                .exec(res => {
                    this.canvas = res[0].node
 
                    // 运算画布大小
                    this.calcCanvasSize()
 
                    // 页面自定义初始化
                    if (this.init) this.init()
                })
        },
        calcCanvasSize () {
            const info = wx.getSystemInfoSync()
            const pixelRatio = info.pixelRatio;
            const width = info.windowWidth * this.data.widthScale * pixelRatio;
            const height = info.windowHeight * this.data.heightScale * pixelRatio;
            // 存在 webgl Canvas的情况下，写入大小
            if (this.canvas) {
                this.canvas.width = width;
                this.canvas.height = height;
            }
            console.log(`canvas size: width = ${width} , height = ${height}`)
            this.setData({
                width: width,
                height: height,
                domWidth: info.windowWidth * this.data.widthScale,
                domHeight: info.windowHeight * this.data.heightScale,
            });
        },
        // 前后摄像头
        switchCamera(){
            if(this.session.config){
                const config = this.session.config
                let cameraPosNext;
                if (this.data.cameraPosition === 0) {
                    cameraPosNext = 1;
                } else {
                    cameraPosNext = 0;
                }
                config.cameraPosition = cameraPosNext
                this.session.config = config
                this.setData({
                    cameraPosition: cameraPosNext
                })
            }
        },
        // 限帧逻辑
        initLoop() {
            // 限制调用帧率,暂时去掉
            let fps = 30
            let fpsInterval = 1000 / fps
            let last = Date.now()
 
            const session = this.session;
 
            // 逐帧渲染
            const onFrame = timestamp => {
                try {
                    let now = Date.now()
                    const mill = now - last
                    // 经过了足够的时间
                    if (mill > fpsInterval) {
                        last = now - (mill % fpsInterval); //校正当前时间
                        this.loop();
                    }
                } catch(e) {
                    console.error(e);
                }
                session.requestAnimationFrame(onFrame)
            }
            session.requestAnimationFrame(onFrame)
        },
    },
});