• threejs通过射线Ray获取指定的点


    例:获取cube方向上的面的中点坐标(该cube默认方向为(0,1,0))

    (中心点向cube quaternion 方向上发射射线,与正前方的面相交的点即为目标点;

    由于ray只支持box和face,所以需要先生成与cube相同的box)

    let center = cube.position.clone(),
      quaternion = cube.quaternion.clone();
     
    //获取cube的长宽高
    cube.geometry.computeBoundingBox();
    let size = this.cube.geometry.boundingBox.getSize();
    let scale = this.cube.scale;
    let scaleSize = new THREE.Vector3(size.x * scale.x, size.y * scale.y, size.z * scale.z);
     
    //在坐标原点位置生成box,方便ray射线操作.该box长宽高与cube一致,只是quaternion不同
    let box = new THREE.Box3()
        .setFromCenterAndSize(new THREE.Vector3(0, 0, 0), scaleSize);
     
    //在坐标原点位置生成box和ray,得到目标点,再通过quaterion变换到目标位置
    let ray = new THREE.Ray(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0));
    let intersect = ray.intersectBox(box);
     
    //该点由于射线原点在(0,0,0),所以applyQuaternion只起到旋转作用
    let rotatedPoint = intersect.applyQuaternion(quaternion)
    //最后位移center 的向量
    let point=rotatedPoint.add(center)
     
  • 相关阅读:
    angular2 + bootstrap +jquery 实例
    How to create a angular2 project process
    icheck 插件
    select2 下面的搜索框 无法输入问题
    datatabels buttons
    datatables 跳转到指定页
    text-overflow:ellipse;
    box-shadow
    CSS强制性换行
    mybatis与hibernate的不同
  • 原文地址:https://www.cnblogs.com/brainworld/p/8662458.html
Copyright © 2020-2023  润新知