三.JS Ray_tracing在嵌入HTML页面时相交错误答案

【问题标题】：Three.JS Ray_tracing intersect wrong while embedded on HTML page三.JS Ray_tracing在嵌入HTML页面时相交错误
【发布时间】：2016-03-16 22:23:05
【问题描述】：

我在网页上的 div 中运行 Three.JS，该网页使用引导程序偏移 x:200,y:150 以为标题和导航区域腾出空间，如您在此处看到的：https://jsfiddle.net/cx47458f/3/

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

        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 的原因。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

解决方案最终在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

【讨论】：