Fix branch growth force to pull toward force.direction as a world axis

The old rotateTowards(qForce, step) form was degenerate when
force.direction equalled the section's natural growth direction
(e.g. (0,1,0) on a vertical trunk): qForce collapsed to identity,
and with negative strength the slerp extrapolated along whatever
tiny tilt the section had drifted into — pushing branches in random
seed-dependent directions instead of toward -force.direction.

Rotate directly around the (sectionUp × force.direction) axis so
force.direction is a real world axis: positive strength pulls
toward it, negative pushes away, and the rotation is zero exactly
when growth is already aligned with the target.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dgreenheck

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated Dockerfile to Node 24 and removed the obsolete `version` attribute from `docker-compose.yml`.
 - Use custom rounded normals for leaves for softer shading (#43).
 
+### Fixed
+
+- `branch.force.direction` now behaves as a real world axis for both positive and negative `strength`. The previous `rotateTowards(qForce, step)` form was degenerate when `force.direction = (0, 1, 0)` (a vertical trunk's natural growth direction): `qForce` collapsed to the identity quaternion, so negative strength extrapolated slerp along whatever tiny tilt the section had drifted into, pushing branches in random seed-dependent directions instead of toward `-force.direction`. The rotation is now applied directly around the `(sectionUp × force.direction)` axis, which is zero exactly when growth is already aligned with the target.
+
 ## [1.1.0] - 2026-01-14
 
 ### Added

src/lib/tree.js

@@ -206,16 +206,30 @@ export class Tree extends THREE.Group {
         this.options.branch.twist[branch.level],
       );
 
-      const qForce = new THREE.Quaternion().setFromUnitVectors(
-        new THREE.Vector3(0, 1, 0),
-        new THREE.Vector3().copy(this.options.branch.force.direction),
-      );
-
       qSection.multiply(qTwist);
-      qSection.rotateTowards(
-        qForce,
-        this.options.branch.force.strength / sectionRadius,
-      );
+
+      // Rotate the section's growth direction toward force.direction (positive
+      // strength) or away from it (negative). The (sectionUp × target) axis
+      // makes force.direction behave as a real world axis: when sectionUp is
+      // already aligned with target the rotation is zero, so a vertical trunk
+      // with force=(0,1,0) doesn't get gnarliness drift amplified — the old
+      // slerp form was degenerate at qForce=identity and pushed branches in
+      // whatever random direction the section had drifted.
+      const sectionUp = new THREE.Vector3(0, 1, 0).applyQuaternion(qSection);
+      const target = new THREE.Vector3()
+        .copy(this.options.branch.force.direction)
+        .normalize();
+      const axis = new THREE.Vector3().crossVectors(sectionUp, target);
+      const sinFull = axis.length();
+      if (sinFull > 1e-6) {
+        axis.divideScalar(sinFull);
+        const fullAngle = Math.atan2(sinFull, sectionUp.dot(target));
+        const step = this.options.branch.force.strength / sectionRadius;
+        const clamped = Math.max(-fullAngle, Math.min(fullAngle, step));
+        qSection.premultiply(
+          new THREE.Quaternion().setFromAxisAngle(axis, clamped),
+        );
+      }
 
       // Apply trellis force if enabled
       if (this.options.trellis.enabled) {