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

射线实现点击Sprite"/>

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);