three.js 硬核代码片段(长期更新)

Three.js 硬核代码片段(长期更新)

1 获取相机朝向(方向向量)

// 获取相机朝向
const forward = new THREE.Vector3();
forward.set(0, 0, -1).applyQuaternion(camera.quaternion);

2 坐标系变换

// 1 世界坐标转屏幕坐标
function world2screen(v, camera) {
    var vector = v.clone().project(camera);
    vector.x = Math.round(((vector.x + 1) / 2) * window.innerWidth);
    vector.y = Math.round((-(vector.y - 1) / 2) * window.innerHeight);
    return {
        x: vector.x,
        y: vector.y
    };
}

// 2 屏幕坐标转NDC
function screen2ndc(screenPos, screenWidth, screenHeight) {
    const ndc = {
        x: (screenPos.x / screenWidth) * 2 - 1,
        y: -(screenPos.y / screenHeight) * 2 + 1,
        z: 0
    };
    return ndc;
}

// 3 NDC转屏幕
function ndc2screen(ndcPos, screenWidth, screenHeight) {
    const screen = {
        x: ((ndcPos.x + 1) / 2) * screenWidth,
        y: (-(ndcPos.y - 1) / 2) * screenHeight,
        z: 0
    };
    return screen;
}

// 4 NDC转屏世界
function ndc2world(worldPos = {x: 0, y: 0, z: 0}, ndcPos = {x: 0, y: 0, z: 0}, camera) {
    let worldVec4 = new Vector4(worldPos.x, worldPos.y, worldPos.z, 1.0);
    let ndcVec4 = new Vector4(ndcPos.x, ndcPos.y, ndcPos.z, 1.0);

    // world -> clip, 计算w分量
    worldVec4.applyMatrix4(camera.projectionMatrix);

    // ndc -> clip
    ndcVec4.multiplyScalar(worldVec4.w);
    // clip -> world
    ndcVec4.applyMatrix4(camera.projectionMatrixInverse);

    return {
        x: ndcVec4.x,
        y: ndcVec4.y,
        z: ndcVec4.z
    };
}