feat: add an initial LambertMaterialBehavior

packages/lume/docs/js/utils.js

@@ -215,3 +215,47 @@ const buttonsWithShadowExample = stripIndent(/*html*/ `
 		})
 	</script>
 `)
+
+function meshExample({geometry = 'box', material = 'phong', color = ''} = {}) {
+	return stripIndent(/*html*/ `
+		<script src="${location.origin + location.pathname}global.js"></script>
+		${
+			'' /*
+			TODO: The behaviors don't load if the global script is loaded after the
+			scene markup instead of before and there is more than one behavior specified with has="".
+			*/
+		}
+		<style>
+			html,
+			body {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+				background: #222;
+			}
+		</style>
+
+		<lume-scene id="scene" perspective="800" webgl>
+			<lume-point-light position="200 -200 200" intensity="0.6" color="white"></lume-point-light>
+			<lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
+			<lume-camera-rig active initial-distance="400" max-distance="700" min-distance="100"></lume-camera-rig>
+
+			<lume-mesh
+				id="mesh"
+				has="${geometry}-geometry ${material}-material"
+				color="${color}"
+				rotation="90 0 0"
+				size="100 100 100"
+				mount-point="0.5 0.5 0.5"
+			></lume-mesh>
+		</lume-scene>
+
+		<script>
+			// Define all the LUME elements with their default names.
+			LUME.useDefaultNames()
+
+			mesh.rotation = (x, y, z) => [++x, ++y, z]
+		</script>
+	`)
+}

packages/lume/src/behaviors/materials/LambertMaterialBehavior.ts

@@ -0,0 +1,36 @@
+import 'element-behaviors'
+import {MeshLambertMaterial} from 'three/src/materials/MeshLambertMaterial.js'
+import {MaterialBehavior, MaterialBehaviorAttributes} from './MaterialBehavior.js'
+import {MaterialTexture, MaterialTextureAttributes} from './MaterialTexture.js'
+
+export type LambertMaterialBehaviorAttributes = MaterialTextureAttributes | MaterialBehaviorAttributes
+
+/**
+ * @behavior lambert-material
+ * @class LambertMaterialBehavior -
+ * The `lambert-material` behavior gives any mesh a [Lambertian lighting model](https://en.wikipedia.org/wiki/Lambertian_reflectance)
+ * for its material. It uses a
+ * [THREE.MeshLambertMaterial](https://threejs.org/docs/index.html?q=lambert#api/en/materials/MeshLambertMaterial) under the hood.
+ *
+ * ## Example
+ *
+ * <div id="example"></div>
+ *
+ * <script type="application/javascript">
+ *   new Vue({
+ *     el: '#example',
+ *     template: '<live-code :template="code" mode="html>iframe" :debounce="200" />',
+ *     data: { code: meshExample({material: 'lambert', color: 'skyblue'}) },
+ *   })
+ * </script>
+ *
+ * @extends MaterialTexture
+ * @extends MaterialBehavior
+ */
+export class LambertMaterialBehavior extends MaterialTexture(MaterialBehavior) {
+	_createComponent() {
+		return new MeshLambertMaterial({color: 0x00ff00})
+	}
+}
+
+if (!elementBehaviors.has('lambert-material')) elementBehaviors.define('lambert-material', LambertMaterialBehavior)

packages/lume/src/behaviors/materials/MaterialTexture.ts

@@ -5,6 +5,10 @@ import type {Constructor} from 'lowclass'
 import type {MeshPhongMaterial} from 'three/src/materials/MeshPhongMaterial.js'
 import type {MeshBehavior, MeshComponentType} from '../MeshBehavior.js'
 
+// FIXME, Refactor: This class is not accurate at the moment: For example, it is used on
+// MeshLambertMaterialBehavior although THREE.MeshLambertMaterial does not
+// support bumpMap, which this class implements.
+
 export type MaterialTextureAttributes = 'texture' | 'bumpMap' | 'specularMap'
 
 /**

packages/lume/src/behaviors/materials/index.ts

@@ -3,5 +3,6 @@ export * from './MixedPlaneMaterialBehavior.js'
 export * from './MaterialBehavior.js'
 export * from './MaterialTexture.js'
 export * from './PhongMaterialBehavior.js'
+export * from './LambertMaterialBehavior.js'
 export * from './PointsMaterialBehavior.js'
 export * from './ShaderMaterialBehavior.js'

packages/lume/src/meshes/Mesh.react-jsx.d.ts

@@ -1,13 +1,18 @@
 import type {Mesh, MeshAttributes} from './Mesh'
 import type {ReactElementAttributes} from '@lume/element'
 import type {PhongMaterialBehavior, PhongMaterialBehaviorAttributes} from '../behaviors/materials/PhongMaterialBehavior'
+import type {
+	LambertMaterialBehavior,
+	LambertMaterialBehaviorAttributes,
+} from '../behaviors/materials/LambertMaterialBehavior'
 
 // React users can import this to have appropriate types for the element in their JSX markup.
 declare global {
 	namespace JSX {
 		interface IntrinsicElements {
 			'lume-mesh': ReactElementAttributes<Mesh, MeshAttributes> &
-				ReactElementAttributes<PhongMaterialBehavior, PhongMaterialBehaviorAttributes>
+				ReactElementAttributes<PhongMaterialBehavior, PhongMaterialBehaviorAttributes> &
+				ReactElementAttributes<LambertMaterialBehavior, LambertMaterialBehaviorAttributes>
 		}
 	}
 }

packages/lume/src/meshes/Mesh.ts

@@ -56,14 +56,23 @@ import type {
 	PhongMaterialBehavior,
 	PhongMaterialBehaviorAttributes,
 } from '../behaviors/materials/PhongMaterialBehavior.js'
+import type {
+	LambertMaterialBehavior,
+	LambertMaterialBehaviorAttributes,
+} from '../behaviors/materials/LambertMaterialBehavior'
 
 declare module '@lume/element' {
 	namespace JSX {
 		interface IntrinsicElements {
+			// TODO Can we improve ElementAttributes so we don't have to nest them when we want to mix more properties in?
 			'lume-mesh': ElementAttributes<
 				Mesh,
 				MeshAttributes,
-				ElementAttributes<PhongMaterialBehavior, PhongMaterialBehaviorAttributes>
+				ElementAttributes<
+					PhongMaterialBehavior,
+					PhongMaterialBehaviorAttributes,
+					ElementAttributes<LambertMaterialBehavior, LambertMaterialBehaviorAttributes>
+				>
 			>
 		}
 	}