The CSS2DObject cannot be deleted from the iframe #29660
Description
Description
The CSS2DObject cannot be deleted from the iframe. Not using iframe is fine
Reproduction steps
Not using iframe calling scene.remove is ok,div can be removed from the dom.But the same code that uses an iframe for external calls cannot be removed.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloWorld</title>
</head>
<body>
<iframe id="tempIframe" class="iframe" src="./index.html" frameborder="0">
<div style="color: white;"></div>
</iframe>
<style>
iframe {
position: absolute;
top: 40px;
left: 50px;
width: 500px;
height: 500px;
}
</style>
<script>
let iframeWin = document.getElementById("tempIframe").contentWindow;
setTimeout(() => {
console.log("🚀 ~ iframeWin:", iframeWin)
let len = new iframeWin.Line2D([0, 0, 30, 10, 0, 30,], { isAllArrow: true });
let div = document.createElement('div')
div.innerHTML = `<div style="color: white;"><p>ms</p></div>`
let divObj = iframeWin.DivHelper.Add(
div,
iframeWin.GetCenterPos_V3Lick({ x: 0, y: 0, z: 30 }, { x: 10, y: 0, z: 30 })
)
setTimeout(() => {
console.log("🚀 ~ tempInit ~ DivHelper:", iframeWin.DivHelper.divArr)
iframeWin.DivHelper.Clean();
}, 2000);
}, 1000);
</script>
</body>
</html>
.................. code being called
export class DivHelper {
static divArr: CSS2DObject[] = [];
static Add(div: HTMLDivElement, pos: Vector3Like) {
const obj = new CSS2DObject(div);
obj.layers.set(0);
ThreeHelper.scene.add(obj);
obj.position.copy(pos);
this.divArr.push(obj);
return obj;
}
static Remove(obj: CSS2DObject) {
ThreeHelper.scene.remove(obj);
this.divArr.splice(this.divArr.indexOf(obj), 1);
}
static Clean() {
this.divArr.forEach((item) => {
ThreeHelper.scene.remove(item);
});
}
}Live example
none
Screenshots
No response
Version
0.169.0
Device
No response
Browser
No response
OS
No response