Release 1.2.0

examples/complex-materials/src/Bunny.tsx

@@ -14,6 +14,7 @@ export default function Bunny(props: any) {
   const [ref] = useSphere(() => ({}))
 
   return (
+    // @ts-ignore
     <group ref={group} dispose={null}>
       {/* @ts-ignore */}
       <mesh ref={ref} scale={0.01} castShadow receiveShadow geometry={nodes.Bunny.geometry}>

examples/complex-materials/src/Floor.tsx

@@ -6,7 +6,7 @@ export default function Floor(props: PlaneProps) {
     // @ts-ignore
     <mesh ref={ref} receiveShadow>
       <planeBufferGeometry args={[2000, 2000]} />
-      <shadowMaterial color="#2114db" />
+      <shadowMaterial color="#141414" opacity={0.2} />
     </mesh>
   )
 }

examples/example-configurator/src/Monkey.tsx

@@ -2,15 +2,15 @@
 Auto-generated by: https://github.com/pmndrs/gltfjsx
 */
 
-import React, { useEffect, useMemo, useState } from 'react'
-import { useGLTF, TransformControls, OrbitControls } from '@react-three/drei'
-import { Color, DebugLayerMaterial, Depth, LayerMaterial } from 'lamina'
+import React, { useState } from 'react'
+import { useGLTF, TransformControls, OrbitControls, useTexture } from '@react-three/drei'
+import { LaminaDebugger } from 'lamina/debug'
 import * as LAYERS from 'lamina'
 import { button, useControls } from 'leva'
-import { SerializedLayer } from 'lamina/types'
+import { MathUtils } from 'three'
 
 export default function Monkey() {
-  const { nodes, scene } = useGLTF('/monkey.glb') as any
+  const { nodes } = useGLTF('/monkey.glb') as any
   const orbitControls = React.useRef<any>(null!)
   const transformControls = React.useRef<any>(null!)
 
@@ -24,21 +24,7 @@ export default function Monkey() {
   })
 
   const [layers, setLayers] = useState<any[]>([])
-  const [materialProps, setMaterialProps] = useState<{ [key: string]: any }>({})
-
-  useEffect(() => {
-    ;(async () => {
-      const json = await (await fetch('/initialMaterial.json')).json()
-      const l = json.layers.map((layer: SerializedLayer) => {
-        // @ts-ignore
-        const Component = LAYERS[layer.constructor]
-        return <Component {...layer.properties} />
-      })
-
-      setMaterialProps(json.properties)
-      setLayers(l)
-    })()
-  }, [])
+  const InitialMaterial = LAYERS.useLamina('/initialMaterial.json')
 
   useControls('Layers', {
     Type: {
@@ -59,19 +45,29 @@ export default function Monkey() {
       const k = get('Layers.Type')
       // @ts-ignore
       const Component = LAYERS[k]
-
-      setLayers((s) => [...s, <Component />])
+      setLayers((s) => [...s, Component])
     }),
   })
 
+  const tex = useTexture('/UV.jpg')
   return (
     <>
       <TransformControls ref={transformControls}>
         <group scale={0.1} rotation={[0, -Math.PI / 2, Math.PI / 4]}>
           <mesh matrixAutoUpdate geometry={nodes.Suzanne.geometry} rotation-y={Math.PI / 2} scale={30}>
-            <DebugLayerMaterial transparent {...materialProps}>
-              {...layers}
-            </DebugLayerMaterial>
+            <LaminaDebugger>
+              {/* <InitialMaterial>
+                {layers.map((Layer, i) => (
+                  <Layer key={`layer-${i}`} />
+                ))}
+              </InitialMaterial> */}
+              <LAYERS.LayerMaterial>
+                <LAYERS.Texture map={tex} />
+                {layers.map((Layer, i) => (
+                  <Layer key={`layer-${i}`} />
+                ))}
+              </LAYERS.LayerMaterial>
+            </LaminaDebugger>
           </mesh>
         </group>
       </TransformControls>

examples/mesh-gradients/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "mesh-gradients",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@pmndrs/branding": "^0.0.8",
+    "@react-spring/three": "^9.4.4",
+    "@react-three/cannon": "^6.1.0",
+    "@react-three/drei": "^9.0.1",
+    "@react-three/fiber": "^8.0.3",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/three": "^0.139.0",
+    "lamina": "^1.1.13",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "5.0.1",
+    "three": "^0.139.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/mesh-gradients/public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lamina | Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

examples/mesh-gradients/src/App.jsx

@@ -0,0 +1,58 @@
+import { Canvas } from '@react-three/fiber'
+import { Environment, Sphere } from '@react-three/drei'
+import { Suspense } from 'react'
+import { Color, Depth, Gradient, LayerMaterial, Shader } from 'lamina'
+import { useState } from 'react'
+import { OrbitControls } from '@react-three/drei'
+import * as THREE from 'three'
+import { Stats } from '@react-three/drei'
+
+function Thing() {
+  const [state, set] = useState(0)
+
+  return (
+    <Sphere
+      onPointerEnter={() => set(1)} //
+      onPointerLeave={() => set(0)}
+    >
+      <LayerMaterial lighting="physical" roughness={0}>
+        <Color color="red" />
+        <Shader
+          fragment={`
+            uniform vec3 u_color;
+            uniform float u_alpha;
+
+            void main() {
+              return vec4(u_color, u_alpha);
+            }  
+          `}
+          u_color={new THREE.Color('blue')}
+          u_alpha={state}
+          mode="divide"
+        />
+      </LayerMaterial>
+    </Sphere>
+  )
+}
+
+export default function App() {
+  return (
+    <>
+      <Stats />
+      <Canvas
+        camera={{
+          position: [2, 2, 2],
+        }}
+      >
+        <Suspense fallback={null}>
+          <Environment preset="sunset" />
+        </Suspense>
+
+        <Thing />
+
+        <gridHelper />
+        <OrbitControls />
+      </Canvas>
+    </>
+  )
+}

examples/mesh-gradients/src/index.css

@@ -0,0 +1,57 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+body,
+canvas {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #090909;
+}
+
+.copy {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.copy svg {
+  width: 32px;
+  fill: white;
+}
+
+.copy > * {
+  padding: 32px;
+}
+
+a {
+  font-style: italic;
+  color: #ee7d3b;
+  font-weight: bold;
+  text-decoration: none;
+  pointer-events: all;
+}
+
+canvas {
+  cursor: grab;
+}
+
+canvas:active {
+  cursor: grabbing;
+}

examples/mesh-gradients/src/index.jsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(<App />)