How do i increase the size of few sphare in blow code:

Questions
1

function VisualizateNeurons() {
scene = new THREE.Scene();
// set up the options for a perspective camera
const fov = 20;
const aspect = convas.clientWidth / convas.clientHeight;
const near = 0.1;
const far = 100000;
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 300);
controls = new OrbitControls(camera, convas);
controls.enableDamping = true;
controls.enableZoom = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.target.set(100, 50, 30);
controls.update();
//renderer.clear();
geometry = new THREE.BufferGeometry();

scene.background = new THREE.Color(params.Backgound);

const sprite = new THREE.TextureLoader().load(“disc.png”);

const vertices = ;

for (let i = 0; i < 100; i++) {
const x = Networks[i].x * scalingFactor;
const y = Networks[i].y * scalingFactor;
const z = Networks[i].z * scalingFactor;
vertices.push(x, y, z);
vertexColors.push(0.0, 0.0, 1.0);

}

geometry.setAttribute(
“position”,
new THREE.Float32BufferAttribute(vertices, 3)
);
geometry.setAttribute(
“color”,
new THREE.Float32BufferAttribute(vertexColors, 3)
);

material = new THREE.PointsMaterial({
size: parameters.SphereSize,
sizeAttenuation: false,
map: sprite,
alphaTest: parameters.alphaTest,
transparent: parameters.transparent,
vertexColors: true,
});

particles = new THREE.Points(geometry, material);
scene.add(particles);

particles.material.blending = THREE.AlwaysDepth;

renderer = new THREE.WebGLRenderer({
canvas: convas,
antialias: true,
});

renderer.setSize(convas.clientWidth, convas.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.toneMapping = THREE.ReinhardToneMapping;

//////GUI panel code below

var gui = new GUI({ autoPlace: false });
gui.domElement.id = “gui”;
document.getElementById(“panel”).append(gui.domElement);
gui.addColor(params, “Backgound”).onChange(function (value) {
scene.background.set(value);
});

// Add controls to GUI
const cameraFolder = gui.addFolder(“Camera”);
cameraFolder.add(camera.position, “x”, 0, 1000).listen();
cameraFolder.add(camera.position, “y”, 0, 1000).listen();
cameraFolder.add(camera.position, “z”, 0, 1000).listen();

const pm = gui.addFolder(“Sphere Material”);
pm.add(parameters, “SphereSize”, 1, 20).onChange(function () {
material.size = parameters.SphereSize;
});
pm.add(material, “sizeAttenuation”).onChange(function () {
material.needsUpdate = true;
});
pm.add(parameters, “transparent”).onChange(function () {
material.transparent = parameters.transparent;
});
pm.add(parameters, “alphaTest”, 0.2, 1).onChange(function () {
material.alphaTest = parameters.alphaTest;
});

pm.add(material, “vertexColors”).onChange(function () {
material.needsUpdate = true;
});

const toneMappingFolder = gui.addFolder(“tone mapping”);

toneMappingFolder.add(para, “exposure”, 0.1, 2).onChange(function (value) {
renderer.toneMappingExposure = Math.pow(value, 4.0);
});
}

Screenshot 2023-12-11 at 11.27.35 PM
Screenshot 2023-12-11 at 11.27.35 PM1188Ă—1172 35.8 KB

2

Welcome to this community.

Your question may attract more responses if you provide a better description of what you want to achieve. When you paste code, please, paste it formatted as code. However, it is highly recommended that you make an online demo of the issue, so that someone can debug it, change the code and make experiments. All these are not to make your life harder, but to help others to help you.

As for your question:

One easy approach is to have two point clouds – one with small points and one with large points.

Another approach is to create the large points as individual objects that overlap the small points. You said the big points are few, so there should be no problem with performance.

Of course, there are several other approaches; they are better than the ones mentioned above, but they are also more complex.

In any case, good luck with your project.

5 Likes