UPDATE
Upon further investigation, I discovered that the issue with the oversized box occurs specifically when I attempt to incorporate the HelperBox. To demonstrate this problem, I created a JSFiddle, where the second box's size remains unaffected. However, in my actual code, something is causing interference with the second box when the Helper is added to the scene. This interference results in the abnormal size of the box, as depicted in the screenshot: you can see the massive box outline here. Additionally, if you zoom out further, you'll observe that all objects are encompassed within the enormous blue box. I am puzzled as to why this anomaly is occurring, especially considering that the JSFiddle functions correctly. Could the distorted box outlines provide a clue to the root cause?
ORIGINAL
My current project involves checking the collision between two boxes in THREE. While testing, I encountered unexpected results and decided to utilize THREE.BoxHelper. Interestingly, everything works fine when applying the helper to the first box. However, upon adding the helper to the second box, it appears abnormally large. I am struggling to pinpoint the source of this discrepancy. My approach was based on the information provided in this article.
An illustration of the visual output:
https://i.sstatic.net/k7hIc.png
The section of the code responsible for triggering this issue:
const makeTestCube = () => {
testBox = new THREE.Mesh(
new THREE.BoxGeometry(3, 3, 3),
new THREE.MeshBasicMaterial({color: 0xFF0099})//PINK
);
// Code continues...
Complete script:
import sets from './data/sets';
// Remaining code follows...