three.js 如何根据 mvp 矩阵来做渲染啊？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1416 天前的主题，其中的信息可能已经有所发展或是发生改变。

不是很懂 3D，有熟悉的简单解释一下么。这是矩阵信息

{
    "viewport": [-105, 0, 851, 1136], // Viewport
    "models": [
    {
        "name": "pinball", 
        "mvprojection": [ // Model View Projection
            2.394426, -0.04623331, -0.1083115, -0.1077713, 
            0.0528238, 1.809534, -0.05749675, -0.05720999, 
            -0.2414996, -0.06555773, -0.9975035, -0.9925284, 
            -187.2699, -213.9585, 399.7688, 407.75
        ],
        "projection": [ //Projection
            0, -1.811002, 0, 0, 
            2.407058, 0, 0, 0, 
            0.02137727, 0.0334729, -1.005013, -1, 
            0, 0, -10.02506, 0
        ],
        "modelmatrix": [  //Model
            0.02752107, 0.9937948, 0.1077713, 0, 
            -0.9981321, 0.02143729, 0.05720999, 0, 
            0.05454468, -0.1091445, 0.9925284, 0, 
            110.6072, -74.17903, -407.75, 1
        ]
    }
]}

这是一个物体

        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({
          color: 0xAAAAAA
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

所以我应该怎么操作啊？

2 条回复 • 2020-12-19 20:26:00 +08:00

Chanran

2020-12-19 16:23:49 +08:00

有了 MVP 直接 WebGL 渲染啊，three.js 帮你做的事就是帮你隐藏了 MVP 矩阵计算的复杂性的。

gggxxxx

2020-12-19 20:26:00 +08:00 via iPhone

有精力的话，mvp 还是值得看看公式，不难。
mvp 就是 m 和 v 和 p 三个矩阵相乘，在 shader 里决定 vertex 的最终位置就是每个点乘以 mvp 后的位置。