npm - @tscircuit/3d-viewer - Versions diffs - 0.0.1 - Mend

@tscircuit/3d-viewer 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/.storybook/main.ts +29 -0
package/.storybook/preview.tsx +24 -0
package/LICENSE +21 -0
package/README.md +5 -0
package/ai-reference/soup-reference.md +1301 -0
package/bun.lockb +0 -0
package/index.html +13 -0
package/package.json +50 -0
package/src/App.tsx +17 -0
package/src/App2.tsx +48 -0
package/src/App3.tsx +209 -0
package/src/App4.tsx +88 -0
package/src/CadViewer.tsx +56 -0
package/src/CadViewerContainer.tsx +73 -0
package/src/GeomContext.ts +3 -0
package/src/bug-pads-and-traces.json +1516 -0
package/src/geoms/constants.ts +9 -0
package/src/geoms/plated-hole.ts +45 -0
package/src/hooks/index.ts +1 -0
package/src/hooks/render/hooks.tsx +62 -0
package/src/hooks/render/index.tsx +440 -0
package/src/hooks/use-convert-children-to-soup.ts +10 -0
package/src/hooks/use-stls-from-geom.ts +54 -0
package/src/index.tsx +1 -0
package/src/main.tsx +9 -0
package/src/modules.d.ts +3 -0
package/src/plated-hole-board.json +213 -0
package/src/soup-to-3d/index.ts +162 -0
package/src/themes.ts +7 -0
package/src/three-components/GeomModel.tsx +13 -0
package/src/three-components/MixedStlModel.tsx +61 -0
package/src/three-components/STLModel.tsx +33 -0
package/src/three-components/cube-with-labeled-sides.tsx +116 -0
package/src/vite-env.d.ts +1 -0
package/stories/Simple.stories.tsx +10 -0
package/stories/assets/soic-with-traces.json +1802 -0
package/tsconfig.json +39 -0
package/vendor/@jscadui/format-three/index.ts +252 -0
package/vite.config.ts +17 -0

package/bun.lockb ADDED Viewed

