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.offsetWidth+"+"+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的代码



评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值