手记

THREE.JS中的鼠标点击事件

<script>
var raycaster = new THREE.RayCaster();//光线投射,用于确定鼠标点击位置
var mouse = new THREE.Vector2();//创建二维平面
window.addEventListener("mousedown",mousedown);//页面绑定鼠标点击事件
//点击方法
function mousedown(e){
    //将html坐标系转化为webgl坐标系,并确定鼠标点击位置
    mouse.x =  e.clientX / renderer.domElement.clientWidth*2-1;
    mouse.y =  -(e.clientY / renderer.domElement.clientHeight*2)+1;
    //以camera为z坐标,确定所点击物体的3D空间位置
    raycaster.setFromCamera(mouse,camera);
    //确定所点击位置上的物体数量
    var intersects = raycaster.intersectObjects(scene.children);
    //选中后进行的操作
    if(intersects.length){
        ...
    }
}
</script>
6人推荐
随时随地看视频
慕课网APP

热门评论

鼠标点击怎么获取三维坐标?

查看全部评论