ThreeJS教程：Canvas尺寸变化(射线坐标计算)
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
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;
})