当前位置: 首页 > 面试题库 >

THREE.js Ray Intersect通过添加div失败

马清野
2023-03-14
问题内容

当页面上只有一个目标div(包含renderer.domElement)时,我的Three.js脚本运行良好。只要在目标div上方添加另一个具有固定高度和宽度的div,ray.intersectObjects就会返回null。我怀疑我为ray创建的向量会引起问题。这是代码

var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 - 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( myObjects, true );

关于如何解决此问题的任何想法。

编辑:现在是THREE.Raycaster (three.js r.56)


问题答案:

简短的答案是您必须考虑offset画布的材质。

长答案取决于代码的编写方式,因此我将给您两个答案,其中应涵盖基础知识。

有很多可能的组合,因此您可能必须进行试验。同样,不同的浏览器可能会采取不同的行动。

假设您的HTML是这样的:

#canvas {
    width: 200px;
    height: 200px;
    margin: 100px;
    padding: 0px;
    position: static; /* fixed or static */
    top: 100px;
    left: 100px;
}

<body>
    <div id="canvas">
</body>

您的JS是这样的:

var CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;

var container = document.getElementById( 'canvas' );
document.body.appendChild( container );

renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );

方法1 为使以下方法正常工作,请将画布位置设置为 static ;边距> 0和padding> 0都可以

mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;

方法2 对于此替代方法,将画布位置设置为 fixed ;置顶> 0,置左> 0; 填充必须为0;边距> 0可以

mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;

如果您想尝试,这里有一个小提琴:http :
//jsfiddle.net/cn7ecoaa/

编辑:小提琴更新为three.js r.84



 类似资料:
  • 寻找语法添加一个与键- 等

  • 我有一个NSButton,它的底部与superview的齐平,我想设置它向上移动的动画,使其顶部与superview的齐平。 WWDC 2012课程228:掌握自动布局的最佳实践提到了两种设置布局更改动画的方法(31:16),我正在尝试使用CoreAnimation技术。下面的示例确实正确地移动了NSButton,但它是即时移动的,没有动画。 我能补充一下吗

  • 问题内容: 我想我有一个非常简单的问题,但找不到解决方案。因此,我要通过HTML加载DIV内容。问题在于它不仅是文本,而且是图像。Ajax调用返回HTML代码,但是该代码在DIV中显示为HTML,并且不会执行。难以解释,但从示例中可以明显看出… AJAX调用返回字符串: 问题很明显。我得到的是实际的代码,而不是图像和div中的3.3°C,因此,我看到的不是图像,而是img src =…。 我知道我

  • 是否可以使用构造格式的URL? 我已尝试使用以下设置值: (此调用的第三方应用程序不支持标头和其他身份验证方法) 我想这是不支持的?

  • 目前,我有2个对象,我想输入一个新的对象。 我正在寻找一个关于StackOverFlow的解决方案,如下所示:但是,我不明白我的错误。 如何在Java中将对象添加到ArrayList中 下面是我的方法: 我的错误是->main.java:75:错误:找不到符号player.add(name);文字 我不明白我的问题?? 下面是我的方法: 我的类 事先谢谢你的帮助。

  • 问题内容: 我正在尝试通过apache poi api向MS Word文档添加评论。 我已经通过使用完成了部分工作: 但是我不知道如何将其链接到真实注释,并且在api文档中也找不到任何相关内容。 有人知道如何解决吗? 问题答案: 在Office OpenXML Word文档()中,注释是 * .docx ZIP存档中的特殊内容。因此,首先我们需要访问该文档。但是直到现在,它们只会在创建时读取该软件