threejs 将屏幕坐标转换成3d中的坐标。

将当前屏幕上的坐标转换成3d中的坐标pos 是当前canvas屏幕上的坐标,targetZ 是物体距离原点的距离
private get3DPosByCanvasPos (pos: THREE.Vector2, targetZ: number) {    
    let vec = new THREE.Vector3(); // create once and reuse
    let target = new THREE.Vector3(); // create once and reuse
    vec.set(
        ( pos.x / window.innerWidth ) * 2 - 1,
        - ( pos.y / window.innerHeight ) * 2 + 1,
        0.5 );
    let camera = this.camera;
    vec.unproject( camera );
    vec.sub( camera.position ).normalize();    var distance = (targetZ - camera.position.z) / vec.z;    target.copy( camera.position ).add( vec.multiplyScalar( distance ) );
    return target;
}

如果想让创建的模型以右边界靠近屏幕可以使用 

let vec2 = new THREE.Vector2(window.innerWidth, window.innerHeight / 2);
let pos = Game3DMgr.i.get3DPosByCanvasPos(vec2, 0.2);
// 这里计算了物体所在三维空间的大小
// 将计算玩的左边减去所占最大和大小值的一般就是 物体当前体积的一般。
this.basketBg.geometry.computeBoundingBox();
let halfWidth = (this.basketBg.geometry.boundingBox.max.x - this.basketBg.geometry.boundingBox.min.x) / 2;
pos.x -= halfWidth;
this.basketBg.position.set(pos.x, pos.y, pos.z);
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值