threejs使用Sprite精灵图结合射线实现点击Sprite

页面元素

<div ref="container" style="width: 100%;height: 100%;overflow: hidden;"></div>

添加精灵图

// 创建纹理加载器
let sprite = new THREE.Sprite(new THREE.SpriteMaterial({
	map: new THREE.TextureLoader().load("图片路径"),
	sizeAttenuation:false // false的话 不随着相机拉远而变小
}))
sprite.position.set(1,1,1)//精灵图添加的位置
sprite.scale.set(0.12, 0.12, 1)//精灵图大小
sprite.name = ”jinglingtu“//精灵图名称
// 将精灵添加到场景中
scene.add(sprite)

实现点击事件

// 点击事件处理函数
const onClick = (event) => {
	console.log(event)
	// 获取点击位置的屏幕坐标
	const mouse = new THREE.Vector2();
	mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

	// 通过射线检测点击位置是否与精灵图相交
	const raycaster = new THREE.Raycaster();
	raycaster.setFromCamera(mouse, camera);
	let intersects = raycaster.intersectObject(sprite);

	if (intersects.length > 0) {
		console.log("点击精灵")
	}
};

// 监听点击事件
this.$refs.container.addEventListener('click', onClick, false);