Remove "under construction" notes and add fill in initial content! 🎉 …

…In the process, add more demos for explanation, as well as a new Texture Shadow demo that shows how to cast a shadow based on the non-transparent parts of a textured mesh.
lume · Jan 5, 2024 · ca3cf04 · ca3cf04
1 parent dd0b529
commit ca3cf04
Show file tree

Hide file tree

Showing 35 changed files with 937 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -140,7 +140,7 @@ cement wall -- but notice:
 
 and this gives us a version of the same concept with more realism:
 
-<live-code src="./examples/buttons-with-shadow.html"></live-code>
+<live-code src="./examples/buttons-with-shadow/example.html"></live-code>
 
 Lume is built as [Custom
 Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) (also

diff --git a/_sidebar.md b/_sidebar.md
@@ -4,14 +4,14 @@
   - [Install](/guide/install/)
   - [Making a Scene](/guide/making-a-scene)
   - [Custom Element Names](/guide/custom-element-names)
-  - [Scene Graph](/guide/scene-graph)
+  - [Scene Graph](/guide/scene-graph/)
   - [Common Attributes](/guide/common-attributes)
-  - [Positioning](/guide/positioning/)
   - [Sizing](/guide/sizing)
+  - [Positioning](/guide/positioning/)
   - [Rendering Modes](/guide/rendering-modes)
-  - [Reactivity](/guide/reactivity)
   - [Cameras](/guide/cameras/)
   - [External Assets](/guide/external-assets/)
+  - [Reactivity](/guide/reactivity)
   - [Making Elements](/guide/making-elements)
   - [Compatibility](/guide/compatibility)
   - [Debugging](/guide/debugging)
@@ -29,7 +29,8 @@
   - [✨ Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
   - [🏎️ Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
   - [Disco Helmet](/examples/disco-helmet/ ':class=no-sublist')
-  - [Buttons with shadow](/examples/buttons-with-shadow.md ':class=no-sublist')
+  - [Buttons with shadow](/examples/buttons-with-shadow/ ':class=no-sublist')
+  - [Texture Shadow](/examples/texture-shadow/ ':class=no-sublist')
   - [Rounded rectangle](/examples/rounded-rectangle.md ':class=no-sublist')
   - [Ripple flip](/examples/ripple-flip.md ':class=no-sublist')
   - [Morphing spiral](/examples/spiral.md ':class=no-sublist')
@@ -43,6 +44,8 @@
 - **Packages**
 
   - [element-behaviors](/guide/includes/lume-element-behaviors)
+  - [classy-solid](/guide/includes/classy-solid)
+  - [@lume/element](/guide/includes/lume-element)
   - [@lume/autolayout](/guide/layouts-with-autolayout)
   - [@lume/three-meshline](/three-meshline/)
 

diff --git a/_sidebar.src.md b/_sidebar.src.md
@@ -4,14 +4,14 @@
   - [Install](/guide/install/)
   - [Making a Scene](/guide/making-a-scene)
   - [Custom Element Names](/guide/custom-element-names)
-  - [Scene Graph](/guide/scene-graph)
+  - [Scene Graph](/guide/scene-graph/)
   - [Common Attributes](/guide/common-attributes)
-  - [Positioning](/guide/positioning/)
   - [Sizing](/guide/sizing)
+  - [Positioning](/guide/positioning/)
   - [Rendering Modes](/guide/rendering-modes)
-  - [Reactivity](/guide/reactivity)
   - [Cameras](/guide/cameras/)
   - [External Assets](/guide/external-assets/)
+  - [Reactivity](/guide/reactivity)
   - [Making Elements](/guide/making-elements)
   - [Compatibility](/guide/compatibility)
   - [Debugging](/guide/debugging)
@@ -29,7 +29,8 @@
   - [✨ Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
   - [🏎️ Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
   - [Disco Helmet](/examples/disco-helmet/ ':class=no-sublist')
-  - [Buttons with shadow](/examples/buttons-with-shadow.md ':class=no-sublist')
+  - [Buttons with shadow](/examples/buttons-with-shadow/ ':class=no-sublist')
+  - [Texture Shadow](/examples/texture-shadow/ ':class=no-sublist')
   - [Rounded rectangle](/examples/rounded-rectangle.md ':class=no-sublist')
   - [Ripple flip](/examples/ripple-flip.md ':class=no-sublist')
   - [Morphing spiral](/examples/spiral.md ':class=no-sublist')
@@ -43,6 +44,8 @@
 - **Packages**
 
   - [element-behaviors](/guide/includes/lume-element-behaviors)
+  - [classy-solid](/guide/includes/classy-solid)
+  - [@lume/element](/guide/includes/lume-element)
   - [@lume/autolayout](/guide/layouts-with-autolayout)
   - [@lume/three-meshline](/three-meshline/)
 

diff --git a/api/behaviors/mesh-behaviors/geometries/MixedPlaneGeometryBehavior.md b/api/behaviors/mesh-behaviors/geometries/MixedPlaneGeometryBehavior.md
@@ -5,7 +5,7 @@ Used as the geometry for [`<lume-mixed-plane>`](../../../meshes/MixedPlane)
 elements. The planes are thin boxes instead of actually planes, otherwise
 Three.js cannot currently cast shadows from plane geometries.
 
-<live-code src="../../../../../examples/buttons-with-shadow.html"></live-code>
+<live-code src="../../../../../examples/buttons-with-shadow/example.html"></live-code>
 
 
 

diff --git a/api/behaviors/mesh-behaviors/materials/MixedPlaneMaterialBehavior.md b/api/behaviors/mesh-behaviors/materials/MixedPlaneMaterialBehavior.md
@@ -3,7 +3,7 @@
 
 Used as the material for [`<lume-mixed-plane>`](../../../meshes/MixedPlane) elements.
 
-<live-code src="../../../../../examples/buttons-with-shadow.html"></live-code>
+<live-code src="../../../../../examples/buttons-with-shadow/example.html"></live-code>
 
 ## Properties
 

diff --git a/api/core/Scene.md b/api/core/Scene.md
@@ -73,7 +73,7 @@ top of the WebGL layer instead of below.
 
 
 
-### <code>.<b>shadowmapType</b></code> :id=shadowmapType
+### <code>.<b>shadowMode</b></code> :id=shadowMode
 
 *attribute*
 
@@ -89,6 +89,14 @@ Applies only if [`webgl`](#webgl) is `true`.
 
 
 
+### <code>.<b>shadowmapType</b></code> :id=shadowmapType
+
+Deprecated, use [`shadowMode`](#shadowmaptype) instead.
+
+*attribute*
+
+
+
 ### <code>.<b>vr</b></code> :id=vr
 
 *attribute*

diff --git a/api/core/Transformable.md b/api/core/Transformable.md
@@ -78,7 +78,7 @@ at each origin point on each cube. All cubes are initially oriented the
 same, but as you move the sliders, each cube rotates around their
 specific origin.
 
-<live-code src="../../examples/positioning/origin.html"></live-code>
+<live-code src="../../guide/positioning/origin.html"></live-code>
 
 
 

diff --git a/api/meshes/MixedPlane.md b/api/meshes/MixedPlane.md
@@ -16,7 +16,7 @@ content will not receal 3D content that would be expected to be behind them.
 See [`MixedPlaneGeometryBehavior`](../behaviors/mesh-behaviors/geometries/MixedPlaneGeometryBehavior) and [`MixedPlaneMaterialBehavior`](../behaviors/mesh-behaviors/materials/MixedPlaneMaterialBehavior) for
 available properties.
 
-<live-code src="../../../examples/buttons-with-shadow.html"></live-code>
+<live-code src="../../../examples/buttons-with-shadow/example.html"></live-code>
 
 ## Properties
 

diff --git a/api/models/ColladaModel.md b/api/models/ColladaModel.md
@@ -1,38 +1,45 @@
 
-# <code>class <b>ColladaModel</b></code> :id=ColladaModel
+# <code>class <b>ColladaModel</b> extends [Element3D](../core/Element3D.md)</code> :id=ColladaModel
 
-> :construction: :hammer: Under construction! :hammer: :construction:
+Defines the `<lume-collada-model>` element, short for `<lume-element3d
+has="collada-model">`, for loading 3D models in the Collada format (`.dae`
+files).
 
-Defines the `<lume-collada-model>` element, for loading 3D
-models in the Collada format (.dae files). It is similar to an `<img>` tag, but for 3D.
+See [`ColladaModelBehavior`](../behaviors/mesh-behaviors/models/ColladaModelBehavior)
+for attributes/properties available on this element.
 
 HTML Example:
 
 ```html
 <lume-scene webgl>
-  <lume-collada-model src="path/to/model.dae"></lume-collada-model>
+  <lume-collada-model id="myModel" src="path/to/model.dae"></lume-collada-model>
 </lume-scene>
+<script>
+  myModel.on('MODEL_LOAD', () => console.log('loaded'))
+</script>
 ```
 
 JavaScript Example:
 
 ```js
 const scene = new Scene
+scene.webgl = true
 document.body.append(scene)
 const model = new ColladaModel
 model.src = 'path/to/model.dae'
+model.on('MODEL_LOAD', () => console.log('loaded'))
 scene.add(model)
 ```
 
 
 
+Inherits properties from [Element3D](../core/Element3D.md).
 
 
 
 
 
-
-
+Inherits methods from [Element3D](../core/Element3D.md).
 
 
         
diff --git a/api/models/FbxModel.md b/api/models/FbxModel.md
@@ -1,26 +1,33 @@
 
 # <code>class <b>FbxModel</b></code> :id=FbxModel
 
-> :construction: :hammer: Under construction! :hammer: :construction:
+Defines the `<lume-fbx-model>` element, short for `<lume-element3d
+has="fbx-model">`, for loading 3D models in the FBX format (`.fbx`
+files).
 
-Defines the `<lume-fbx-model>` element, for loading 3D
-models in the FBX format (.fbx files). It is similar to an `<img>` tag, but for 3D.
+See [`FbxModelBehavior`](../behaviors/mesh-behaviors/models/FbxModelBehavior)
+for attributes/properties available on this element.
 
 HTML Example:
 
 ```html
 <lume-scene webgl>
-  <lume-fbx-model src="path/to/model.fbx"></lume-fbx-model>
+  <lume-fbx-model id="myModel" src="path/to/model.fbx"></lume-fbx-model>
 </lume-scene>
+<script>
+  myModel.on('MODEL_LOAD', () => console.log('loaded'))
+</script>
 ```
 
 JavaScript Example:
 
 ```js
 const scene = new Scene
+scene.webgl = true
 document.body.append(scene)
 const model = new FbxModel
 model.src = 'path/to/model.fbx'
+model.on('MODEL_LOAD', () => console.log('loaded'))
 scene.add(model)
 ```
 

diff --git a/api/models/GltfModel.md b/api/models/GltfModel.md
@@ -1,26 +1,33 @@
 
 # <code>class <b>GltfModel</b></code> :id=GltfModel
 
-> :construction: :hammer: Under construction! :hammer: :construction:
+Defines the `<lume-gltf-model>` element, short for `<lume-element3d
+has="gltf-model">`, for loading 3D models in the glTF format (`.gltf` or
+`.glb` files).
 
-Defines the `<lume-gltf-model>` element, for loading 3D
-models in the glTF format. It is similar to an `<img>` tag, but for 3D.
+See [`GltfModelBehavior`](../behaviors/mesh-behaviors/models/GltfModelBehavior)
+for attributes/properties available on this element.
 
 HTML Example:
 
 ```html
 <lume-scene webgl>
-  <lume-gltf-model src="path/to/model.gltf"></lume-gltf-model>
+  <lume-gltf-model id="myModel" src="path/to/model.gltf"></lume-gltf-model>
 </lume-scene>
+<script>
+  myModel.on('MODEL_LOAD', () => console.log('loaded'))
+</script>
 ```
 
 JavaScript Example:
 
 ```js
 const scene = new Scene
+scene.webgl = true
 document.body.append(scene)
 const model = new GltfModel
 model.src = 'path/to/model.gltf'
+model.on('MODEL_LOAD', () => console.log('loaded'))
 scene.add(model)
 ```
 

diff --git a/api/models/ObjModel.md b/api/models/ObjModel.md
@@ -1,24 +1,31 @@
 
 # <code>class <b>ObjModel</b></code> :id=ObjModel
 
-Defines the `<lume-obj-model>` element, which is short for `<lume-element3d has="obj-model">`.
+Defines the `<lume-obj-model>` element, short for `<lume-element3d
+has="obj-model">`, for loading 3D models in the OBJ format (`.obj` files
+paired with `.mtl` files).
 
 HTML Example:
 
 ```html
 <lume-scene>
-  <lume-obj-model obj="path/to/model.obj" mtl="path/to/model.mtl"></lume-obj-model>
+  <lume-obj-model id="myModel" obj="path/to/model.obj" mtl="path/to/model.mtl"></lume-obj-model>
 </lume-scene>
+<script>
+  myModel.on('MODEL_LOAD', () => console.log('loaded'))
+</script>
 ```
 
 JavaScript Example:
 
 ```js
 const scene = new Scene
+scene.webgl = true
 document.body.append(scene)
 const model = new ObjModel
 model.obj = 'path/to/model.obj'
 model.mtl = 'path/to/model.mtl'
+model.on('MODEL_LOAD', () => console.log('loaded'))
 scene.add(model)
 ```
 

diff --git a/api/models/TdsModel.md b/api/models/TdsModel.md
@@ -1,26 +1,33 @@
 
 # <code>class <b>TdsModel</b></code> :id=TdsModel
 
-> :construction: :hammer: Under construction! :hammer: :construction:
+Defines the `<lume-3ds-model>` element, short for `<lume-element3d
+has="3ds-model">`, for loading 3D models in the 3DS format (`.3ds`
+files).
 
-Defines the `<lume-3ds-model>` element, for loading 3D
-models in the 3DS format (.3ds files). It is similar to an `<img>` tag, but for 3D.
+See [`TdsModelBehavior`](../behaviors/mesh-behaviors/models/TdsModelBehavior)
+for attributes/properties available on this element.
 
 HTML Example:
 
 ```html
 <lume-scene webgl>
-  <lume-3ds-model src="path/to/model.3ds"></lume-3ds-model>
+  <lume-3ds-model id="myModel" src="path/to/model.3ds"></lume-3ds-model>
 </lume-scene>
+<script>
+  myModel.on('MODEL_LOAD', () => console.log('loaded'))
+</script>
 ```
 
 JavaScript Example:
 
 ```js
 const scene = new Scene
+scene.webgl = true
 document.body.append(scene)
 const model = new TdsModel
 model.src = 'path/to/model.3ds'
+model.on('MODEL_LOAD', () => console.log('loaded'))
 scene.add(model)
 ```
 

diff --git a/examples/autolayout-declarative.md b/examples/autolayout-declarative.md
@@ -37,7 +37,7 @@
               >
           </lume-mesh>
       </lume-point-light>
-      <lume-autolayout-node
+      <lume-autolayout
           id="layout"
           size="100 100 0" TODO="why do we need Z size 0 here, but not in the imperative example?"
           position="0 0 0"
@@ -57,7 +57,7 @@
           <lume-mixed-plane size="1 1 0" color="deeppink" class="child3">This is a paragraph of text to show that it reflows when the size of the layout changes size so that the awesomeness can be observed in its fullness.</lume-mixed-plane>
           <lume-mixed-plane size="1 1 0" color="deeppink" class="child4">This is a paragraph of text to show that it reflows when the size of the layout changes size so that the awesomeness can be observed in its fullness.</lume-mixed-plane>
           <lume-mixed-plane size="1 1 0" color="deeppink" class="child5">This is a paragraph of text to show that it reflows when the size of the layout changes size so that the awesomeness can be observed in its fullness.</lume-mixed-plane>
-      </lume-autolayout-node>
+      </lume-autolayout>
   </lume-scene>
 
   <script type="module">

diff --git a/examples/autolayout-imperative.md b/examples/autolayout-imperative.md
@@ -15,7 +15,7 @@
 
   <script type="module">
       import {
-          AutoLayoutNode,
+          Autolayout,
           Scene,
           AmbientLight,
           PointLight,
@@ -73,7 +73,7 @@
           |-[child3(child4,child5)]-[child4]-[child5]-|
       `
 
-      const layout = new AutoLayoutNode().set({
+      const layout = new Autolayout().set({
           size: [600, 400],
           position: "0 0 0",
           alignPoint: " 0.5 0.5 0",

diff --git a/examples/buttons-with-shadow.md → examples/buttons-with-shadow/README.md b/examples/buttons-with-shadow.md → examples/buttons-with-shadow/README.md
@@ -1,6 +1,6 @@
 # Buttons with shadow
 
-<live-code src="./buttons-with-shadow.html"></live-code>
+<live-code src="./example.html"></live-code>
 
 <!-- TODO show demo information without breaking the full height demo view:
 - A ["picked" pen](https://codepen.io/trusktr/pen/rpegZR) on CodePen!