zoukankan      html  css  js  c++  java
  • WebGL和ThreeJs学习6--射线法确定3D空间中所选物体

    一、在 threejs 中如何确定下图3D空间中鼠标点击位置的 object 对象?

    二、射线法确定步骤及代码
       //Three.js提供一个射线类Raycaster来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。
        //从某个方向发射一条射线,穿过鼠标所在的点,则这条射线经过的对象就是鼠标点击的对象
        //射线法获取鼠标选择的元素,然后修元素的材质。
        var raycaster = new THREE.Raycaster();
    
        //mouse,鼠标所对应的二维向量,监听鼠标移动事件
        //mouse.x是指 鼠标的x到屏幕y轴的距离与屏幕宽的一半的比值 绝对值不超过1
        //mouse.y是指 鼠标的y到屏幕x轴的距离与屏幕宽的一半的比值 绝对值不超过1
        var mouse = new THREE.Vector2();
    
        function getIntersects( point, objects ) {
            //将html坐标系转化为webgl坐标系,并确定鼠标点击位置
            mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
             //从相机发射一条射线,经过鼠标点击位置
            raycaster.setFromCamera( mouse, camera );
            //camera 到 mouse 之间穿过的物体
            //确定所点击位置上的物体数量
            return raycaster.intersectObjects( objects );
        } 
      
    var intersects = getIntersects( onUpPosition, objects );   // 拾取物体数大于0时   if ( intersects.length > 0 ) {
        ……
        }

    很多人不太理解鼠标点击位置的坐标转换过程

    mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );

    这行代码等价于:

    mouse.x = (e.clientX/window.innerWidth)*2 -1; 
    mouse.y = -(e.clientY/window.innerHeight)*2 + 1; 

    本文中3D空间默认整个屏幕,即空间长宽为

    window.innerWidth
    window.innerHeight

    当页面中的3D空间只是一部分时,则空间长宽可能为

      width = div.style.width || div.clientWidth || div.offsetWidth || div.scrollWidth;
    
      height = div.style.height || div.clientHeight || div.offsetHeight || div.scrollHeight;
  • 相关阅读:
    document.write("x3cx54")?是加密了吗?
    SQL中以count及sum为条件的查询
    给MyEclipse 10增加SVN功能
    iOS参考工具和资源
    Apple Developer参考资料
    [转]最常见的20个jQuery面试问题及答案
    丢掉鼠标-Mac神软Alfred使用手册
    jQuery执行进度提示窗口的实现(progressbar)
    [转]5个JavaScript面试题
    自己写的POIUtil,主要解决从不同的HSSFWorkbook复制sheet以及根据单元格插入图片等
  • 原文地址:https://www.cnblogs.com/catherinezyr/p/7372196.html
Copyright © 2011-2022 走看看