Binary file

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,50 @@
+{
+  "name": "@tscircuit/3d-viewer",
+  "version": "0.0.1",
+  "main": "./dist/index.cjs",
+  "scripts": {
+    "start": "bun run dev",
+    "dev": "bunx --bun vite",
+    "build": "tsup ./src/index.tsx --dts --sourcemap",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@jscad/modeling": "^2.12.2",
+    "@jscad/regl-renderer": "^2.6.9",
+    "@jscad/stl-serializer": "^2.1.17",
+    "@react-three/drei": "^9.107.2",
+    "@react-three/fiber": "^8.16.8",
+    "@types/three": "^0.165.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use-gesture": "^9.1.3",
+    "three": "^0.165.0",
+    "three-stdlib": "^2.30.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.8.3",
+    "@chromatic-com/storybook": "^1.5.0",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-onboarding": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/builder-vite": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/test": "^8.1.10",
+    "@tscircuit/soup": "^0.0.38",
+    "@tscircuit/soup-util": "^0.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "storybook": "^8.1.10",
+    "strip-ansi": "^7.1.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.1",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import { useState } from "react"
+import { Renderer } from "./hooks/render"
+import App2 from "./App2"
+import App3 from "./App3"
+import App4 from "./App4"
+function App() {
+  return (
+    <div>
+      {/* <App2 /> */}
+      {/* <App3 /> */}
+      <App4 />
+    </div>
+  )
+}
+export default App

package/src/App2.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import {
+  intersect,
+  subtract,
+  union,
+} from "@jscad/modeling/src/operations/booleans"
+import { scale, translate } from "@jscad/modeling/src/operations/transforms"
+import { cube, sphere } from "@jscad/modeling/src/primitives"
+import * as renderingDefaults from "@jscad/regl-renderer/types/rendering/renderDefaults"
+import { light } from "./themes"
+import { useState } from "react"
+import soup from "./plated-hole-board.json"
+// import soup from "./bug-pads-and-traces.json"
+// import { downloadGeometry } from "./helpers"
+import { Renderer } from "./hooks/render"
+import { createBoardGeomFromSoup } from "./soup-to-3d"
+const shape = union(
+  subtract(cube({ size: 3 }), sphere({ radius: 2 })),
+  intersect(sphere({ radius: 1.3 }), cube({ size: 2.1 }))
+)
+const shape2 = translate([0, 0, 1.5], shape)
+const shape3 = scale([3, 3, 3], shape2)
+function App() {
+  const [solids] = useState<any[]>([shape3])
+  return (
+    <div className="App">
+      <Renderer
+        solids={createBoardGeomFromSoup(soup as any)}
+        height={500}
+        width={800}
+        options={{
+          renderingOptions: {
+            background: light.bg,
+            meshColor: light.color,
+          },
+          gridOptions: {
+            // color: light.grid1,
+            // subColor: light.grid2,
+          },
+        }}
+      />
+    </div>
+  )
+}
+export default App

package/src/App3.tsx ADDED Viewed

@@ -0,0 +1,209 @@
+import {
+  Canvas,
+  useFrame,
+  extend,
+  useThree,
+  useLoader,
+} from "@react-three/fiber"
+import { Suspense, useEffect, useMemo, useRef, useState } from "react"
+import { OrbitControls, Grid, Outlines } from "@react-three/drei"
+import * as THREE from "three"
+import { CubeWithLabeledSides } from "./three-components/cube-with-labeled-sides"
+import { createBoardGeomFromSoup } from "./soup-to-3d"
+import soup from "./bug-pads-and-traces.json"
+// import soup from "./plated-hole-board.json"
+import stlSerializer from "@jscad/stl-serializer"
+// import { STLLoader } from "three/examples/jsm/loaders/STLLoader"
+import { MTLLoader, OBJLoader, STLLoader } from "three-stdlib"
+extend({ OrbitControls })
+function Box(props) {
+  const meshRef = useRef<THREE.Mesh>()
+  useFrame((state, delta) => {
+    if (!meshRef.current) return
+    meshRef.current.rotation.x += delta
+    meshRef.current.rotation.y += delta
+  })
+  return (
+    <mesh ref={meshRef} {...props}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color="orange" />
+    </mesh>
+  )
+}
+function blobToBase64Url(blob: Blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      resolve(reader.result)
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}
+const jscadGeom = createBoardGeomFromSoup(soup as any)
+const stlPromises = jscadGeom.map((a) => {
+  const rawData = stlSerializer.serialize({ binary: true }, [a])
+  const blobData = new Blob(rawData)
+  const $urlForStl = blobToBase64Url(blobData)
+  return $urlForStl.then((url) => ({
+    url,
+    color: a.color,
+  }))
+})
+// const entities = entitiesFromSolids({}, ...soupToJscadShape(soup as any))
+// console.log(entities)
+function TestStl({
+  url,
+  color,
+  index,
+}: {
+  index: number
+  url: string
+  color: any
+}) {
+  const threeGeom = useLoader(STLLoader, url)
+  const mesh = useRef<THREE.Mesh>()
+  return (
+    <mesh ref={mesh as any}>
+      <primitive object={threeGeom} attach="geometry" />
+      <meshStandardMaterial
+        color={color}
+        transparent={index === 0}
+        opacity={index === 0 ? 0.8 : 1}
+      />
+      {/* <Outlines thickness={0.05} color="black" opacity={0.25} /> */}
+    </mesh>
+  )
+}
+function TestObj({ url }: { url: string }) {
+  // const group = useLoader(OBJLoader, url)
+  // const materials = useLoader(MTLLoader, url)
+  // const obj = useLoader(OBJLoader, url)
+  const [content, setContent] = useState<string | null>(null)
+  const [obj, setObj] = useState<any | null>(null)
+  useEffect(() => {
+    async function loadUrlContent() {
+      const response = await fetch(url)
+      const text = await response.text()
+      setContent(text)
+      // Extract all the sections of the file that have newmtl...endmtl to
+      // separate into mtlContent and objContent
+      const mtlContent = text
+        .match(/newmtl[\s\S]*?endmtl/g)
+        ?.join("\n")!
+        .replace(/d 0\./g, "d 1.")!
+      const objContent = text.replace(/newmtl[\s\S]*?endmtl/g, "")
+      // console.log({ mtlContent, objContent })
+      console.log("MTL", mtlContent)
+      // console.log("OBJ", objContent)
+      const mtlLoader = new MTLLoader()
+      mtlLoader.setMaterialOptions({
+        invertTrProperty: true,
+      })
+      const materials = mtlLoader.parse(mtlContent, "test.mtl")
+      console.log(materials)
+      const objLoader = new OBJLoader()
+      objLoader.setMaterials(materials)
+      setObj(objLoader.parse(objContent))
+    }
+    loadUrlContent()
+  }, [url])
+  return <>{obj && <primitive object={obj} />}</>
+}
+function Scene() {
+  const [stls, setStls] = useState<Array<{
+    url: string
+    color: number[]
+  }> | null>(null)
+  useEffect(() => {
+    async function loadStls() {
+      const stls = await Promise.all(stlPromises)
+      setStls(stls as any)
+    }
+    loadStls()
+  }, [])
+  return (
+    <>
+      <OrbitControls />
+      <ambientLight intensity={Math.PI / 2} />
+      <pointLight position={[-10, -10, 10]} decay={0} intensity={Math.PI / 4} />
+      {/* <Box /> */}
+      {(stls ?? []).map((stl, i) => (
+        <TestStl index={i} {...stl} key={stl.url} />
+      ))}
+      {/* <TestObj url="https://modules.easyeda.com/3dmodel/4ee8413127e64716b804db03d4b340ae" /> */}
+      <TestObj url="/easyeda-models/84af7f0f6529479fb6b1c809c61d205f" />
+      {/* <axesHelper args={[5]} /> */}
+      <Grid
+        rotation={[Math.PI / 2, 0, 0]}
+        infiniteGrid={true}
+        cellSize={1}
+        sectionSize={10}
+      />
+    </>
+  )
+}
+export const RotationTracker = () => {
+  useFrame(({ camera }) => {
+    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation
+  })
+  return <></>
+}
+export default function App() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 120,
+          height: 120,
+        }}
+      >
+        <Canvas
+          camera={{
+            up: [0, 0, 1],
+            // rotation: [-Math.PI / 2, 0, 0],
+            // lookAt: new THREE.Vector3(0, 0, 0),
+            position: [1, 1, 1],
+          }}
+        >
+          <ambientLight intensity={Math.PI / 2} />
+          <CubeWithLabeledSides />
+        </Canvas>
+      </div>
+      <Canvas
+        scene={{ up: [0, 0, 1] }}
+        camera={{ up: [0, 0, 1], position: [5, 5, 5] }}
+      >
+        <RotationTracker />
+        <Scene />
+      </Canvas>
+    </div>
+  )
+}

