当前位置:   article > 正文

Three.js中的raycaster射线获取模型不准确问题_raycaster 位置不准

raycaster 位置不准

最近在加载3d模型时,需要点击模型的某个部位,就遇到了获取模型部位不准备的问题。
three.js中的raycaster用法是canvas是整个页面窗口的,所以它的代码是:

  1. // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
  2. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  3. mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

但是由于我的模型展示控件没有占满整个页面,所以用上述方法获取模型老是不对,但实际上我的项目中渲染模型的区域只有页面中的一块区域,所以这么些写获取到的部位总是不准确,终于在一个博主那找到了解决方案,特此记录

  1. // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -11
  2. //这里的container就是画布所在的div,也就是说,这个是要拿整个scene所在的容器来界定的
  3. let getBoundingClientRect = container.getBoundingClientRect()
  4. mouse.x = ((event.clientX - getBoundingClientRect .left) / container.offsetWidth) * 2 - 1;
  5. mouse.y = -((event.clientY - getBoundingClientRect .top) / container.offsetHeight) * 2 + 1;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/95822
推荐阅读
相关标签
  

闽ICP备14008679号