2024-5-22 Three.js 按鼠标位置缩放

        three.js的默认缩放为中心点，需求为将缩放位置改为光标所在位置。

// 添加滚轮事件
window.addEventListener('wheel', onScrollingEvents)

// 事件
function onScrollingEvents(event) {
	// 设置相机缩放比数值越大缩放越明显
	let factor = 1.2
	// 从鼠标位置转化为webgl屏幕坐标位置
	let mouseX = (event.clientX / renderer.domElement.width) * 2 - 1
	let mouseY = -(event.clientY / renderer.domElement.height) * 2 + 1
	let vector = new THREE.Vector3(mouseX, mouseY, 0)
	// 从屏幕向量转为3d空间向量
	vector.unproject(camera)
	// 相机偏移量
	vector.sub(camera.position).setLength(factor)
	// 判断缩放
	if (event.deltaY < 0) {
		// camera + vector
		camera.position.add(vector)
		controls.target.add(vector)
	} else {
		// camera - vector
		camera.position.sub(vector)
		controls.target.sub(vector)
	}
}

        代码能够实现需求，需要禁用OrbitControls 滚动，但缩放后产生bug，放大移动旋转模型，模型将不在相机视角中心，不知道怎么解决

---

        three.js的 OrbitControls 控件已经有了这个功能， zoomToCursor 属性

来源：https://github.com/mrdoob/three.js/pull/26165