Merge pull request #3 from Slaviiiii/add-3d-shapes

examples/cone.fixture.tsx

@@ -0,0 +1,15 @@
+import { CylinderElliptic } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <CylinderElliptic
+      height={5}
+      startRadius={[2, 2]}
+      endRadius={[0, 0]}
+      segments={32}
+      startAngle={0}
+      endAngle={Math.PI * 2}
+    />
+  </JsCadFixture>
+)

examples/cuboid.fixture.tsx

@@ -0,0 +1,8 @@
+import { Cuboid } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture>
+    <Cuboid size={[15, 10, 10]} />
+  </JsCadFixture>
+)

examples/custom-sphere.fixture.tsx

@@ -0,0 +1,8 @@
+import { Sphere } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <Sphere radius={10} segments={64} />
+  </JsCadFixture>
+)

examples/custom-torus.fixture.tsx

@@ -0,0 +1,16 @@
+import { Torus } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <Torus
+      innerRadius={15}
+      outerRadius={20}
+      innerSegments={64}
+      outerSegments={96}
+      innerRotation={Math.PI}
+      outerRotation={Math.PI / 2}
+      startAngle={0}
+    />
+  </JsCadFixture>
+)

examples/cylinder.fixture.tsx

@@ -0,0 +1,8 @@
+import { Cylinder } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <Cylinder radius={10} height={20} />
+  </JsCadFixture>
+)

examples/ellipsoid.fixture.tsx

@@ -0,0 +1,8 @@
+import { Ellipsoid } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <Ellipsoid radius={[15, 10, 10]} />
+  </JsCadFixture>
+)

examples/high-geodesic-sphere.fixture.tsx

@@ -0,0 +1,8 @@
+import { GeodesicSphere } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <GeodesicSphere radius={10} frequency={12} />
+  </JsCadFixture>
+)

examples/low-geodesic-sphere.fixture.tsx

@@ -0,0 +1,8 @@
+import { GeodesicSphere } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <GeodesicSphere radius={10} frequency={6} />
+  </JsCadFixture>
+)

examples/partial-cylindrical-elliptic.fixture.tsx

@@ -0,0 +1,15 @@
+import { CylinderElliptic } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <CylinderElliptic
+      height={6}
+      startRadius={[1, 2]}
+      endRadius={[1, 2]}
+      segments={64}
+      startAngle={0}
+      endAngle={Math.PI / 2}
+    />
+  </JsCadFixture>
+)

examples/rounded-cuboid.fixture.tsx

@@ -0,0 +1,8 @@
+import { RoundedCuboid } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture>
+    <RoundedCuboid size={[15, 10, 10]} roundRadius={1} />
+  </JsCadFixture>
+)

examples/rounded-cylinder.fixture.tsx

@@ -0,0 +1,8 @@
+import { RoundedCylinder } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <RoundedCylinder radius={10} height={20} roundRadius={5} />
+  </JsCadFixture>
+)

examples/torus.fixture.tsx

@@ -0,0 +1,13 @@
+import { Torus } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <Torus
+      innerRadius={1}
+      outerRadius={3}
+      innerSegments={16}
+      outerSegments={64}
+    />
+  </JsCadFixture>
+)

examples/twisted-cylindrical-elliptic.fixture.tsx

@@ -0,0 +1,15 @@
+import { CylinderElliptic } from "../lib"
+import { JsCadFixture } from "../lib/components/jscad-fixture"
+
+export default () => (
+  <JsCadFixture wireframe>
+    <CylinderElliptic
+      height={6}
+      startRadius={[1, 1.5]}
+      endRadius={[1.5, 1]}
+      segments={64}
+      startAngle={0}
+      endAngle={Math.PI * 2}
+    />
+  </JsCadFixture>
+)

lib/create-host-config.ts

