While I have experience with Three.JS, my work has not involved meshes before. I believe that I am on the right track in solving my current issue, but I still have some uncertainties.
The Objective
My goal is to create a 3D blob-like object with specific vertices. The positions of these vertices are fixed, while their distances from the center vary. This object can be visualized as a radial 3D audio equalizer.
I am willing to reconsider my approach and explore other methods if there is an easier way to achieve this.
Current Status
I found this example and customized it to suit my requirements. Below is the HTML and JavaScript code:
HTML (disco-ball.html)
<!DOCTYPE html>
<html>
<head>
<title>Disco Ball</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/ConvexGeometry.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style type='text/css'>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript" src="01-app.js"></script>
</body>
</html>
And the JavaScript (01-app.js):
Challenges Faced
- In the current setup, certain points on the "ball" have double the radius, creating large spikes. However, due to using ConvexGeometry, some points are hidden because the shape is convex. How can I utilize a non-convex geometry to avoid hiding these spiked points?
- I would like to refine the mesh by introducing some subdivision for smoother transitions instead of just straight connections between vertices. How can I achieve this to make the spikes appear more blended and less pointed?
- It's essential for me to modify the mesh so that different points exhibit varying levels of spiking at intervals (based on provided data arrays). Is there a way to alter the geometry post-creation, possibly incorporating tweening effects for gradual changes?
Thank you for any guidance or suggestions!