Canvas尺寸变化(射线坐标计算)

本节课内容非常简单，就是你鼠标单击canvas画布，用射线拾取模型的时候，有一点要注意，Canvas画布尺寸如果不是固定的，而是变化的，会对坐标变换有影响。

学习本节课内容之前，可以先回顾下，前面关于threejs Canvas画布布局的讲解。

1.12. Canvas画布布局和全屏 (opens new window)

8.1. three.js Canvas画布布局 (opens new window)

canvas画布全屏-尺寸跟着浏览器窗口变化

const width = window.innerWidth;
const height = window.innerHeight;
// 画布跟随窗口变化
window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
};

如果canvas画布尺寸变化了，下面代码中的width、height还是原来的值,这时候射线拾取就有可能无法拾取到模型对象。

renderer.domElement.addEventListener('click', function (event) {
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标转WebGL标准设备坐标
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
})

每次触发click事件，都要重新计算canvas画布。

renderer.domElement.addEventListener('click', function (event) {
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标转WebGL标准设备坐标
    const x = (px / window.innerWidth) * 2 - 1;
    const y = -(py / window.innerHeight) * 2 + 1;
})

特殊情况，canvas画布和body左上角重合，可以用clientX、clientY替换offsetX、offsetY

renderer.domElement.addEventListener('click', function (event) {
    const px = event.clientX;
    const py = event.clientY;
    //屏幕坐标转WebGL标准设备坐标
    const x = (px / window.innerWidth) * 2 - 1;
    const y = -(py / window.innerHeight) * 2 + 1;
})

canvas局部布局-尺寸随窗口变化

// 画布跟随窗口变化
window.onresize = function () {
    const width = window.innerWidth - 200; //canvas画布宽度
    const height = window.innerHeight - 60; //canvas画布高度
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    document.getElementById('left').style.height = height + 'px';
};

renderer.domElement.addEventListener('click', function (event) {
    const width = window.innerWidth-200;
    const height = window.innerHeight-60;
    //屏幕坐标转WebGL标准设备坐标
    const x = (px / width) * 2 - 1;
    const y = -(py / height) * 2 + 1;
})