I have a dynamic msg_arr array of strings that I want to display visually, and I need to clear the existing errs Group of CSS2DObject from the scene before creating a new errors Group.
The issue here is that although the new CSS2DObjects are added successfully to the Group, the reset operation: this.scene.remove(this.errs); doesn't seem to be working properly!
Do I need to remove and create a new CSS2DRenderer instead?
Could you please guide me on how to ensure the complete resetting of the old Group before initializing the new one? Thank you in advance.
var camera, scene, renderer, errs;
/**
ErrVisu class
*/
class ErrVisu{
constructor(scene){
this.scene = scene;
}
visuError=(x, y, errs)=>{
const x_mm = y * 0.8 - 8.8;
const y_mm = 2.5;
const z_mm = x * 0.8 - 2.4;
const circle = document.createElement('div');
circle.id = "circle";
circle.innerHTML = "!";
const objectCSS = new THREE.CSS2DObject(circle);
objectCSS.position.set(x_mm, y_mm, z_mm);
objectCSS.name = 'exc_' + x + y;
errs.add(objectCSS);
}
errsIface = (msg_arr) => {
this.scene.remove(this.errs);
this.errs = new THREE.Group();
this.errs.name = "errors";
for (let k in msg_arr) {
let p_xx_yy = msg_arr[k].split("_");
let x = Number(p_xx_yy[1]);
let y = Number(p_xx_yy[2]);
this.visuError(x, y, this.errs);
}
this.scene.add(this.errs);
}
}
/**
Create the scene, camera, renderer
*/
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x21252d);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 1;
camera.position.y = 4;
camera.position.z = 5;
scene.add(camera);
labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild( labelRenderer.domElement );
controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
errs = new ErrVisu(scene);
let msg_arr_ = [ "p_06_08" ];
errs.errsIface(msg_arr_);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
labelRenderer.render( scene, camera );
}
init();
animate();#circle {
color: #ffffff;
background: #ff5500;
width: 30px;
height: 30px;
border-radius: 50%;
text-align: center;
font-size: 25px;
font-weight: bold;
display: inline-block;
animation: blinkingBackground 0.5s infinite;
}
@keyframes blinkingBackground {
0% {
opacity: 1;
}
25% {
opacity: 0.5;
}
50% {
opacity: 0.1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03776b71666643332d3231312d33">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93e7fbe1f6f6d3a3bda2a1a1bda3">[email protected]</a>/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61150913040421514f5053534f51">[email protected]</a>/examples/js/renderers/CSS2DRenderer.js"></script>