正文

js归一化，点积，向量差，视图矩阵获取

譬如朝露 V管理员/ / 0 评论/ 338阅读
04 03 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 归一化函数   0-1区间
        const normalized = (arr) => {
            //算出每个元素平方的总和
            let sum = 0;
            for (let index = 0; index < arr.length; index++) {
                sum += arr[index] * arr[index];

            }
            //获取总数的开平方。
            const middle = Math.sqrt(sum);
            for (let index = 0; index < arr.length; index++) {
                arr[index] = arr[index] / middle

            }
            return arr;
        }
        const res = normalized([22, 34, 57, 10, 20])
        // 叉积函数  获取法向量
        const cross = (a, b) => {
            return new Float32Array([
                a[1] * b[2] - a[2] * b[1],
                a[2] * b[0] - a[0] * b[2],
                a[0] * b[1] - a[1] * b[0],
            ])
        }
        //点积函数  获取投影长度
        const dot = (a, b) => {
            return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]
        }
        //向量差
        const minus = (a, b) => {
            return new Float32Array([
                a[0] - b[0],
                a[1] - b[1],
                a[2] - b[2],
            ])
        }

        //视图矩阵获取  视点xyz  目标点xyz  上方向xyz
        const getViewMatrix = (x, y, z, tx, ty, tz, upx, upy, upz) => {
            //视点
            const eye = new Float32Array([x, y, z]);
            //目标点
            const lookAt = new Float32Array([tx, ty, tz]);
            //上方向
            const up = new Float32Array([upx, upy, upz]);
            //确定z轴
            const z = minus(eye, lookAt);
            normalized(z)
            normalized(up)
            //确定x轴
            const x = cross(z, up)
            normalized(x)
            //确定y轴
            const y = cross(x, z)
            return new Float32Array([
                x[0], y[0], z[0], 0,
                x[1], y[1], z[1], 0,
                x[2], y[2], z[2], 0,
                -dot(x, eye), -dot(y, eye), -dot(z, eye), 1
            ])
        }
    </script>
</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。