package/src/App4.tsx ADDED Viewed

@@ -0,0 +1,88 @@
+import {
+  Canvas,
+  useFrame,
+  extend,
+  useThree,
+  useLoader,
+} from "@react-three/fiber"
+import { Suspense, useEffect, useMemo, useRef, useState } from "react"
+import { OrbitControls, Grid, Outlines } from "@react-three/drei"
+import * as THREE from "three"
+import { CubeWithLabeledSides } from "./three-components/cube-with-labeled-sides"
+import { createBoardGeomFromSoup } from "./soup-to-3d"
+import soup from "./bug-pads-and-traces.json"
+// import soup from "./plated-hole-board.json"
+import stlSerializer from "@jscad/stl-serializer"
+// import { STLLoader } from "three/examples/jsm/loaders/STLLoader"
+import { MTLLoader, OBJLoader, STLLoader } from "three-stdlib"
+import { CommonToThree } from "vendor/@jscadui/format-three"
+import { entitiesFromSolids } from "@jscad/regl-renderer"
+extend({ OrbitControls })
+const jscadGeom = createBoardGeomFromSoup(soup as any)
+const threejs = CommonToThree(THREE)(entitiesFromSolids({}, ...jscadGeom), {
+  smooth: false,
+})
+console.log(threejs)
+function Scene() {
+  return (
+    <>
+      <OrbitControls />
+      <ambientLight intensity={Math.PI / 2} />
+      <pointLight position={[-10, -10, 10]} decay={0} intensity={Math.PI / 4} />
+      <primitive object={threejs} />
+      <Grid
+        rotation={[Math.PI / 2, 0, 0]}
+        infiniteGrid={true}
+        cellSize={1}
+        sectionSize={10}
+      />
+    </>
+  )
+}
+export const RotationTracker = () => {
+  useFrame(({ camera }) => {
+    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation
+  })
+  return <></>
+}
+export default function App() {
+  return (
+    <div style={{ width: "100vw", height: "100vh", position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 120,
+          height: 120,
+        }}
+      >
+        <Canvas
+          camera={{
+            up: [0, 0, 1],
+            // rotation: [-Math.PI / 2, 0, 0],
+            // lookAt: new THREE.Vector3(0, 0, 0),
+            position: [1, 1, 1],
+          }}
+        >
+          <ambientLight intensity={Math.PI / 2} />
+          <CubeWithLabeledSides />
+        </Canvas>
+      </div>
+      <Canvas
+        scene={{ up: [0, 0, 1] }}
+        camera={{ up: [0, 0, 1], position: [5, 5, 5] }}
+      >
+        <RotationTracker />
+        <Scene />
+      </Canvas>
+    </div>
+  )
+}

