【three.js】射线投射器`Raycaster` 非全屏点选偏移问题处理

最新推荐文章于 2024-05-02 18:12:22 发布

小唛的前端宝库

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量351

点赞数

文章标签： javascript 开发语言 three.js

本文链接：https://blog.csdn.net/qq_34611721/article/details/130690421

版权

官网案例修改，适配非全屏点选情况


const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
const container = document.getElementById('container')

function onPointerMove( event ) {

	// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
	// dom 获取距离窗口位置
    let getBoundingClientRect = container.getBoundingClientRect()

    let px = getBoundingClientRect.left
    let py = getBoundingClientRect.top

    pointer.x = ((event.clientX - px) / container.offsetWidth) * 2 - 1
    pointer.y = -((event.clientY - py) / container.offsetHeight) * 2 + 1

}

function render() {

	// 通过摄像机和鼠标位置更新射线
	raycaster.setFromCamera( pointer, camera );

	// 计算物体和射线的焦点
	const intersects = raycaster.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {

		intersects[ i ].object.material.color.set( 0xff0000 );

	}

	renderer.render( scene, camera );

}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);