@@ -32,6 +32,52 @@ export function createHostConfig(jscad: JSCADModule) {
         case "sphere":
           return jscad.primitives.sphere({
             radius: (props as SphereProps).radius,
+            segments: (props as SphereProps).segments,
+          })
+        case "cuboid":
+          return jscad.primitives.cuboid({
+            size: (props as CuboidProps).size,
+          })
+        case "roundedCuboid":
+          return jscad.primitives.roundedCuboid({
+            size: (props as RoundedCuboidProps).size,
+            roundRadius: (props as RoundedCuboidProps).roundRadius,
+          })
+        case "geodesicSphere":
+          return jscad.primitives.geodesicSphere({
+            radius: (props as GeodesicSphereProps).radius,
+            frequency: (props as GeodesicSphereProps).frequency,
+          })
+        case "ellipsoid":
+          return jscad.primitives.ellipsoid({
+            radius: (props as EllipsoidProps).radius,
+          })
+        case "cylinder":
+          return jscad.primitives.cylinder({
+            radius: (props as CylinderProps).radius,
+            height: (props as CylinderProps).height,
+            startRadius: (props as CylinderProps).startRadius,
+            endRadius: (props as CylinderProps).endRadius,
+          })
+        case "roundedCylinder":
+          return jscad.primitives.roundedCylinder({
+            radius: (props as RoundedCylinderProps).radius,
+            height: (props as RoundedCylinderProps).height,
+            roundRadius: (props as RoundedCylinderProps).roundRadius,
+          })
+        case "cylinderElliptic":
+          return jscad.primitives.cylinderElliptic({
+            radius: (props as CylinderEllipticProps).radius,
+            height: (props as CylinderEllipticProps).height,
+            startRadius: (props as CylinderEllipticProps).startRadius,
+            endRadius: (props as CylinderEllipticProps).endRadius,
+            startAngle: (props as CylinderEllipticProps).startAngle,
+            endAngle: (props as CylinderEllipticProps).endAngle,
+          })
+        case "torus":
+          return jscad.primitives.torus({
+            radius: (props as TorusProps).radius,
+            tube: (props as TorusProps).tube,
           })
         default:
           throw new Error(`Unknown element type: ${type}`)
@@ -88,7 +134,7 @@ export function createHostConfig(jscad: JSCADModule) {
     prepareForCommit() {
       return null
     },
-    resetAfterCommit() {},
+    resetAfterCommit() { },
     getPublicInstance(instance: JSCADPrimitive) {
       return instance
     },
@@ -101,18 +147,18 @@ export function createHostConfig(jscad: JSCADModule) {
     shouldSetTextContent() {
       return false
     },
-    clearContainer() {},
+    clearContainer() { },
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
     noTimeout: -1,
     isPrimaryRenderer: true,
     getCurrentEventPriority: () => 99,
     getInstanceFromNode: () => null,
-    beforeActiveInstanceBlur: () => {},
-    afterActiveInstanceBlur: () => {},
-    prepareScopeUpdate: () => {},
+    beforeActiveInstanceBlur: () => { },
+    afterActiveInstanceBlur: () => { },
+    prepareScopeUpdate: () => { },
     getInstanceFromScope: () => null,
-    detachDeletedInstance: () => {},
+    detachDeletedInstance: () => { },
   }
   return hostConfig
 }

lib/index.tsx

@@ -2,9 +2,40 @@ import ReactReconciler from "react-reconciler"
 import React from "react"
 import type { JSCADModule, JSCADPrimitive } from "./jscad-primitives"
 import { createHostConfig } from "./create-host-config"
-import { Cube, Sphere, type CubeProps, type SphereProps } from "./jscad-fns"
+import {
+  Cube,
+  Sphere,
+  GeodesicSphere,
+  Cuboid,
+  RoundedCuboid,
+  Ellipsoid,
+  Cylinder,
+  RoundedCylinder,
+  CylinderElliptic,
+  Torus,
+  type CubeProps,
+  type SphereProps,
+  type CuboidProps,
+  type RoundedCuboidProps,
+  type GeodesicSphereProps,
+  type EllipsoidProps,
+  type CylinderProps,
+  type RoundedCylinderProps,
+  type CylinderEllipticProps,
+  type TorusProps
+} from "./jscad-fns"
 
-type Props = CubeProps | SphereProps
+type Props =
+  CubeProps |
+  SphereProps |
+  GeodesicSphereProps |
+  CuboidProps |
+  RoundedCuboidProps |
+  EllipsoidProps |
+  CylinderProps |
+  RoundedCylinderProps |
+  CylinderEllipticProps |
+  TorusProps
 
 // Create a function that returns the reconciler and root creation function
 function createJSCADRenderer(jscad: JSCADModule) {
@@ -24,7 +55,7 @@ function createJSCADRenderer(jscad: JSCADModule) {
     )
     return {
       render(element: React.ReactElement) {
-        reconciler.updateContainer(element, root, null, () => {})
+        reconciler.updateContainer(element, root, null, () => { })
       },
     }
   }
@@ -37,9 +68,32 @@ function Scene() {
     <>
       <Cube size={[10, 10, 10]} />
       <Sphere radius={5} />
+      <Sphere radius={5} segments={64} />
+      <GeodesicSphere radius={5} frequency={5} />
+      <Cuboid size={[10, 10, 10]} />
+      <RoundedCuboid size={[10, 10, 10]} roundRadius={5} />
+      <Ellipsoid radius={[5, 5, 5]} />
+      <Cylinder radius={5} height={10} />
+      <RoundedCylinder radius={5} height={10} roundRadius={2} />
+      <CylinderElliptic radius={5} height={10} startRadius={[2, 2]} endRadius={[3, 3]} />
+      <Torus radius={5} segments={32} tube={10} />
     </>
   )
 }
 
 // Export the creation function and components
