Hello!
Finally, I reached a level of the functionality of my application.
But the performance is super bad.
I am adding line cubes to a scene, creating a grid. When I change the dimensions of the cube and the number of rows and columns I remove all cubes and create a new grid.
Not the most elegant way, but it worked so far.
For the first 2 to 3 changes, everthing runs smoothly but then the performance drops.
I tried to clean the scene manually be looping over the children of the geometry groups and dispose their geometry. But this didn’t do the trick.
Here is an example of the initial code. Should give you an idea of my concept:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 5, -1000);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var dimensions = {
"w": 2,
"h": 1,
"l": 3,
"Woff": 0.5,
"Loff": 1,
"row":1,
"col": 2
}
var addButton = document.createElement("button");
addButton.innerHTML="Add+1"
addButton.onClick = function(){
dimensions.w=dimensions.w+1;
dimensions.l=dimensions.l+1;
updateCubes()
cubeCluster()
}
cubeCluster()
var controls = new THREE.OrbitControls(camera, renderer.domElement);
function cubeCluster(){
for (let ir=0; ir<dimensions.row;ir++){
for(let jc=0;jc<dimensions.col;jc++){
createCube(dimensions.w, dimensions.h, dimensions.l, jc, ir, dimensions.Woff, dimensions.Loff)
}
}
}
function createCube(w, h, l, c, r, Woff, Loff) {
// BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
let cubeGeometry = new THREE.BoxBufferGeometry(w, h, l);
let edges = new THREE.EdgesGeometry( cubeGeometry );
let lineBox = new THREE.LineSegments(
edges, new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 0.5 } )
);
function removeEntity(object) {
let selectedObject = scene.getObjectByName(object);
for (let i in selectedObject.children) {
selectedObject.children[i].geometry.dispose()
selectedObject.remove(selectedObject.children[i]);
}
scene.remove( selectedObject );
animate();
}
function updateSplit(){
let ubList=[];
for(let q in scene.children){
if(scene.children[q].name.match(/UnitBox/)){
ubList.push(scene.children[q].name)
}
}
for(let sc of ubList){
removeEntity(sc);
}
}
I’m really thankfull for some advices.
Cheers!
Stefan
