Skip to content

Commit

Permalink
update lume version, add a skateboard configurator demo, update live-…
Browse files Browse the repository at this point in the history
…code so that live code preview tab is initially visible instead of the code tab, adjust examples to account for the new CameraRig perspective behavior
  • Loading branch information
trusktr committed Dec 27, 2023
1 parent 965657f commit 0e41d06
Show file tree
Hide file tree
Showing 75 changed files with 3,360 additions and 1,108 deletions.
12 changes: 8 additions & 4 deletions _sidebar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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')
Expand Down Expand Up @@ -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/
Expand All @@ -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/
Expand Down
9 changes: 5 additions & 4 deletions _sidebar.src.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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')
Expand Down
3 changes: 0 additions & 3 deletions api/behaviors/RenderableBehavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 1 addition & 1 deletion api/behaviors/mesh-behaviors/ClipPlanesBehavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ only.

<live-code id="example"></live-code>
<script>
example.code = shapesExample
example.content = shapesExample
</script>

## Properties
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>


Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
91 changes: 70 additions & 21 deletions api/behaviors/mesh-behaviors/materials/ProjectedMaterialBehavior.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).



Expand Down
74 changes: 74 additions & 0 deletions api/cameras/Camera.md
Original file line number Diff line number Diff line change
@@ -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).


26 changes: 18 additions & 8 deletions api/cameras/CameraRig.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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).



Expand All @@ -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.



Expand Down
Loading

0 comments on commit 0e41d06

Please sign in to comment.