Three.js CSS3DRenderer: Do not touch other items - three.js

Question

I use random positions for my items in my Three.js CSS3DRenderer scene.
Some items touch each other. Is there a way to avoid that?
Code:
// Setup
items.forEach((jksalfjlasdk) => {
const item = new CSS3DObject(item);
item.position.x = Math.random() * 1000 - 500;
item.position.y = Math.random() * 1000 - 500;
item.position.z = Math.random() * 1000 - 500;
item.rotation.y = Math.random() * 0.5 - 0.5;
scene.add(item);
});

Answer 1

I made a script for something like that a while ago, as I wanted to randomly generate evenly distributed spheres on a 3D space.
You pass the number of objects you want to render and the amount of tries for each one to get the one further away from the rest (a lower number gives you better performance, a bigger number a better result, 10 should be alright in most cases).
function randomPointsSpace(qty, tries){
let points = [];
for(let i=0; i<qty; i++){
let candidates = [];
for(let j=0; j<tries; j++){
candidates.push(getCandidate());
}
points.push(getBestCandidate(points, candidates));
}
return points;
}
function getCandidate(){
return {x: Math.random(), y: Math.random(), z: Math.random()};
}
function getBestCandidate(members, candidates){
let max = 0,
selected;
for(let k=0; k<candidates.length; k++){
let min = 1,
c = candidates[k];
for(let l=0; l<members.length; l++){
let m = members[l];
let dist = Math.sqrt( (c.x-m.x) ** 2 + (c.y-m.y) ** 2 + (c.z-m.z) ** 2 ) - m.r/2;
if(dist < min){
min = dist;
}
}
if(min > max){
max = min;
selected = c;
selected.r = min/2;
}
}
return selected;
}
const ar = randomPointsSpace(20, 10);
console.log(ar);
Then you get an array of object with the coordinates x, y, x and the radio r, all as numbers between 0 and 1 that you have to multiply by the size of your 3D space.
ar = [
{
"x": 0.33811887215352576,
"y": 0.942598814594636,
"z": 0.4027051631550116,
"r": 0.5
},
{
"x": 0.7434202306598208,
"y": 0.10045068968699278,
"z": 0.010629850147066078,
"r": 0.38175578599626914
},
{
"x": 0.6657177122961799,
"y": 0.07700830496311029,
"z": 0.875727933811969,
"r": 0.3390095317818107
}
];
const canvasLateral = 1000;
const objectsMaxSize = 400;
ar.map( (a) => {
a.x *= canvasLateral;
a.y *= canvasLateral;
a.z *= canvasLateral;
a.r *= objectsMaxSize;
});
console.log(ar);