嵌入HTML页面时，Three.JS Ray_tracing相交错误

Three.JS Ray_tracing intersect wrong while embedded on HTML page

本文关键字：Ray tracing 错误 JS Three HTML 嵌入      更新时间：2023-09-26

我让Three.JS在一个网页上的div中运行，该网页使用bootstrap偏移x:200，y:150，为页眉和导航区域腾出空间，如下所示：https://jsfiddle.net/cx47458f/3/

我遇到的问题是使用ray_tracing/VVector3((函数时没有读取正确的点击位置。使用以下代码：

        function ray_tracing(e,objects){
            var uv  = new THREE.Vector3();
            if (e.offsetX){  //chrome,ie,safari
                uv.x = e.offsetX+(navarea.innerWidth()/2)+7;
                uv.y = e.offsetY+(viewer.innerHeight()/5)-70;
            }else{ //firefox
                uv.x = e.layerX;
                uv.y = e.layerY;    
            }
            uv.x = 2*(uv.x/window.innerWidth) - 1;
            uv.y = 1 - 2 * (uv.y/window.innerHeight);
            var cam = camera.clone();
            var raycaster = new THREE.Raycaster();
            raycaster.setFromCamera( uv, cam );
            return raycaster.intersectObjects( objects );
        }

只要绿球在观看区域的中间，我一开始就几乎做到了完美。然而，它离中间越远，可单击的交点就越远。您确实需要展开JSFiddle预览区域来显示左侧导航，否则根本无法工作。既然它不是全屏的，我该如何处理它以防止交点漂移？

有没有一种方法可以让它不在iframe中，并且仍然在保持功能的同时对大小进行响应？最终，我希望能够在导航上有一些按钮来向场景添加项目或完全更改场景，这就是我避免使用iframe的原因。

解决方案最终在onDocumentMouseMove(event):中是这样的

  var canvasWidth = canvas.innerWidth();
  var canvasHeight = canvas.innerHeight();
  var mouseOffset = canvas.offset();
  mouse.x = ((event.clientX - mouseOffset.left) / canvasWidth) * 2 - 1;
  mouse.y = - ((event.clientY - mouseOffset.top) / canvasHeight) * 2 + 1;

今天早上，我在查找TextGeometry示例时也发现了这个示例。http://threejs.org/examples/#webgl_multiple_elements_text

相关文章：