javascript - Three.JS - 自定义网格上的光线投射
问题描述
我目前正在尝试在three.js 中对自定义创建的网格进行光线投射。虽然光线投射对某些导入的网格很有吸引力,但它似乎根本不适用于我的自定义网格。
在研究了很长一段时间后,我发现了一些自定义光线投射的典型问题并尝试修复它们(updateMatrixWorld,双面材料,... - 请参见下面的代码)。
我正在使用以下函数进行光线投射:
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();
我的代码按预期工作。
似乎光线投射也需要边界球。
谢谢你的帮助!希望这可以帮助任何有同样问题的人。
推荐阅读
- vuex - 可以在 Vuex 状态下使用 Javascript 类对象吗?
- python - @property:AttributeError:无法设置属性
- javascript - 为什么即使我们在使用 new 关键字创建对象时手动将其更改为另一个构造函数,也会执行 A 对象的构造函数?
- c# - C# 性能 - 线性数组访问与随机访问
- java - java.util.ConcurrentModificationException -- 执行 IO 操作时的错误(不是列表)
- command-line-interface - 如何使 PMD 不计算带有括号的行作为代码行?
- vue.js - vue-cli 如何支持可选的 SCSS,例如主题?
- xml - Add IntervalSeconds Element to Script Based Monitor via MP Author
- eloquent - 使用 Eloquent Query Builder 查询
- c# - 单行印刷系列