I set out to bring the brilliance of a brightly glowing Icoshadron Geometry to life in Three.js.
No matter what code I tried, I couldn't achieve the desired glow effect. So, I took the approach of placing the Icoshadron Geometry into a Group with a MeshStandardMaterial featuring opacity of 0.5, and then added 27 lights to it using a for loop. Here's the code snippet I used-
import { AdditiveBlending, FrontSide, MeshStandardMaterial } from "three";
import { ShaderMaterial } from "three";
import { Group } from "three";
...
container.append(renderer.domElement);
The end result was visually pleasing, but unfortunately, it ran at an abysmal speed. As I wanted to rotate the Icoshadron, I attempted to animate the Group, which barely reached a frame rate of 1fps. It's clear that the excessive lights are causing the slowdown, so my dilemma now is how do I achieve the desired glowing effect (similar to infinity stones, but brighter and larger) without compromising performance?