-export { createJSCADRenderer, Cube, Sphere, Scene }
+// Export the creation function and components
+export {
+  createJSCADRenderer,
+  Cube,
+  Sphere,
+  GeodesicSphere,
+  Cuboid,
+  RoundedCuboid,
+  Ellipsoid,
+  Cylinder,
+  RoundedCylinder,
+  CylinderElliptic,
+  Torus,
+  Scene
+}

lib/jscad-fns/cuboid.tsx

@@ -0,0 +1,7 @@
+export type CuboidProps = {
+  size: number | [number, number, number]
+}
+
+export function Cuboid({ size }: CuboidProps) {
+  return <cuboid size={size} />
+}

lib/jscad-fns/cylinder-elliptic.tsx

@@ -0,0 +1,26 @@
+export type CylinderEllipticProps = {
+  height: number
+  startRadius: [number, number]
+  endRadius: [number, number]
+  segments?: number
+  startAngle?: number
+  endAngle?: number
+}
+
+export function CylinderElliptic({
+  height,
+  startRadius,
+  endRadius,
+  segments = 32,
+  startAngle = 0,
+  endAngle = Math.PI * 2
+}: CylinderEllipticProps) {
+  return <cylinderElliptic
+    height={height}
+    startRadius={startRadius}
+    endRadius={endRadius}
+    segments={segments}
+    startAngle={startAngle}
+    endAngle={endAngle}
+  />
+}

lib/jscad-fns/cylinder.tsx

@@ -0,0 +1,8 @@
+export type CylinderProps = {
+  radius: number
+  height: number
+}
+
+export function Cylinder({ radius, height }: CylinderProps) {
+  return <cylinder radius={radius} height={height} />
+}

lib/jscad-fns/ellipsoid.tsx

@@ -0,0 +1,7 @@
+export type EllipsoidProps = {
+  radius: [number, number, number]
+}
+
+export function Ellipsoid({ radius }: EllipsoidProps) {
+  return <ellipsoid radius={radius} />
+}