add a skateboard configurator demo, update live-code so that live cod…

…e preview tab is initially visible instead of the code tab, adjust examples to account for the new CameraRig perspective behavior

_sidebar.md

@@ -6,12 +6,12 @@
   - [Custom Element Names](/guide/custom-element-names)
   - [Scene Graph](/guide/scene-graph)
   - [Common Attributes](/guide/common-attributes)
-  - [Positioning](/guide/positioning)
+  - [Positioning](/guide/positioning/)
   - [Sizing](/guide/sizing)
   - [Rendering Modes](/guide/rendering-modes)
   - [Reactivity](/guide/reactivity)
-  - [Cameras](/guide/cameras)
-  - [External Assets](/guide/external-assets)
+  - [Cameras](/guide/cameras/)
+  - [External Assets](/guide/external-assets/)
   - [Making Elements](/guide/making-elements)
   - [Compatibility](/guide/compatibility)
   - [Debugging](/guide/debugging)
@@ -22,7 +22,8 @@
   <!-- - [Hello 3D world!](/examples/hello3d.md ':class=no-sublist') -->
 
   - [Hello world!](/examples/hello-world/ ':class=no-sublist')
-  - [🎃🧛‍♂️🔥 Picture Frame](/examples/picture-frame ':class=no-sublist')
+  - [🎄 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
+  - [Picture Frame](/examples/picture-frame ':class=no-sublist')
   - [NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
   - [Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
   - [Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')
@@ -71,6 +72,7 @@
   - [ProjectedMaterialBehavior](/api/behaviors/mesh-behaviors/materials/ProjectedMaterialBehavior.md)
   - [StandardMaterialBehavior](/api/behaviors/mesh-behaviors/materials/StandardMaterialBehavior.md)
   - cameras/
+  - [Camera](/api/cameras/Camera.md)
   - [CameraRig](/api/cameras/CameraRig.md)
   - [PerspectiveCamera](/api/cameras/PerspectiveCamera.md)
   - core/
@@ -82,6 +84,8 @@
   - [Sizeable](/api/core/Sizeable.md)
   - [Transformable](/api/core/Transformable.md)
   - [TreeNode](/api/core/TreeNode.md)
+  - examples/
+  - [LoadingIcon](/api/examples/LoadingIcon.md)
   - layouts/
   - [CubeLayout](/api/layouts/CubeLayout.md)
   - lights/

_sidebar.src.md

@@ -6,12 +6,12 @@
   - [Custom Element Names](/guide/custom-element-names)
   - [Scene Graph](/guide/scene-graph)
   - [Common Attributes](/guide/common-attributes)
-  - [Positioning](/guide/positioning)
+  - [Positioning](/guide/positioning/)
   - [Sizing](/guide/sizing)
   - [Rendering Modes](/guide/rendering-modes)
   - [Reactivity](/guide/reactivity)
-  - [Cameras](/guide/cameras)
-  - [External Assets](/guide/external-assets)
+  - [Cameras](/guide/cameras/)
+  - [External Assets](/guide/external-assets/)
   - [Making Elements](/guide/making-elements)
   - [Compatibility](/guide/compatibility)
   - [Debugging](/guide/debugging)
@@ -22,7 +22,8 @@
   <!-- - [Hello 3D world!](/examples/hello3d.md ':class=no-sublist') -->
 
   - [Hello world!](/examples/hello-world/ ':class=no-sublist')
-  - [🎃🧛‍♂️🔥 Picture Frame](/examples/picture-frame ':class=no-sublist')
+  - [🎄 Skateboard Configurator](/examples/skateboard-configurator/ ':class=no-sublist')
+  - [Picture Frame](/examples/picture-frame ':class=no-sublist')
   - [NASA Astrobee Robot](/examples/nasa-astrobee-robot/ ':class=no-sublist')
   - [Velodyne Lidar Scan](/examples/velodyne-lidar-scan/ ':class=no-sublist')
   - [Shelby GT350 Points](/examples/shelby-gt350-points/ ':class=no-sublist')

api/behaviors/RenderableBehavior.md

@@ -3,9 +3,6 @@
 
 Base class for element behaviors that provide rendering features (f.e. geometries, materials, etc).
 
-Subclasses should provide loadGL and unloadGL methods in order to load or
-unload WebGL resources when GL is enabled or disabled in a scene.
-
 
 
 Inherits properties from [Behavior](Behavior.md).

api/behaviors/mesh-behaviors/ClipPlanesBehavior.md

@@ -9,7 +9,7 @@ only on elements that have a geometry and material.
 
 <live-code id="example"></live-code>
 <script>
-  example.code = clipPlaneExample
+  example.content = clipPlaneExample
 </script>
 
 ## Properties

api/behaviors/mesh-behaviors/geometries/LineGeometryBehavior.md

@@ -10,7 +10,7 @@ default. This is typically paired with
 
 <live-code id="example"></live-code>
 <script>
-  example.code = lineExample
+  example.content = lineExample
 </script>
 
 ## Properties

api/behaviors/mesh-behaviors/geometries/ShapeGeometryBehavior.md

@@ -15,7 +15,7 @@ only.
 
 <live-code id="example"></live-code>
 <script>
-  example.code = shapesExample
+  example.content = shapesExample
 </script>
 
 ## Properties

api/behaviors/mesh-behaviors/materials/LambertMaterialBehavior.md

@@ -9,7 +9,7 @@ for its material. It uses a
 
 <live-code id="liveExample"></live-code>
 <script>
-  liveExample.code = meshExample({material: 'lambert', color: 'skyblue'})
+  liveExample.content = meshExample({material: 'lambert', color: 'skyblue'})
 </script>
 
 

api/behaviors/mesh-behaviors/materials/LineBasicMaterialBehavior.md

@@ -11,7 +11,7 @@ backed by Three.js `LineBasicMaterial` underneath. This is typically paired with
 
 <live-code id="example"></live-code>
 <script>
-  example.code = lineExample
+  example.content = lineExample
 </script>
 
 ## Properties

api/behaviors/mesh-behaviors/materials/ProjectedMaterialBehavior.md

@@ -7,45 +7,94 @@ A physical material with the added ability to have additional textures
 projected onto it with
 [`<lume-texture-projector>`](../../../textures/TextureProjector) elements.
 
+Project a texture onto a mesh using a `<lume-texture-projector>` and
+associating it with the `texture-projectors` attribute:
+
+```html
+<!-- Define a texture projector somewhere. -->
+<lume-texture-projector src="path/to/image.jpg" class="some-projector"></lume-texture-projector>
+
+<!-- Use the projected-material on the mesh, and associate it with the projector: -->
+<lume-box
+  has="projected-material"
+  size="100 100 100"
+  texture-projectors=".some-projector"
+></lume-box>
+```
+
 ## Properties
 
 Inherits properties from [PhysicalMaterialBehavior](PhysicalMaterialBehavior.md).
 
 
-### <code>.<b>projectedTextures</b></code> :id=projectedTextures
+### <code>.<b>associatedProjectors</b></code> :id=associatedProjectors
+
+`readonly` `signal`
+
+The list of `TextureProjector` elements that are projecting onto the
+current owner element, normalized from
+[`.textureProjectors`](#textureprojectors) with selectors queried and
+null values ignored.
+
+This returns the currently associated array of `<lume-texture-projector>`
+instances, not the original string or array of values passed to
+[`.textureProjectors`](#textureprojectors).
+
 
-*string attribute*
+
+### <code>.<b>textureProjectors</b></code> :id=textureProjectors
+
+`string attribute`
 
 Default: `[]`
 
-The corresponding `clip-planes` attribute accepts one or more selectors,
-comma separated, that define which
-[`<lume-clip-plane>`](../../core/TextureProjector) elements are to be used as
-clip planes. If a selector matches an element that is not a
-`<lume-clip-plane>`, it is ignored. If a selector matches more than one
-element, all of them that are clip planes are used.
+The `texture-projectors` attribute accepts one or more selectors, comma
+separated, that define which
+[`<lume-texture-projector>`](../../core/TextureProjector) elements are to
+project an image onto the owner element. If a selector matches an element
+that is not a `<lume-texture-projector>`, it is ignored (note that
+non-upgraded elements will not be detected, make sure to load element
+definitions up front which is the default if you're simply importing
+`lume`).
+If a selector matches
+more than one element, only the first `<lume-texture-projector>` will be used
+(in the near future we will allow multiple projectors to project).
 
 ```html
-<lume-box has="clip-planes" clip-planes=".foo, .bar, #baz"></lume-box>
+<lume-box has="projected-material" texture-projectors=".foo, .bar, #baz"></lume-box>
 ```
 
-The property can also be set with a string (comma separated selectors),
-or a mixed array of strings (selectors) or `<lume-clip-plane>` element
-instances.
+The `textureProjectors` JS property can be set with a string of comma
+separated selectors, or a mixed array of strings (selectors) or
+`<lume-texture-projector>` element instances, making the JS property more
+flexible for scenarios where selectors are not enough (f.e. maybe you
+need to get a reference to an element from some other part of the DOM,
+perhaps from a tree inside a ShadowRoot, or you are programmatically
+creating elements, etc).
 
 ```js
-el.projectedTextures = ".some-projected-texture"
+el.textureProjectors = ".some-texture-projector"
 // or
-const plane = document.querySelector('.some-projected-texture')
-el.projectedTextures = [plane, "#someOtherTexture"]
+const projector = document.querySelector('.some-texture-projector')
+el.textureProjectors = [projector, "#someOtherTextureProjector"]
 ```
 
-The property getter returns the currently applicable collection of
-`<lume-clip-plane>` instances, not the original string or array of values
-passed into the attribute or setter. Applicable planes are those that are
-connected into the document, and that participate in rendering (composed,
-either in the top level document, in a ShadowRoot, or distributed to a
-slot in a ShadowRoot).
+Texture projectors that are not in the composed tree (i.e. not
+participating in rendering) will be ignored.  The texture projectors that
+will be associated are those that are connected into the document, and
+that participate in rendering (i.e.  composed, either in the top level
+document, in a ShadowRoot, or distributed to a slot in a ShadowRoot).
+This is the same as with the browser's built-in elements: a `<div>`
+element that is connected into the DOM but not slotted to its parent's
+`.shadowRoot` will not participate in the visual output.
+
+
+
+### <code>.<b>projectedTextures</b></code> :id=projectedTextures
+
+`string attribute`
+
+*deprecated*: renamed to [`.textureProjectors`](#textureprojectors).
 
 
 

api/cameras/Camera.md

@@ -0,0 +1,74 @@
+
+# <code>class <b>Camera</b> extends [Element3D](../core/Element3D.md)</code> :id=Camera
+
+Base class for all camera elements, f.e. [`<lume-perspective-camera>`](./PerspectiveCamera).
+
+## Properties
+
+Inherits properties from [Element3D](../core/Element3D.md).
+
+
+### <code>.<b>aspect</b></code> :id=aspect
+
+*attribute*
+
+Default: `0`
+
+A value of `0` sets the aspect ratio to automatic, based on the
+dimensions of a scene.  You normally don't want to modify this, but in
+case of stretched or squished display, this can be adjusted appropriately
+to unstretch or unsquish the view of the 3d world.
+
+
+
+### <code>.<b>near</b></code> :id=near
+
+*attribute*
+
+Default: `1`
+
+Anything closer to the camera than this value will not be rendered.
+
+
+
+### <code>.<b>far</b></code> :id=far
+
+*attribute*
+
+Default: `3000`
+
+Anything further from the camera than this value will not be rendered.
+
+
+
+### <code>.<b>active</b></code> :id=active
+
+*attribute*
+
+Default: `false`
+
+When `true`, the camera will be used as the viewport into the 3D scene,
+instead of the scene's default camera. When set back to `false`, the last
+camera that was set (and is still) active will be used, or if no other
+cameras are active the scene's default camera will be used.
+
+
+
+### <code>.<b>zoom</b></code> :id=zoom
+
+*attribute*
+
+Default: `1`
+
+The zoom level of the camera modifies the effective field of view.
+Increasing the zoom will decrease the effective field of view, and vice
+versa. At zoom level `1`, the effective field of view is equivalent to
+[`fov`](#fov).
+
+
+
+
+Inherits methods from [Element3D](../core/Element3D.md).
+
+
+        

api/cameras/CameraRig.md

@@ -77,8 +77,8 @@ The highest angle that the camera will rotate vertically.
 <live-code id="verticalExample"></live-code>
 
 <script>
-  example.code = cameraRigExample
-  verticalExample.code = cameraRigVerticalRotationExample
+  example.content = cameraRigExample
+  verticalExample.content = cameraRigVerticalRotationExample
 </script>
         
 
@@ -129,11 +129,15 @@ laterally around the focus point indefinitely.
 
 *attribute*
 
-Default: `1000`
+Default: `-1`
 
 The distance that the camera will be away from the center point.
 When the performing a scroll gesture, the camera will zoom by moving
 towards or away from the center point (i.e. dollying).
+
+A value of `-1` means automatic distance based on the current scene's
+[`.perspective`](../core/Scene#perspective), matching the behavior of
+[CSS `perspective`](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective).
 
 
 
@@ -147,21 +151,27 @@ towards or away from the center point (i.e. dollying).
 
 *attribute*
 
-Default: `200`
+Default: `-1`
 
-The smallest distance the camera can get to the center point when zooming
+The smallest distance (a non-zero value) the camera can get to the center point when zooming
 by scrolling.
+
+A value of `-1` means the value will automatically be half of whatever
+the [`.distance`](#distance) value is.
 
 
 
 ### <code>.<b>maxDistance</b></code> :id=maxDistance
 
 *attribute*
 
-Default: `2000`
+Default: `-1`
+
+The largest distance (a non-zero value) the camera can get from the
+center point when zooming out by scrolling or with pinch gesture.
 
-The largest distance the camera can get from the center point when
-zooming by scrolling.
+A value of `-1` means the value will automatically be double of whatever
+the [`.distance`](#distance) value is.