javascript - Three.JS - 自定义网格上的光线转换

标签 javascript three.js mesh raycasting


我目前正在尝试在 Three.js 中对自定义创建的网格进行光线转换。虽然光线转换对于某些导入的网格物体来说就像一个魅力,但它似乎根本不适用于我的自定义网格物体。

经过一段时间的研究,我发现了自定义光线转换的一些典型问题并尝试修复它们(updateMatrixWorld、双面 Material ...... - 请参阅下面的代码)。

我正在使用以下函数进行光线转换:

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

rayCaster.setFromCamera(mouse, camera);
var intersect = rayCaster.intersectObjects(scene.getObjectByName('loaded_object').children, true); // working


mesh_1.geometry.computeFaceNormals();
mesh_1.updateMatrixWorld();
var intersect_custom = rayCaster.intersectObjects([mesh_1], true); // not working

虽然第一个相交按预期工作,但我的自定义相交不知何故根本不起作用 - 它总是返回一个空数组。
我的假设是否正确,问题一定是我的自定义网格?

以下是我创建自定义网格的方法:

material_k1.side = THREE.DoubleSide;
var singleGeometry_1 = new THREE.Geometry();
var mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);

meshes[i].updateMatrix();
singleGeometry_1.merge(meshes[i].geometry, meshes[i].matrix);

mesh_1.updateMatrix();
singleGeometry_1.verticesNeedUpdate = true;
singleGeometry_1.elementsNeedUpdate = true;
mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);



还有什么问题可能吗?我真的很想知道,特别是因为它似乎不适用于我的自定义网格。

最佳答案

我自己尝试了很长时间后才发现这个问题。我的代码很好,除了缺少一行。

添加后

mesh_1.geometry.computeBoundingSphere();

我的代码按预期工作。

似乎光线转换也需要边界球体。
感谢您的帮助!希望这对遇到同样问题的人有所帮助。

关于javascript - Three.JS - 自定义网格上的光线转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58800187/

相关文章:

javascript - 动态地从 JSON 数组键值对中检索键 - Javascript

three.js - 三个JS - 在片段着色器中获取 "existing"颜色

javascript - 使用 Material 中的 alphaMap 隐藏 Three.js 网格的部分内容

c# - 使用不同颜色的 Material 绘制网格

c++ - 切片网格的算法或软件

从点云生成三角形网格的算法

Javascript 关闭 setTimeout 间隔问题

javascript - 动态函数调用不改变

javascript - Three.js SceneExporter 出现未捕获的语法错误

PHP/Javascript 表单生成器/模式定义器