Three.js raycaster 填坑

Three.js中raycaster是射线，用于拾取物体的。这是官方例子:var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2();function onMouseMove( event ) {mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;}function render() {raycaster.setFromCamera( mouse, camera );var intersects = raycaster.intersectObjects( scene.children );for ( var i = 0; i < intersects.length; i++ ) {intersects[ i ].object.material.color.set( 0xff0000 );}renderer.render( scene, camera );}window.addEventListener( 'mousemove', onMouseMove, false );window.requestAnimationFrame(render);简单讲解下原理: webgl把中心点设置为0，然后把世界坐标分成高（-1,1）之间，宽也如此，所以首先把鼠标点击的位置转换成（-1,1）之间，然后从相机所在位置到鼠标点击的位置的连线画一条射线，射线穿过的物体就会被拾取。重点是: 很多教程里，计算mouse.x和mouse.y的时候都是认为canvas占据整个屏幕计算的，所以用的window.innerWidth和window.innerHeight。但是:mouse.x和mouse.y是相对绘制的canvas计算，也就是说canvas的中心是（0,0），canvas的高和宽被分成（-1,1），所以如果你的canvas不是整个屏幕，用上述代码是无法正确拾取物体的。下面直接上修改后的代码:<canvas width="600" height="600" id="canvas-dom-2">您的浏览器不支持canvas!</canvas>

var mainCanvas = document.getElementById("canvas-dom-2");

renderer = new THREE.WebGLRenderer({
canvas: mainCanvas,
antialias:true, //设置抗锯齿
alpha:true, //背景透明
});
renderer.setClearColor(0x000000,0.0); //设置渲染器背景颜色
renderer.setSize(mainCanvas.offsetWidth,mainCanvas.offsetHeight);

mainCanvas.addEventListener( 'click', onDocumentClick, false );

        function onDocumentClick(event){event.preventDefault();//console.log(mainCanvas.off4000setWidth+"+"+mainCanvas.offsetHeight);mouse.x = ( (event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth ) * 2 - 1;mouse.y = - ( (event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight ) * 2 + 1;raycaster.setFromCamera( mouse, camera );var intersects = raycaster.intersectObjects( object );for ( var i = 0; i < intersects.length; i++ ) {console.log(intersects[ i ].object.userData.uid);}}

注意上面计算mouse的x和y的代码