feat: add a CircleFacade primitive

packages/troika-3d/src/facade/primitives/CircleFacade.js

@@ -0,0 +1,38 @@
+import { utils } from 'troika-core'
+import { CircleBufferGeometry } from 'three'
+import { MeshFacade } from './MeshFacade.js'
+
+const geometries = Object.create(null, [
+  ['low', 32],
+  ['medium', 64],
+  ['high', 128]
+].reduce((descr, [name, segments]) => {
+  descr[name] = {
+    get: utils.memoize(() => new CircleBufferGeometry(1, segments))
+  }
+  return descr
+}, {}))
+
+export function getCircleGeometry(detail) {
+  return geometries[detail] || geometries.medium
+}
+
+/**
+ * A simple planar circle, laying along the x-z plane, facing the positive y axis, centered on the origin.
+ * The `radius` property is an alias to uniform `scaleX` and `scaleZ`. Set `scaleX/Y/Z` individually if
+ * you need non-uniform scaling.
+ * The `detail` property allows selecting a LOD; its values can be 'low', 'medium', or 'high'.
+ * To control the material, see {@link MeshFacade}.
+ */
+export class CircleFacade extends MeshFacade {
+  get geometry() {
+    return getCircleGeometry(this.detail)
+  }
+
+  set radius(r) {
+    this.scaleX = this.scaleZ = r
+  }
+  get radius() {
+    return this.scaleX
+  }
+}

packages/troika-3d/src/facade/primitives/PlaneFacade.js

@@ -7,7 +7,7 @@ const getGeometry = utils.memoize(() => {
 })
 
 /**
- * A simple rectangular plane that lays along the x-z plane, facing up, centered on the origin.
+ * A simple rectangular plane, laying along the x-z plane, facing the positive y axis, centered on the origin.
  * The `width` property controls x scale and the `depth` property controls z scale.
  * To control the material, see {@link MeshFacade}.
  */

packages/troika-3d/src/facade/primitives/SphereFacade.js

@@ -2,21 +2,16 @@ import { utils } from 'troika-core'
 import { SphereBufferGeometry } from 'three'
 import { MeshFacade } from './MeshFacade.js'
 
-function createGeometry(widthSegments, heightSegments) {
-  return new SphereBufferGeometry(1, widthSegments, heightSegments)
-}
-
-const geometries = Object.create(null, {
-  low: {
-    get: utils.memoize(() => createGeometry(16, 12))
-  },
-  medium: {
-    get: utils.memoize(() => createGeometry(32, 24))
-  },
-  high: {
-    get: utils.memoize(() => createGeometry(64, 48))
+const geometries = Object.create(null, [
+  ['low', 16, 12],
+  ['medium', 32, 24],
+  ['high', 64, 48]
+].reduce((descr, [name, wSegs, hSegs]) => {
+  descr[name] = {
+    get: utils.memoize(() => new SphereBufferGeometry(1, wSegs, hSegs))
   }
-})
+  return descr
+}, {}))
 
 export function getSphereGeometry(detail) {
   return geometries[detail] || geometries.medium

packages/troika-3d/src/index.js

@@ -14,6 +14,7 @@ export {default as Instanceable3DFacade} from './facade/instancing/Instanceable3
 
 // Primitives
 export {BoxFacade} from './facade/primitives/BoxFacade.js'
+export {CircleFacade} from './facade/primitives/CircleFacade.js'
 export {CubeFacade} from './facade/primitives/CubeFacade.js'
 export {MeshFacade} from './facade/primitives/MeshFacade.js'
 export {PlaneFacade} from './facade/primitives/PlaneFacade.js'