feat: add subdivide support

README.md

@@ -64,6 +64,7 @@ You can see working the examples from `.storybook/stories` [here](https://gabote
 | `onFinishLoading`          | `(ev: ModelDimensions) => any`| `false`   | callback triggered when Stl is fully loaded |
 | `onError`                  | `(err: Error) => any`      | `false`      | callback triggered when an error occurred while loading Stl|
 | `canvasId`                 | `string`                   | `false`      | id of the canvas element used for rendering the model |
+| `subdivide`                    | `number`            | `0`      |subdivide-level, subdivide modifier ([support by three-subdivide](https://github.com/stevinz/three-subdivide)) iterations, total passes of subdivision to apply, generally between 1 to 5, more see [`SubdivideProps`](#subdivideprops)|
 The component also accepts ```<div/>``` props
 
 ## Interfaces
@@ -95,3 +96,18 @@ The component also accepts ```<div/>``` props
 | `width`                    | `number`                   | width of the 3d object |
 | `height`                   | `number`                   | height of the 3d object |
 | `length`                   | `number`                   | length of the 3d object |
+
+
+### SubdivideProps
+`react-stl-viewer` support subdivide modifier, you can smaller file sizes mesh to render smoother effects. So, why we need this? [-> more details #37](https://github.com/gabotechs/react-stl-viewer/pull/37#issuecomment-1704653068)
+
+
+ref: [three-subdivide](https://github.com/stevinz/three-subdivide#modify)
+| Prop                       | Type                       | Required | Notes                                                                                                                                                                                       |
+| ----------------------     | :------------------------: | :----------: | :----------------------------------------------------------:                                                                                                                                |
+| `split`                   | `boolean`                 |`false`    | split coplanar faces at their shared edges before subdividing? |
+| `uvSmooth`                | `boolean`                 |`false`    | smooth UV coordinates during subdivision?|
+| `preserveEdges`           | `boolean`                 |`false`    | should edges / breaks in geometry be ignored during subdivision?|
+| `flatOnly`                | `boolean`                |`false`    | subdivide triangles but do not apply smoothing?|
+| `maxTriangles`            | `number`                  |`false`    | limits subdivision to meshes with less than this number of triangles, default is `Infinity`|
+

package.json

@@ -40,7 +40,8 @@
   },
   "dependencies": {
     "@react-three/fiber": "8.9.1",
-    "three-stdlib": "2.17.2"
+    "three-stdlib": "2.17.2",
+    "three-subdivide": "^1.1.5"
   },
   "peerDependencies": {
     "react": ">=18.0",

src/StlViewer/SceneSetup.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useState } from 'react'
+import React, { CSSProperties, useEffect, useState, useMemo } from 'react'
 import { useFrame, useLoader } from '@react-three/fiber'
 import { STLLoader } from 'three-stdlib/loaders/STLLoader'
 import { Box3, Color, Group, Mesh } from 'three'
@@ -8,6 +8,7 @@ import Floor from './SceneElements/Floor'
 import Lights from './SceneElements/Lights'
 import Camera, { CameraInitialPosition } from './SceneElements/Camera'
 import OrbitControls from './SceneElements/OrbitControls'
+import { LoopSubdivision } from 'three-subdivide'
 
 const INITIAL_LATITUDE = Math.PI / 8
 const INITIAL_LONGITUDE = -Math.PI / 8
@@ -46,6 +47,16 @@ export interface SceneSetupProps {
   onFinishLoading?: (ev: ModelDimensions) => any
   modelProps?: ModelProps
   floorProps?: FloorProps
+  subdivide?: number
+  subdivideProps?: SubdivideProps
+}
+
+export interface SubdivideProps {
+  split: boolean
+  uvSmooth: boolean
+  preserveEdges: boolean
+  flatOnly: boolean
+  maxTriangles: number
 }
 
 const SceneSetup: React.FC<SceneSetupProps> = (
@@ -55,7 +66,8 @@ const SceneSetup: React.FC<SceneSetupProps> = (
     shadows = false,
     showAxes = false,
     orbitControls = false,
-    onFinishLoading = () => {},
+    onFinishLoading = () => { },
+    subdivide = 0,
     modelProps: {
       ref,
       scale = 1,
@@ -69,7 +81,14 @@ const SceneSetup: React.FC<SceneSetupProps> = (
     floorProps: {
       gridWidth,
       gridLength
-    } = {}
+    } = {},
+    subdivideProps = {
+      split: true,
+      uvSmooth: false,
+      preserveEdges: false,
+      flatOnly: false,
+      maxTriangles: Infinity
+    }
   }
 ) => {
   const [mesh, setMesh] = useState<Mesh>()
@@ -95,11 +114,19 @@ const SceneSetup: React.FC<SceneSetupProps> = (
     (loader) => loader.setRequestHeader(extraHeaders ?? {})
   )
 
-  function onLoaded (dims: ModelDimensions, mesh: Mesh): void {
+  const subdividedGeometry = useMemo(
+    () => subdivide > 0
+      ? LoopSubdivision.modify(geometry, subdivide, subdivideProps)
+      : undefined,
+    [geometry, subdivide]
+  )
+
+
+  function onLoaded(dims: ModelDimensions, mesh: Mesh): void {
     setMesh(mesh)
     const { width, length, height, boundingRadius } = dims
     setMeshDims(dims)
-    setModelCenter([positionX ?? width/2, positionY ?? length/2, height/2])
+    setModelCenter([positionX ?? width / 2, positionY ?? length / 2, height / 2])
     const maxGridDimension = Math.max(gridWidth ?? 0, gridLength ?? 0)
     const distance = maxGridDimension > 0
       ? maxGridDimension
@@ -128,49 +155,49 @@ const SceneSetup: React.FC<SceneSetupProps> = (
     const mesh = scene.getObjectByName('mesh') as Mesh
     const group = scene.getObjectByName('group') as Group
     const bbox = new Box3().setFromObject(mesh)
-    const height = bbox.max.z-bbox.min.z
-    group.position.z = height/2
+    const height = bbox.max.z - bbox.min.z
+    group.position.z = height / 2
   })
 
   const modelPosition: [number, number, number] = [
-    positionX ?? (meshDims.width*scale)/2,
-    positionY ?? (meshDims.length*scale)/2,
+    positionX ?? (meshDims.width * scale) / 2,
+    positionY ?? (meshDims.length * scale) / 2,
     0
   ]
 
   return (
-        <>
-            <scene background={BACKGROUND}/>
-            {sceneReady && showAxes && <axesHelper scale={[50, 50, 50]}/>}
-            {(cameraInitialPosition != null) && <Camera
-                initialPosition={cameraInitialPosition}
-                center={modelCenter}
-            />}
-            <Model3D
-                name={'group'}
-                meshProps={{ name: 'mesh' }}
-                scale={scale}
-                geometry={geometry}
-                position={modelPosition}
-                rotation={[rotationX, rotationY, rotationZ]}
-                visible={sceneReady}
-                materialProps={{ color }}
-                onLoaded={onLoaded}
-            />
-            <Floor
-                width={gridWidth ?? gridLength}
-                length={gridLength ?? gridWidth}
-                visible={sceneReady}
-                noShadow={!shadows}
-                offset={FLOOR_DISTANCE}
-            />
-            <Lights
-                distance={LIGHT_DISTANCE}
-                offsetX={modelPosition[0]}
-                offsetY={modelPosition[1]}
-            />
-            {sceneReady && orbitControls && <OrbitControls target={modelCenter} />}
-        </>
+    <>
+      <scene background={BACKGROUND} />
+      {sceneReady && showAxes && <axesHelper scale={[50, 50, 50]} />}
+      {(cameraInitialPosition != null) && <Camera
+        initialPosition={cameraInitialPosition}
+        center={modelCenter}
+      />}
+      <Model3D
+        name={'group'}
+        meshProps={{ name: 'mesh' }}
+        scale={scale}
+        geometry={subdivide > 0 ? subdividedGeometry : geometry}
+        position={modelPosition}
+        rotation={[rotationX, rotationY, rotationZ]}
+        visible={sceneReady}
+        materialProps={{ color }}
+        onLoaded={onLoaded}
+      />
+      <Floor
+        width={gridWidth ?? gridLength}
+        length={gridLength ?? gridWidth}
+        visible={sceneReady}
+        noShadow={!shadows}
+        offset={FLOOR_DISTANCE}
+      />
+      <Lights
+        distance={LIGHT_DISTANCE}
+        offsetX={modelPosition[0]}
+        offsetY={modelPosition[1]}
+      />
+      {sceneReady && orbitControls && <OrbitControls target={modelCenter} />}
+    </>
   )
 }
 

src/StlViewer/StlViewer.tsx

@@ -24,6 +24,8 @@ const StlViewer: React.FC<StlViewerProps> = (
     shadows,
     showAxes,
     orbitControls,
+    subdivide,
+    subdivideProps,
     ...otherProps
   }
 ) => {
@@ -35,7 +37,9 @@ const StlViewer: React.FC<StlViewerProps> = (
     onFinishLoading,
     shadows,
     showAxes,
-    orbitControls
+    orbitControls,
+    subdivide,
+    subdivideProps
   }
 
   return (

src/StlViewer/index.ts

@@ -2,4 +2,4 @@ export { ModelDimensions } from './SceneElements/Model3D'
 export { CameraInitialPosition } from './SceneElements/Camera'
 export { default as StlViewer } from './StlViewer'
 export type { StlViewerProps } from './StlViewer'
-export type { ModelProps, ModelRef, FloorProps } from './SceneSetup'
+export type { ModelProps, ModelRef, FloorProps, SubdivideProps } from './SceneSetup'

yarn.lock

@@ -13881,6 +13881,7 @@ __metadata:
     rollup-plugin-typescript2: ^0.34.1
     three: ^0.133.0
     three-stdlib: 2.17.2
+    three-subdivide: ^1.1.5
     ts-jest: ^28.0.5
     typescript: ^4.7.3
   peerDependencies:
@@ -15774,6 +15775,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"three-subdivide@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "three-subdivide@npm:1.1.5"
+  peerDependencies:
+    three: ">= 0.125.0"
+  checksum: 5459b49943c9211ffaa0375ff8562692e9684f48459397a7215120da4f506429d8febbcf97faf934df9344121cf7145a6e432e79cb68c9aec239668c70285667
+  languageName: node
+  linkType: hard
+
 "three@npm:^0.133.0":
   version: 0.133.1
   resolution: "three@npm:0.133.1"