package/src/CadViewer.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import type { AnySoupElement } from "@tscircuit/soup"
+import { useConvertChildrenToSoup } from "./hooks/use-convert-children-to-soup"
+import { su } from "@tscircuit/soup-util"
+import { useMemo } from "react"
+import { createBoardGeomFromSoup } from "./soup-to-3d"
+import { useStlsFromGeom } from "./hooks/use-stls-from-geom"
+import { STLModel } from "./three-components/STLModel"
+import { CadViewerContainer } from "./CadViewerContainer"
+import { MixedStlModel } from "./three-components/MixedStlModel"
+interface Props {
+  soup?: AnySoupElement[]
+  children?: any
+}
+export const CadViewer = ({ soup, children }: Props) => {
+  soup ??= useConvertChildrenToSoup(children, soup)
+  // TODO convert board
+  const boardGeom = useMemo(() => createBoardGeomFromSoup(soup), [soup])
+  const { stls, loading } = useStlsFromGeom(boardGeom)
+  const cad_components = su(soup).cad_component.list()
+  // TODO canvas/camera etc.
+  return (
+    <CadViewerContainer>
+      {stls.map(({ stlUrl, color }, index) => (
+        <STLModel
+          key={stlUrl}
+          stlUrl={stlUrl}
+          color={color}
+          opacity={index === 0 ? 0.95 : 1}
+        />
+      ))}
+      {/* <MixedStlModel url="/easyeda-models/84af7f0f6529479fb6b1c809c61d205f" /> */}
+      <MixedStlModel
+        url="/easyeda-models/dc694c23844346e9981bdbac7bb76421"
+        position={[0, 0, 0.5]}
+        rotation={[0, 0, Math.PI / 2]}
+      />
+      <MixedStlModel
+        url="/easyeda-models/c7acac53bcbc44d68fbab8f60a747688"
+        position={[-5.65, 0, 0.5]}
+        rotation={[0, 0, Math.PI / 2]}
+      />
+      <MixedStlModel
+        url="/easyeda-models/c7acac53bcbc44d68fbab8f60a747688"
+        position={[6.75, 0, 0.5]}
+        rotation={[0, 0, 0]}
+      />
+    </CadViewerContainer>
+  )
+}

package/src/CadViewerContainer.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import {
+  Canvas,
+  useFrame,
+  extend,
+  useThree,
+  useLoader,
+} from "@react-three/fiber"
+import { Suspense, useEffect, useMemo, useRef, useState } from "react"
+import { OrbitControls, Grid, Outlines } from "@react-three/drei"
+import * as THREE from "three"
+import { CubeWithLabeledSides } from "./three-components/cube-with-labeled-sides"
+import { createBoardGeomFromSoup } from "./soup-to-3d"
+import soup from "./bug-pads-and-traces.json"
+// import soup from "./plated-hole-board.json"
+import stlSerializer from "@jscad/stl-serializer"
+// import { STLLoader } from "three/examples/jsm/loaders/STLLoader"
+import { MTLLoader, OBJLoader, STLLoader } from "three-stdlib"
+export const RotationTracker = () => {
+  useFrame(({ camera }) => {
+    window.TSCI_MAIN_CAMERA_ROTATION = camera.rotation
+  })
+  return <></>
+}
+export const CadViewerContainer = ({ children }: { children: any }) => {
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 120,
+          height: 120,
+        }}
+      >
+        <Canvas
+          camera={{
+            up: [0, 0, 1],
+            // rotation: [-Math.PI / 2, 0, 0],
+            // lookAt: new THREE.Vector3(0, 0, 0),
+            position: [1, 1, 1],
+          }}
+        >
+          <ambientLight intensity={Math.PI / 2} />
+          <CubeWithLabeledSides />
+        </Canvas>
+      </div>
+      <Canvas
+        scene={{ up: [0, 0, 1] }}
+        camera={{ up: [0, 0, 1], position: [5, 5, 5] }}
+      >
+        <RotationTracker />
+        <OrbitControls autoRotate autoRotateSpeed={1} />
+        <ambientLight intensity={Math.PI / 2} />
+        <pointLight
+          position={[-10, -10, 10]}
+          decay={0}
+          intensity={Math.PI / 4}
+        />
+        <Grid
+          rotation={[Math.PI / 2, 0, 0]}
+          infiniteGrid={true}
+          cellSize={1}
+          sectionSize={10}
+        />
+        {children}
+      </Canvas>
+    </div>
+  )
+}

package/src/GeomContext.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export type GeomContext = {
+  pcbThickness: number
+}