adjust flower and seed, spheres VE

src/matrix.js

@@ -25,10 +25,12 @@ const group = new THREE.Group();
 scene.add( group );
 
 let parts = [];
+let sphereRings = [];
 
 function renderMatrix() {
     for ( const part of parts ) group.remove( part );
     parts = [];
+    sphereRings = [];
 
     const a = params.scale;
 
@@ -93,11 +95,21 @@ function renderMatrix() {
     } );
     const spheres = new THREE.Group();
     const sphereGeometry = new THREE.SphereGeometry( sphereRadius, 48, 48 );
-    // no castShadow: the projection stays an outline of edges and spokes
+    const sphereRingGeometry = new THREE.TorusGeometry( sphereRadius, 0.025, 16, 96 );
+    const sphereRingMaterial = new THREE.MeshBasicMaterial( { color: colors.line, opacity: 0.5, transparent: true } );
+    // the spheres themselves cast nothing; each ring draws the outline and
+    // projects it onto the wall
     for ( const point of [ centre, ...vertices ] ) {
         const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
         sphere.position.copy( point );
         spheres.add( sphere );
+
+        const ring = new THREE.Mesh( sphereRingGeometry, sphereRingMaterial );
+        ring.rotation.y = Math.PI / 2;
+        ring.position.copy( point );
+        ring.castShadow = true;
+        spheres.add( ring );
+        sphereRings.push( ring );
     }
     spheres.visible = params.spheres;
     group.add( spheres );
@@ -108,6 +120,11 @@ renderMatrix();
 
 onUpdate( ( time ) => {
     if ( params.spin ) group.rotation.y = time * 0.15;
+
+    // the outline rings counter the group's spin so they keep facing the wall
+    for ( const ring of sphereRings ) {
+        ring.rotation.y = Math.PI / 2 - group.rotation.y;
+    }
 } );
 
 const gui = new GUI();