.projectedTextures :id=projectedTextures
+### .associatedProjectors :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 `.textureProjectors :id=textureProjectors
+
+`string attribute`
Default: `[]`
-The corresponding `clip-planes` attribute accepts one or more selectors,
-comma separated, that define which
-[``
+element that is connected into the DOM but not slotted to its parent's
+`.shadowRoot` will not participate in the visual output.
+
+
+
+### `](./PerspectiveCamera).
+
+## Properties
+
+Inherits properties from [Element3D](../core/Element3D.md).
+
+
+### ` elements to the element's `clipPlanes` property.
-` element) then this
-value does not (currently) have any effect.
+This property behaves identical to CSS perspective
+(https://developer.mozilla.org/en-US/docs/Web/CSS/perspective) when using
+a scene's default camera, adjusting its fov and Z position. If using a
+custom camera (for example a ``) then this value
+affects only the camera's fov, unless we specify a non-zero fov value for
+the custom camera.
The value sets the default camera's Z position to the given value (relative to the world
origin, 0,0,0). Note that the default camera points in the -z direction, therefore a value
of 800 means the camera is at position 0,0,800 looking directly at the world origin
-at 0,0,0. Furthermore, based on the chosen value, the camera's aspect ratio and zoom
+at 0,0,0. Furthermore, based on the chosen value, the camera's aspect ratio and fov
will be adjusted such that if there were a plane positioned at 0,0,0, perpendicular
to the camera's line of sight, and having the same dimensions as the scene's viewport
in screen pixels, then the plane would fit perfectly in the view, and one unit on that
-plane would coincide with one pixel on the screen; essentially that plane would be lined
-up perfectly with the screen surface. This is the same meaning that CSS perspective has.
+plane would coincide with one CSS pixel on the screen; essentially that plane would be lined
+up perfectly with the screen surface.
Applies with both CSS and WebGL rendering.
@@ -354,13 +381,22 @@ Applies with both CSS and WebGL rendering.
*readonly*
-The current active THREE.Camera being
-used by the scene. It will be a default camera if no camera was manually
-specified by a camera element such as ``, in
-which case the scene's `perspective` property is used for configuring the
-default camera. If a manual camera element is set active with an
-`active` attribute, then this property will return the currently
-active THREE.Camera represented by the active camera element.
+The current active `THREE.Camera` being used to render visuals.
+
+If no Lume camera element such as `` is active,
+this returns the default `THREE.Camera` that the scene uses internally.
+
+If a camera element is set active with an `active` attribute (f.e.
+``, then this property will return the
+`THREE.Camera` from the active camera element.
+
+The scene's [`.perspective`](#perspective) property is used for
+configuring the default camera view's fov and Z position to behave
+identical to CSS `perspective` by default. This behavior can be bypassed
+by using a `` element manually, and configuring
+its [`.aspect`](../cameras/PerspectiveCamera#aspect) and
+[`fov`](../cameras/PerspectiveCamera#fov) properties or attributes to
+non-zero values.
Applies with both CSS and WebGL rendering.
@@ -390,6 +426,16 @@ positioned starting at the top/left.
*readonly*
+Returns the scene's underlying
+[THREE.WebGLRenderer](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer)
+for custom uses, or `null` when GL rendering is not enabled.
+
+
+
+### ` have WebGL rendering disabled by
-default.
+`attribute`
-If a `` element has its `webgl` attribute set to
-`"false"` (the default), then `glLoaded` will always return `false` for any LUME
-elements in the scene.
+Default: `false`
-If a `` element has the `webgl` attribute set to
-`"true"`, then `glLoaded` will return `true` for any LUME
-elements in the scene *after* their WebGL APIs have been loaded
-(`false` up until then).
+When `true`, show debug visuals for the object. Not all objects implement
+debug visuals yet.
-### ` have CSS rendering enabled by
-default.
-If a `` element has its `enable-css` attribute set to
-`"false"`, then `cssLoaded` will always return `false` for any LUME
-elements in the scene.
+### ` element has its `enable-css` attribute set to
-`"true"` (the default), then `cssLoaded` will return `true` for
-any LUME elements in the scene *after* their CSS APIs have been loaded
-('false' up until then).
+DEPRECATED Now always true. For logic depending on this in an effect (f.e. returning early when false), instead init things when an element is connected, and uninit when an element is disconnected.
+
+*readonly*
diff --git a/api/core/Transformable.md b/api/core/Transformable.md
index 807a8b3..8de36e9 100644
--- a/api/core/Transformable.md
+++ b/api/core/Transformable.md
@@ -78,10 +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.
-` element useful for an initial loading
+animation while assets are loading. The element has no dependencies, so it
+can be imported directly quickly on its own to add into a web app as soon as
+possible while other modules are still being fetched.
+
+## Live Example
+
+Hit "Rerun" to see the loading icon again.
+
+`
An element that renders a particular 3D shape (geometry) along with a
particular style (material). This is a generic element with no particular
-shape. Elements like `` extend from `Mesh` in order to set define
+shape. Elements like `` extend from `Mesh` in order to define
behaviors they ship with by default. For example a `` element
(backed by the [`Box`](./Box) class) extends from this `Mesh` class and
applies two default behaviors:
@@ -13,14 +13,15 @@ applies two default behaviors:
and
[`phong-material`](../behaviors/mesh-behaviors/materials/PhongMaterialBehavior).
-For sake of simplicity, `` has a `box-geometry` and
-`phong-material` by default, just like a ``.
+A `` does not have any behaviors by default, a geometry behavior
+and material behavior need to be added for it to render something, using the
+`has=""` attribute, for example `has="box-geometry phong-material"`.
## Example
-
+
diff --git a/examples/heem-air/README.md b/examples/heem-air/README.md
index a5fee4e..cd455cd 100644
--- a/examples/heem-air/README.md
+++ b/examples/heem-air/README.md
@@ -3,7 +3,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/indian-boombox/README.md b/examples/indian-boombox/README.md
index d622367..c87d693 100644
--- a/examples/indian-boombox/README.md
+++ b/examples/indian-boombox/README.md
@@ -3,5 +3,5 @@
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/mini-galaxy/sun.png b/examples/mini-galaxy/sun.png
new file mode 100644
index 0000000..419f9da
Binary files /dev/null and b/examples/mini-galaxy/sun.png differ
diff --git a/examples/nasa-astrobee-robot/README.md b/examples/nasa-astrobee-robot/README.md
index 107e1f8..bed68e6 100644
--- a/examples/nasa-astrobee-robot/README.md
+++ b/examples/nasa-astrobee-robot/README.md
@@ -22,6 +22,10 @@
}
+
+
+
+
+
+
diff --git a/examples/shelby-gt350-points/README.md b/examples/shelby-gt350-points/README.md
index b4fc7f1..b817f87 100644
--- a/examples/shelby-gt350-points/README.md
+++ b/examples/shelby-gt350-points/README.md
@@ -30,12 +30,16 @@
+
+ world origin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/velodyne-lidar-scan/README.md b/examples/velodyne-lidar-scan/README.md
index dfb3be4..e439e29 100644
--- a/examples/velodyne-lidar-scan/README.md
+++ b/examples/velodyne-lidar-scan/README.md
@@ -6,10 +6,14 @@
` element is placed into
+the scene, and we can control several aspects of the camera like the field of
+view (fov), position, and rotation.
+
+All cameras start "inactive". When a manually-created camera is not `active`
+(i.e. it does not have an `active` attribute, or the attribute is set to
+`active="false"`, or the `.active` property is set to `false`), then the scene
+will use its internal default camera (see
+[`Scene#camera`](../api/core/Scene#camera) for info on the default camera). Once
+the perspective camera is active then the view will be displayed through the
+lense of that camera, and we can manipulate that camera to control our view.
+
+`](../api/cameras/CameraRig) element is similar to a
+real-life camera rig that holds a camera making it easy to move the camera in space using controls for rotating
+the camera around or moving the camera closer or further to or from a focus point.
+
+In the following example, drag to rotate the camera around the camera rig's
+local origin, and scroll or pinch with fingers to zoom:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
diff --git a/guide/external-assets.md b/guide/external-assets/README.md
similarity index 57%
rename from guide/external-assets.md
rename to guide/external-assets/README.md
index 1105a71..a952519 100644
--- a/guide/external-assets.md
+++ b/guide/external-assets/README.md
@@ -5,9 +5,9 @@
LUME elements can load various types of external assets.
The following demo shows how to load a 3D model in OBJ format using the
-`` element. It also shows how to use a `` element with an
-`obj-model` [behavior](./element-behaviors). The `` element is a
-shortcut for the equivalent of a ``.
+`` element. It also shows how to use a `` element with an
+`obj-model` [behavior](./element-behaviors). The `` element is simply a
+shortcut for ``.
@@ -177,130 +177,10 @@ shortcut for the equivalent of a ``.
The next example shows how to set a texture onto a mesh element. A texture is
-loaded from an image file like a JPEG or PNG file using the `texture`
-attribute. Similarly to `` being a shortcut for ``, the following `` element is a shortcut for
-`` which is a mesh element having both a geometry
-behavior and a material behavior.
+loaded from an image file like a JPEG or PNG file using the `texture` attribute.
+Similarly to `` being a shortcut for ``, the following `` element is a shortcut for
+`` which is a mesh element with
+both geometry behavior and a material behavior.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
+
-
-
+
+
+
+
+
+
+ +
+ +
+
+
+
diff --git a/importmap.js b/importmap.js
index 0850d21..b521567 100644
--- a/importmap.js
+++ b/importmap.js
@@ -60,6 +60,28 @@
'style-mod': './modules/style-mod/src/style-mod.js',
'thememirror/': './modules/thememirror/',
'w3c-keyname': './modules/w3c-keyname/index.js',
+
+ // debug
+ '@nothing-but/utils': './modules/@nothing-but/utils/dist/index.js',
+ '@solid-devtools/debugger': './modules/@solid-devtools/debugger/dist/index.js',
+ '@solid-devtools/debugger/types': './modules/@solid-devtools/debugger/dist/types.js',
+ '@solid-devtools/debugger/': './modules/@solid-devtools/debugger/',
+ '@solid-devtools/logger': './modules/@solid-devtools/logger/dist/index.js',
+ '@solid-devtools/shared/primitives': './modules/@solid-devtools/shared/dist/primitives/index.js',
+ '@solid-devtools/shared/utils': './modules/@solid-devtools/shared/dist/utils/index.js',
+ '@solid-primitives/bounds': './modules/@solid-primitives/bounds/dist/index.js',
+ '@solid-primitives/cursor': './modules/@solid-primitives/cursor/dist/index.js',
+ '@solid-primitives/event-bus': './modules/@solid-primitives/event-bus/dist/index.js',
+ '@solid-primitives/event-listener': './modules/@solid-primitives/event-listener/dist/index.js',
+ '@solid-primitives/keyboard': './modules/@solid-primitives/keyboard/dist/index.js',
+ '@solid-primitives/media': './modules/@solid-primitives/media/dist/index.js',
+ '@solid-primitives/platform': './modules/@solid-primitives/platform/dist/index.js',
+ '@solid-primitives/resize-observer': './modules/@solid-primitives/resize-observer/dist/index.js',
+ '@solid-primitives/rootless': './modules/@solid-primitives/rootless/dist/index.js',
+ '@solid-primitives/scheduled': './modules/@solid-primitives/scheduled/dist/index.js',
+ '@solid-primitives/static-store': './modules/@solid-primitives/static-store/dist/index.js',
+ '@solid-primitives/utils': './modules/@solid-primitives/utils/dist/index/index.js',
+ '@solid-primitives/utils/immutable': './modules/@solid-primitives/utils/dist/immutable/index.js',
}
for (const key in imports) imports[key] = base + imports[key]
diff --git a/intro-example.html b/intro-example.html
index 3a244ee..7547b69 100644
--- a/intro-example.html
+++ b/intro-example.html
@@ -17,7 +17,7 @@
>
+
diff --git a/js/PictureFrameScene.js b/js/PictureFrameScene.js
index 1a3519f..d450516 100644
--- a/js/PictureFrameScene.js
+++ b/js/PictureFrameScene.js
@@ -23,6 +23,11 @@ export const PictureFrameScene = element('picture-frame-scene')(
/*:host {display: contents}*/
`
+ // TODO make these configurable, with an auto-height option based on aspect.
+ frameWidth = 200
+ frameHeight = 280
+ frameThickness = 15
+
template = () => html`
${/**/ ''}
-
+
(this.debug ? -Infinity : -35)}
max-horizontal-angle=${() => (this.debug ? Infinity : 35)}
distance="700"
- max-distance=${() => (this.debug ? Infinity : 900)}
- min-distance=${() => (this.debug ? 0 : 200)}
+ max-distance=${() => (this.debug ? Infinity : 1200)}
+ min-distance=${() => (this.debug ? 0 : 500)}
align-point="0.5 0.5"
>
-
${'' /**/}
this.picture}
size-mode="proportional proportional"
@@ -137,18 +146,18 @@ export const PictureFrameScene = element('picture-frame-scene')(
flipClip: true,
},
].map((frame, i) => {
- return html`
+ return html`
+
@@ -198,7 +198,7 @@ function meshExample({geometry = 'box', material = 'phong', color = ''} = {}) {
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `)
-}
-
-function sceneExample() {
- return stripIndent(html`
-
-
- I am centered in the scene, and I am rotated a bit.
-
-
-
-
-
-
- `)
-}
-
function pointLightExample() {
return stripIndent(html`
-
@@ -575,178 +330,6 @@ function directionalLightExample() {
`)
}
-function spotLightExample() {
- return stripIndent(html`
-
-
-
- world origin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `)
-}
-
function perspectiveLayeredImage({bg, fg, bgPosition = {x: 0, y: 0}, fgPosition = {}}) {
return stripIndent(html`
@@ -902,7 +485,7 @@ const shapesExample = stripIndent(html`
+
-
+
@@ -1365,147 +948,6 @@ const instancedMeshExample = stripIndent(html`
`)
-const originExample = stripIndent(html`
-
-
-
-
-
-
-
-
- -
- -
-
-
-
-
-`)
-
const morphingSpiralExample = stripIndent(html`
-
+
@@ -1942,7 +1387,7 @@ const clipPlaneExample = stripIndent(html`
+
=0.139.0",
"tinycolor2": "^1.4.1",
"tween.js": "^16.6.0",
@@ -38,6 +38,7 @@
"@codemirror/lang-html": "^6.0.0",
"@codemirror/lang-javascript": "^6.0.0",
"@lume/cli": "^0.11.0",
+ "@solid-devtools/logger": "^0.8.3",
"@uiw/codemirror-theme-noctis-lilac": "^4.0.0",
"browser-sync": "^2.27.11",
"code-mirror-el": "^0.1.0",
@@ -1032,9 +1033,9 @@
}
},
"node_modules/@lume/element": {
- "version": "0.11.4",
- "resolved": "https://registry.npmjs.org/@lume/element/-/element-0.11.4.tgz",
- "integrity": "sha512-UDaTuEPT9tRqXjqkBtqjNVl8/ZO5M2qh98xjmy0rsjGXb8sqksG8iYUho/YcrZoB1KuvkTr21+TcEykPHuG8BA==",
+ "version": "0.11.6",
+ "resolved": "https://registry.npmjs.org/@lume/element/-/element-0.11.6.tgz",
+ "integrity": "sha512-P8YWJkAC9FJz1Hq4P/dDbYTk0a4uk8jDJbLJffzgSSsypbvEO9XRt6ixx9K1O4dX7YBvohVqnLHwWWwnPZLG1w==",
"dependencies": {
"babel-preset-solid": "^1.0.0",
"classy-solid": "^0.3.0",
@@ -1059,9 +1060,9 @@
"integrity": "sha512-urlLUmqDTD1dZQxdPOfzkBlJ+u1KW0vH0OCq3TZNzpnLl1/9aYNBqR+NnrB39Ei1wa8qURmHq9JgPo4SBHHEgg=="
},
"node_modules/@lume/live-code": {
- "version": "0.5.1",
- "resolved": "https://registry.npmjs.org/@lume/live-code/-/live-code-0.5.1.tgz",
- "integrity": "sha512-27pVBG0IICFxVR/7ex1XVcf8wxzjrR8aLC/Z2u2EjhptMeBtc2nJi8xmCJRQBMawRLMxsiDAT0expsCQ8vuT1g==",
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/@lume/live-code/-/live-code-0.6.0.tgz",
+ "integrity": "sha512-Si4AcFuEiRWYh4ouJwJuDAiLuDfeX7cZRli2R8JtBL7/G8wqlbSzMZyuE2hU6wNo0LQjugyBs7WudMDKpq/0Zg==",
"dependencies": {
"@babel/runtime": "^7.0.0",
"@codemirror/lang-html": "^6.0.0",
@@ -1126,6 +1127,12 @@
"node": ">= 8"
}
},
+ "node_modules/@nothing-but/utils": {
+ "version": "0.12.1",
+ "resolved": "https://registry.npmjs.org/@nothing-but/utils/-/utils-0.12.1.tgz",
+ "integrity": "sha512-1qZU1Q5El0IjE7JT/ucvJNzdr2hL3W8Rm27xNf1p6gb3Nw8pGnZmxp6/GEW9h+I1k1cICxXNq25hBwknTQ7yhg==",
+ "dev": true
+ },
"node_modules/@puppeteer/browsers": {
"version": "1.4.6",
"resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-1.4.6.tgz",
@@ -1270,6 +1277,235 @@
"integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
"dev": true
},
+ "node_modules/@solid-devtools/debugger": {
+ "version": "0.23.3",
+ "resolved": "https://registry.npmjs.org/@solid-devtools/debugger/-/debugger-0.23.3.tgz",
+ "integrity": "sha512-VrgswTjb2FyHxQJp5y5u7OaJ2k1R14LYlAOX/1rDZrGHWKdGYCaWHGzxI7C8AExtMP+LS+WOxy0uXMPQpoAD2g==",
+ "dev": true,
+ "dependencies": {
+ "@nothing-but/utils": "~0.12.0",
+ "@solid-devtools/shared": "^0.13.1",
+ "@solid-primitives/bounds": "^0.0.118",
+ "@solid-primitives/cursor": "^0.0.112",
+ "@solid-primitives/event-bus": "^1.0.8",
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/keyboard": "^1.2.5",
+ "@solid-primitives/platform": "^0.1.0",
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/scheduled": "^1.4.1",
+ "@solid-primitives/static-store": "^0.0.5",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.8.0"
+ }
+ },
+ "node_modules/@solid-devtools/logger": {
+ "version": "0.8.3",
+ "resolved": "https://registry.npmjs.org/@solid-devtools/logger/-/logger-0.8.3.tgz",
+ "integrity": "sha512-0guEx0urej1MjwJE1vhczqLH36cqCl/meSdn6wiBb1gzCmMpcJEQ9RfI5w0FDzXfOg9IXVekHlbmTD7YW9fh0w==",
+ "dev": true,
+ "dependencies": {
+ "@nothing-but/utils": "~0.12.0",
+ "@solid-devtools/debugger": "^0.23.3",
+ "@solid-devtools/shared": "^0.13.1",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.8.0"
+ }
+ },
+ "node_modules/@solid-devtools/shared": {
+ "version": "0.13.1",
+ "resolved": "https://registry.npmjs.org/@solid-devtools/shared/-/shared-0.13.1.tgz",
+ "integrity": "sha512-qaAcZF47FFr4alVQSy5ooLy7mMt4MMDxSHw52heY1oCut8yfXDrnLcYDONabfoin2WYIwsQpjYhryHgjtB0uDg==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/event-bus": "^1.0.8",
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/media": "^2.2.5",
+ "@solid-primitives/refs": "^1.0.5",
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/scheduled": "^1.4.1",
+ "@solid-primitives/static-store": "^0.0.5",
+ "@solid-primitives/styles": "^0.0.111",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.8.0"
+ }
+ },
+ "node_modules/@solid-primitives/bounds": {
+ "version": "0.0.118",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/bounds/-/bounds-0.0.118.tgz",
+ "integrity": "sha512-Qj42w8LlnhJ3r/t+t0c0vrdwIvvQMPgjEFGmLiwREaA85ojLbgL9lSBq2tKvljeLCvRVkgj10KEUf+vc99VCIg==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/resize-observer": "^2.0.22",
+ "@solid-primitives/static-store": "^0.0.5",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/cursor": {
+ "version": "0.0.112",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/cursor/-/cursor-0.0.112.tgz",
+ "integrity": "sha512-TAtU7qD7ipSLSXHnq8FhhosAPVX+dnOCb/ITcGcLlj8e/C9YKcxDhgBHJ3R/d1xDRb5/vO/szJtEz6fnQD311Q==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/event-bus": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/event-bus/-/event-bus-1.0.8.tgz",
+ "integrity": "sha512-vw9Q8oHL8h3WOxFiFFBE8lwJ1oOmCEdtFsOck3i66GPaJbmzHwBtQxTkAgF+DtpeSpSyCHlxKE7ojHnL4nl1Ww==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/event-listener": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.3.0.tgz",
+ "integrity": "sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/keyboard": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/keyboard/-/keyboard-1.2.5.tgz",
+ "integrity": "sha512-1axfWM1T4ASzZp4D91vLtxARevlBuOQ6yFHr1/IkuM/7OhMLo/BrO2CcDu3vSwCPVOSiZ2P875bTiqVWQV6e5g==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/media": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.5.tgz",
+ "integrity": "sha512-wTESNFteSwOZsNIBPLMIVLuOHIIzt2AIZdaCYYxfsJIr/xjDqSomlmdFlAmxfJD3ondO7fwtWfc0rcmAvjoPCA==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/static-store": "^0.0.5",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/platform": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/platform/-/platform-0.1.0.tgz",
+ "integrity": "sha512-u6f39Mh7h/a41RXAGLfj6HyYvxZy6HZ/Lw7Rm8/5JveYSzpx5LM6/gul0M6a6vBlt1vk6a0936kAYUBgB0oKmw==",
+ "dev": true,
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/refs": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-1.0.5.tgz",
+ "integrity": "sha512-5hmYmYbm6rs43nMHHozyyUngGA7P7q2WtlaCLJEfmlUJf67GWI1PZmqAiol6m9F37XSMZRuvZLoQ7HA/0q3GYg==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/resize-observer": {
+ "version": "2.0.22",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/resize-observer/-/resize-observer-2.0.22.tgz",
+ "integrity": "sha512-ps8UIFiGsNxZaWBKSH0Py0Nx5PDd7NtUGHkN/04SNRYgtTvlPF768rk0ksPlDgpIwYmBLIoC9qvQmQPaHF4F5w==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/event-listener": "^2.3.0",
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/static-store": "^0.0.5",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/rootless": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.2.tgz",
+ "integrity": "sha512-ynI/2aEOPyc14IKCX6yDBqnsAYCoLbaP9V/jejEWMVKOT2ZdV2ZxdftaLimOpWPpvjyti5DUJIGTOfLaNb7jlg==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/scheduled": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/scheduled/-/scheduled-1.4.1.tgz",
+ "integrity": "sha512-OLcNXwYpX7HUOEqNPcmR31dkyI1E2imkMDBRlqsGT0ZhJV1L2g0TEREpo4nm/kUhh8LVQzkfnxS+GONx9kh90A==",
+ "dev": true,
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/static-store": {
+ "version": "0.0.5",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.5.tgz",
+ "integrity": "sha512-ssQ+s/wrlFAEE4Zw8GV499yBfvWx7SMm+ZVc11wvao4T5xg9VfXCL9Oa+x4h+vPMvSV/Knv5LrsLiUa+wlJUXQ==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/styles": {
+ "version": "0.0.111",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/styles/-/styles-0.0.111.tgz",
+ "integrity": "sha512-1mBxOGAPXmfD5oYCvqjKBDN7SuNjz2qz7RdH7KtsuNLQh6lpuSKadtHnLvru0Y8Vz1InqTJisBIy/6P5kyDmPw==",
+ "dev": true,
+ "dependencies": {
+ "@solid-primitives/rootless": "^1.4.2",
+ "@solid-primitives/utils": "^6.2.1"
+ },
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
+ "node_modules/@solid-primitives/utils": {
+ "version": "6.2.1",
+ "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.1.tgz",
+ "integrity": "sha512-TsecNzxiO5bLfzqb4OOuzfUmdOROcssuGqgh5rXMMaasoFZ3GoveUgdY1wcf17frMJM7kCNGNuK34EjErneZkg==",
+ "dev": true,
+ "peerDependencies": {
+ "solid-js": "^1.6.12"
+ }
+ },
"node_modules/@tootallnate/quickjs-emscripten": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
@@ -3220,9 +3456,9 @@
}
},
"node_modules/classy-solid": {
- "version": "0.3.3",
- "resolved": "https://registry.npmjs.org/classy-solid/-/classy-solid-0.3.3.tgz",
- "integrity": "sha512-fAcf2biLJmWhbUwtZuj9ZjzYips2kioJzd6MMWbpwS7gpa2/HxDZtebINZLkNeGuZPNjVvAbKYWCCx9DaZBPYQ==",
+ "version": "0.3.7",
+ "resolved": "https://registry.npmjs.org/classy-solid/-/classy-solid-0.3.7.tgz",
+ "integrity": "sha512-0faSW+AQG6OSRm2s3JW6jH2Ti25Wjc9JBB3+Ka0PmUX0JGBSuiWSyRI0Vt4GVja+xCrsXwaJyQjgQZj62lDYfw==",
"dependencies": {
"lowclass": "^7.0.0",
"solid-js": "^1.3.13"
@@ -8130,15 +8366,15 @@
}
},
"node_modules/lume": {
- "version": "0.3.0-alpha.34",
- "resolved": "https://registry.npmjs.org/lume/-/lume-0.3.0-alpha.34.tgz",
- "integrity": "sha512-6W6+8Bk2CgOhXSgB1iR1vioqcrX005iDHcim+df7sSkWocjYBySG6Dq3v0E20VIwj+6aURWFJ+StWbMGaooy9Q==",
+ "version": "0.3.0-alpha.37",
+ "resolved": "https://registry.npmjs.org/lume/-/lume-0.3.0-alpha.37.tgz",
+ "integrity": "sha512-0VJ0w9Q0y7EA8ipET6JtEhqa54F4ZvRnwxFhD0IWQCH88vtDd7gqter1t5exRB/Dczfdw0gS27rn6t5PAAcBMw==",
"dependencies": {
"@lume/autolayout": "^0.10.0",
- "@lume/element": "^0.11.0",
+ "@lume/element": "^0.11.6",
"@lume/eventful": "^0.3.0",
"@lume/three-projected-material": "^0.3.0",
- "classy-solid": "^0.3.2",
+ "classy-solid": "^0.3.7",
"element-behaviors": "^5.0.0",
"james-bond": "^0.7.0",
"lowclass": "^7.0.0",
@@ -10773,6 +11009,14 @@
"node": ">= 0.6"
}
},
+ "node_modules/seroval": {
+ "version": "0.15.1",
+ "resolved": "https://registry.npmjs.org/seroval/-/seroval-0.15.1.tgz",
+ "integrity": "sha512-OPVtf0qmeC7RW+ScVX+7aOS+xoIM7pWcZ0jOWg2aTZigCydgRB04adfteBRbecZnnrO1WuGQ+C3tLeBBzX2zSQ==",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/serve": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/serve/-/serve-1.4.0.tgz",
@@ -11337,9 +11581,13 @@
"dev": true
},
"node_modules/solid-js": {
- "version": "1.4.8",
- "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.4.8.tgz",
- "integrity": "sha512-XErZdnnYYXF7OwGSUAPcua2y5/ELB/c53zFCpWiEGqxTNoH1iQghzI8EsHJXk06sNn+Z/TGhb8bPDNNGSgimag=="
+ "version": "1.8.7",
+ "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.8.7.tgz",
+ "integrity": "sha512-9dzrSVieh2zj3SnJ02II6xZkonR6c+j/91b7XZUNcC6xSaldlqjjGh98F1fk5cRJ8ZTkzqF5fPIWDxEOs6QZXA==",
+ "dependencies": {
+ "csstype": "^3.1.0",
+ "seroval": "^0.15.1"
+ }
},
"node_modules/source-map": {
"version": "0.7.4",
diff --git a/package.json b/package.json
index cad27ee..e02d66b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"@lume/element": "^0.11.0",
"@lume/eventful": "^0.3.0",
"@lume/kiwi": "^0.4.0",
- "@lume/live-code": "^0.5.1",
+ "@lume/live-code": "^0.6.0",
"@lume/three-projected-material": "^0.3.0",
"classy-solid": "^0.3.0",
"cpr": "^3.0.1",
@@ -35,7 +35,7 @@
"element-behaviors": "^5.0.0",
"james-bond": "^0.7.0",
"lowclass": "^7.0.0",
- "lume": "^0.3.0-alpha.34",
+ "lume": "^0.3.0-alpha.37",
"prismjs": "^1.29.0",
"regexr": "^2.0.0",
"solid-js": "^1.0.0",
@@ -49,6 +49,7 @@
"@codemirror/lang-html": "^6.0.0",
"@codemirror/lang-javascript": "^6.0.0",
"@lume/cli": "^0.11.0",
+ "@solid-devtools/logger": "^0.8.3",
"@uiw/codemirror-theme-noctis-lilac": "^4.0.0",
"browser-sync": "^2.27.11",
"code-mirror-el": "^0.1.0",
.projectedTextures :id=projectedTextures
+
+`string attribute`
+
+*deprecated*: renamed to [`.textureProjectors`](#textureprojectors).
diff --git a/api/cameras/Camera.md b/api/cameras/Camera.md
new file mode 100644
index 0000000..863fc95
--- /dev/null
+++ b/api/cameras/Camera.md
@@ -0,0 +1,74 @@
+
+# class Camera extends [Element3D](../core/Element3D.md) :id=Camera
+
+Base class for all camera elements, f.e. [`.aspect :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.
+
+
+
+### .near :id=near
+
+*attribute*
+
+Default: `1`
+
+Anything closer to the camera than this value will not be rendered.
+
+
+
+### .far :id=far
+
+*attribute*
+
+Default: `3000`
+
+Anything further from the camera than this value will not be rendered.
+
+
+
+### .active :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.
+
+
+
+### .zoom :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).
+
+
+
\ No newline at end of file
diff --git a/api/cameras/CameraRig.md b/api/cameras/CameraRig.md
index 1b9dc11..222ad3a 100644
--- a/api/cameras/CameraRig.md
+++ b/api/cameras/CameraRig.md
@@ -77,8 +77,8 @@ The highest angle that the camera will rotate vertically.
class PerspectiveCamera extends [Element3D](../core/Element3D.md) :id=PerspectiveCamera
+# class PerspectiveCamera extends [Camera](Camera.md) :id=PerspectiveCamera
Defines a viewport into the 3D scene as will be seen on screen.
@@ -9,86 +9,31 @@ the camera, while less can fit into view closer to the camera.
.fov :id=fov
*attribute*
-Default: `50`
-
-The camera's field of view angle, in degrees, when [`zoom`](#zoom) level
-is `1`.
-
-
-
-### .aspect :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.
-
-
-
-### .near :id=near
-
-*attribute*
-
-Default: `1`
-
-Anything closer to the camera than this value will not be rendered.
-
-
-
-### .far :id=far
-
-*attribute*
-
-Default: `3000`
-
-Anything further from the camera than this value will not be rendered.
-
-
-
-### .zoom :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).
-
-
-
-### .active :id=active
-
-*attribute*
-
-Default: `false`
+The camera's field of view angle, in degrees, when the [`zoom`](#zoom)
+level is `1`.
-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.
+A value of `0` means automatic fov 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).
-Inherits methods from [Element3D](../core/Element3D.md).
+Inherits methods from [Camera](Camera.md).
\ No newline at end of file
diff --git a/api/core/ClipPlane.md b/api/core/ClipPlane.md
index 1c90eb3..92074c3 100644
--- a/api/core/ClipPlane.md
+++ b/api/core/ClipPlane.md
@@ -14,9 +14,9 @@ To clip an element, add a
element with the `has=""` attribute, then assign any number of connected
`.backgroundIntensity :id=backgroundIntensity
+
+*attribute*
+
+Default: `0`
+
+A number between `0` and `1` that defines the intensity of the
+`background` when WebGL is enabled. If the value is 1, the background
+will be brightest, and if the value is 0 the background will be black.
+
+This applies only if [`webgl`](#webgl) is `true` and the
+[`background`](#background) property is set.
+
+
+
+### .backgroundBlur :id=backgroundBlur
+
+**`experimental`** *attribute*
+
+Default: `0`
+
+If [`background`](#background) is set, the background will be blurred by
+the given amount.
+
+Applies only if [`webgl`](#webgl) is `true`.
+
+
+
### .equirectangularBackground :id=equirectangularBackground
*attribute*
Default: `false`
-If the `background`
-is equirectangular, set this to `true` so use it like a skybox,
-otherwise the image will be used as a regular 2D background image.
+If the [`background`](#background) is equirectangular, set this to `true`
+so use it like a skybox, otherwise the image will be used as a regular 2D
+background image.
Applies only if [`webgl`](#webgl) is `true`.
@@ -331,20 +356,22 @@ infinitely big (respectively) when it comes to CSS rendering.
Default: `400`
-This property behaves just like CSS perspective
-when using CSS transforms, but also applies to LUME's WebGL rendering when using a scene's
-default camera. If using a custom camera (for example a `.cssRenderer :id=cssRenderer
+
+*readonly*
+
Returns the scene's underlying `CSS3DRendererNested` (a forked version of
[THREE.CSS3DRenderer](https://threejs.org/docs/index.html#examples/en/renderers/CSS3DRenderer)
that allows us to have a nested DOM structure instead of a flat DOM
diff --git a/api/core/SharedAPI.md b/api/core/SharedAPI.md
index f3f770c..4ce1e5c 100644
--- a/api/core/SharedAPI.md
+++ b/api/core/SharedAPI.md
@@ -41,45 +41,30 @@ The value should be a number from `0` to `1`. `0` is fully transparent, and `1`
-### .glLoaded :id=glLoaded
-
-*readonly*, *signal*
-
-Returns a boolean indicating whether or not the WebGL rendering features
-of a LUME element are loaded and ready.
+### .debug :id=debug
-All elements in a `.cssLoaded :id=cssLoaded
+### .glLoaded :id=glLoaded
-*readonly*, *signal*
+DEPRECATED Now always true. For logic depending on this in an effect (f.e. returning early when false), instead init things when an element is connected, and uninit when an element is disconnected.
-Returns a boolean indicating whether or not the CSS rendering features
-of a LUME element are loaded and ready.
+*readonly*
+
-All elements in a `.cssLoaded :id=cssLoaded
-If a `class LoadingIcon extends HTMLElement :id=LoadingIcon
+
+A `
+
+
+
+
+
+
+
+```
+
+## CSS Properties
+
+### `--loading-icon-color`
+
+A string with an RGB triplet, comma separated.
+
+Default: `120,130,140`
+
+### `--loading-icon-outer-radius`
+
+The outer size of the icon.
+
+Default: `20px`
+
+### `--loading-icon-inner-radius`
+
+The size of the inner hole.
+
+Default: `calc(0.7 * var(--loading-icon-outer-radius))`
+
+
+
+Inherits properties from HTMLElement.
+
+
+
+
+
+Inherits methods from HTMLElement.
+
+
+
\ No newline at end of file
diff --git a/api/lights/DirectionalLight.md b/api/lights/DirectionalLight.md
index 880d680..1da1e7d 100644
--- a/api/lights/DirectionalLight.md
+++ b/api/lights/DirectionalLight.md
@@ -21,7 +21,7 @@ camera limits will be affects by shadows.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure-small.jpg b/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure-small.jpg
new file mode 100644
index 0000000..1c345ae
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure-small.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure.jpg b/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure.jpg
new file mode 100644
index 0000000..9f97bb3
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-campanello-boards-maxallure.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure-small.jpg b/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure-small.jpg
new file mode 100644
index 0000000..999c877
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure-small.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure.jpg b/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure.jpg
new file mode 100644
index 0000000..ce35172
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-montoya-boards-maxallure.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure-small.jpg b/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure-small.jpg
new file mode 100644
index 0000000..dd0b567
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure-small.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure.jpg b/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure.jpg
new file mode 100644
index 0000000..1c31f5e
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-perez-boards-maxallure.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure-small.jpg b/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure-small.jpg
new file mode 100644
index 0000000..effffce
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure-small.jpg differ
diff --git a/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure.jpg b/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure.jpg
new file mode 100644
index 0000000..f73a7fb
Binary files /dev/null and b/examples/skateboard-configurator/lava-lamp-thebpanya-boards-maxallure.jpg differ
diff --git a/examples/skateboard-configurator/skateboard.fbx b/examples/skateboard-configurator/skateboard.fbx
new file mode 100644
index 0000000..1cd2765
Binary files /dev/null and b/examples/skateboard-configurator/skateboard.fbx differ
diff --git a/examples/skateboard-configurator/skateboard/license.txt b/examples/skateboard-configurator/skateboard/license.txt
new file mode 100644
index 0000000..3c90e1d
--- /dev/null
+++ b/examples/skateboard-configurator/skateboard/license.txt
@@ -0,0 +1,11 @@
+Model Information:
+* title: Skateboard
+* source: https://sketchfab.com/3d-models/skateboard-1802f3970ea4443593006df4007f78d0
+* author: Roksi203 (https://sketchfab.com/Roksi203)
+
+Model License:
+* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements: Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Skateboard" (https://sketchfab.com/3d-models/skateboard-1802f3970ea4443593006df4007f78d0) by Roksi203 (https://sketchfab.com/Roksi203) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
\ No newline at end of file
diff --git a/examples/skateboard-configurator/skateboard/scene.bin b/examples/skateboard-configurator/skateboard/scene.bin
new file mode 100644
index 0000000..45dba65
Binary files /dev/null and b/examples/skateboard-configurator/skateboard/scene.bin differ
diff --git a/examples/skateboard-configurator/skateboard/scene.gltf b/examples/skateboard-configurator/skateboard/scene.gltf
new file mode 100644
index 0000000..25107ea
--- /dev/null
+++ b/examples/skateboard-configurator/skateboard/scene.gltf
@@ -0,0 +1,933 @@
+{
+ "accessors": [
+ {
+ "bufferView": 2,
+ "componentType": 5126,
+ "count": 4080,
+ "max": [
+ 0.23254267871379852,
+ 0.09067835658788681,
+ -0.05639875680208206
+ ],
+ "min": [
+ -0.23254267871379852,
+ -0.09067834168672562,
+ -0.07556533813476563
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 48960,
+ "componentType": 5126,
+ "count": 4080,
+ "max": [
+ 1.0,
+ 0.9999996423721313,
+ 1.0
+ ],
+ "min": [
+ -1.0,
+ -0.9999996423721313,
+ -1.0
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "componentType": 5126,
+ "count": 4080,
+ "max": [
+ 0.9174589514732361,
+ 0.9163540601730347
+ ],
+ "min": [
+ 0.5886355042457581,
+ 0.3027418255805969
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "componentType": 5125,
+ "count": 11520,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 97920,
+ "componentType": 5126,
+ "count": 1897,
+ "max": [
+ 0.3966410458087921,
+ 0.09464754164218903,
+ 0.019136473536491394
+ ],
+ "min": [
+ -0.3966410458087921,
+ -0.09532731771469116,
+ -0.020890993997454643
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 120684,
+ "componentType": 5126,
+ "count": 1897,
+ "max": [
+ 0.9409165382385254,
+ 1.0,
+ 0.9999945759773254
+ ],
+ "min": [
+ -0.9409165978431702,
+ -1.0,
+ -1.0
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 32640,
+ "componentType": 5126,
+ "count": 1897,
+ "max": [
+ 0.7421628832817078,
+ 0.9980125427246094
+ ],
+ "min": [
+ 0.001987934112548828,
+ 0.001987457275390625
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 46080,
+ "componentType": 5125,
+ "count": 6144,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 143448,
+ "componentType": 5126,
+ "count": 2432,
+ "max": [
+ 0.24075008928775787,
+ 0.02494140714406967,
+ -0.023805726319551468
+ ],
+ "min": [
+ -0.24075008928775787,
+ -0.024941403418779373,
+ -0.02812311425805092
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 172632,
+ "componentType": 5126,
+ "count": 2432,
+ "max": [
+ 0.9999967217445374,
+ 1.0,
+ 0.998721182346344
+ ],
+ "min": [
+ -0.9999967217445374,
+ -1.0,
+ -0.9192008376121521
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 47816,
+ "componentType": 5126,
+ "count": 2432,
+ "max": [
+ 0.9274933338165283,
+ 0.9728248119354248
+ ],
+ "min": [
+ 0.5191392302513123,
+ 0.5259087085723877
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 70656,
+ "componentType": 5125,
+ "count": 6912,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 201816,
+ "componentType": 5126,
+ "count": 13204,
+ "max": [
+ 0.2413228303194046,
+ 0.02482079528272152,
+ -0.009632393717765808
+ ],
+ "min": [
+ -0.2413228303194046,
+ -0.02482079155743122,
+ -0.030083317309617996
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 360264,
+ "componentType": 5126,
+ "count": 13204,
+ "max": [
+ 0.9999596476554871,
+ 0.9999734163284302,
+ 1.0
+ ],
+ "min": [
+ -0.9999594688415527,
+ -0.9999713897705078,
+ -1.0
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 67272,
+ "componentType": 5126,
+ "count": 13204,
+ "max": [
+ 0.88321453332901,
+ 0.9743219614028931
+ ],
+ "min": [
+ 0.5004642605781555,
+ 0.41944649815559387
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 98304,
+ "componentType": 5125,
+ "count": 38256,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 518712,
+ "componentType": 5126,
+ "count": 8618,
+ "max": [
+ 0.2509281039237976,
+ 0.09813949465751648,
+ -0.019134733825922012
+ ],
+ "min": [
+ -0.2509281039237976,
+ -0.09813949465751648,
+ -0.07505320012569427
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 622128,
+ "componentType": 5126,
+ "count": 8618,
+ "max": [
+ 1.0,
+ 1.0,
+ 1.0
+ ],
+ "min": [
+ -1.0,
+ -1.0,
+ -1.0
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 172904,
+ "componentType": 5126,
+ "count": 8618,
+ "max": [
+ 0.9499513506889343,
+ 0.9808475375175476
+ ],
+ "min": [
+ 0.5066260695457458,
+ 0.017303405329585075
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 251328,
+ "componentType": 5125,
+ "count": 27084,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 725544,
+ "componentType": 5126,
+ "count": 756,
+ "max": [
+ 0.22757354378700256,
+ 0.09090440720319748,
+ -0.06136792525649071
+ ],
+ "min": [
+ -0.22757354378700256,
+ -0.09090437740087509,
+ -0.07059617340564728
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 734616,
+ "componentType": 5126,
+ "count": 756,
+ "max": [
+ 1.0,
+ 0.999707818031311,
+ 1.0
+ ],
+ "min": [
+ -1.0,
+ -0.999707818031311,
+ -1.0
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 241848,
+ "componentType": 5126,
+ "count": 756,
+ "max": [
+ 0.9232290387153625,
+ 0.7395299673080444
+ ],
+ "min": [
+ 0.6531530022621155,
+ 0.4659355878829956
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 359664,
+ "componentType": 5125,
+ "count": 1728,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 743688,
+ "componentType": 5126,
+ "count": 1232,
+ "max": [
+ 0.22886312007904053,
+ 0.09657102823257446,
+ -0.05917017161846161
+ ],
+ "min": [
+ -0.22886312007904053,
+ -0.09657099843025208,
+ -0.07279395312070847
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 758472,
+ "componentType": 5126,
+ "count": 1232,
+ "max": [
+ 0.9999975562095642,
+ 0.9999977946281433,
+ 1.0
+ ],
+ "min": [
+ -0.9999974966049194,
+ -0.9999977946281433,
+ -0.9997832179069519
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 247896,
+ "componentType": 5126,
+ "count": 1232,
+ "max": [
+ 0.8430740237236023,
+ 0.978263258934021
+ ],
+ "min": [
+ 0.5451183319091797,
+ 0.3027418851852417
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 366576,
+ "componentType": 5125,
+ "count": 3456,
+ "type": "SCALAR"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 773256,
+ "componentType": 5126,
+ "count": 1472,
+ "max": [
+ 0.24594897031784058,
+ 0.09379973262548447,
+ -0.042992498725652695
+ ],
+ "min": [
+ -0.24594897031784058,
+ -0.09379971027374268,
+ -0.08897159993648529
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 2,
+ "byteOffset": 790920,
+ "componentType": 5126,
+ "count": 1472,
+ "max": [
+ 0.9463985562324524,
+ 0.9590121507644653,
+ 0.9463995695114136
+ ],
+ "min": [
+ -0.9463986158370972,
+ -0.959011435508728,
+ -0.9464003443717957
+ ],
+ "type": "VEC3"
+ },
+ {
+ "bufferView": 1,
+ "byteOffset": 257752,
+ "componentType": 5126,
+ "count": 1472,
+ "max": [
+ 0.7309659123420715,
+ 0.728729248046875
+ ],
+ "min": [
+ 0.5163693428039551,
+ 0.2571752667427063
+ ],
+ "type": "VEC2"
+ },
+ {
+ "bufferView": 0,
+ "byteOffset": 380400,
+ "componentType": 5125,
+ "count": 6720,
+ "type": "SCALAR"
+ }
+ ],
+ "asset": {
+ "extras": {
+ "author": "Roksi203 (https://sketchfab.com/Roksi203)",
+ "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+ "source": "https://sketchfab.com/3d-models/skateboard-1802f3970ea4443593006df4007f78d0",
+ "title": "Skateboard"
+ },
+ "generator": "Sketchfab-14.41.0",
+ "version": "2.0"
+ },
+ "bufferViews": [
+ {
+ "buffer": 0,
+ "byteLength": 407280,
+ "name": "floatBufferViews",
+ "target": 34963
+ },
+ {
+ "buffer": 0,
+ "byteLength": 269528,
+ "byteOffset": 407280,
+ "byteStride": 8,
+ "name": "floatBufferViews",
+ "target": 34962
+ },
+ {
+ "buffer": 0,
+ "byteLength": 808584,
+ "byteOffset": 676808,
+ "byteStride": 12,
+ "name": "floatBufferViews",
+ "target": 34962
+ }
+ ],
+ "buffers": [
+ {
+ "byteLength": 1485392,
+ "uri": "scene.bin"
+ }
+ ],
+ "materials": [
+ {
+ "doubleSided": true,
+ "name": "basic",
+ "pbrMetallicRoughness": {
+ "metallicFactor": 0.0,
+ "roughnessFactor": 0.7885257473118872
+ }
+ },
+ {
+ "doubleSided": true,
+ "name": "basic.002",
+ "pbrMetallicRoughness": {
+ "metallicFactor": 0.0,
+ "roughnessFactor": 0.7885257473118872
+ }
+ },
+ {
+ "doubleSided": true,
+ "name": "basic.003",
+ "pbrMetallicRoughness": {
+ "metallicFactor": 0.0,
+ "roughnessFactor": 0.7885257473118872
+ }
+ }
+ ],
+ "meshes": [
+ {
+ "name": "bearings_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 1,
+ "POSITION": 0,
+ "TEXCOORD_0": 2
+ },
+ "indices": 3,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "deck_basic.002_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 5,
+ "POSITION": 4,
+ "TEXCOORD_0": 6
+ },
+ "indices": 7,
+ "material": 1,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "truck_nuts_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 9,
+ "POSITION": 8,
+ "TEXCOORD_0": 10
+ },
+ "indices": 11,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "truck_screws_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 13,
+ "POSITION": 12,
+ "TEXCOORD_0": 14
+ },
+ "indices": 15,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "trucks_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 17,
+ "POSITION": 16,
+ "TEXCOORD_0": 18
+ },
+ "indices": 19,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "washers_basic.003_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 21,
+ "POSITION": 20,
+ "TEXCOORD_0": 22
+ },
+ "indices": 23,
+ "material": 2,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "wheel_bolts_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 25,
+ "POSITION": 24,
+ "TEXCOORD_0": 26
+ },
+ "indices": 27,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ },
+ {
+ "name": "wheels_basic_0",
+ "primitives": [
+ {
+ "attributes": {
+ "NORMAL": 29,
+ "POSITION": 28,
+ "TEXCOORD_0": 30
+ },
+ "indices": 31,
+ "material": 0,
+ "mode": 4
+ }
+ ]
+ }
+ ],
+ "nodes": [
+ {
+ "children": [
+ 1
+ ],
+ "matrix": [
+ 1.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 2.220446049250313e-16,
+ -1.0,
+ 0.0,
+ 0.0,
+ 1.0,
+ 2.220446049250313e-16,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "Sketchfab_model"
+ },
+ {
+ "children": [
+ 2
+ ],
+ "matrix": [
+ 0.009999999776482582,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.009999999776482582,
+ 0.0,
+ 0.0,
+ -0.009999999776482582,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "5a35f67d815a4092ad3d7083355884aa.fbx"
+ },
+ {
+ "children": [
+ 3,
+ 5,
+ 7,
+ 9,
+ 11,
+ 13,
+ 15,
+ 17
+ ],
+ "name": "RootNode"
+ },
+ {
+ "children": [
+ 4
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "bearings"
+ },
+ {
+ "mesh": 0,
+ "name": "bearings_basic_0"
+ },
+ {
+ "children": [
+ 6
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "deck"
+ },
+ {
+ "mesh": 1,
+ "name": "deck_basic.002_0"
+ },
+ {
+ "children": [
+ 8
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "truck_nuts"
+ },
+ {
+ "mesh": 2,
+ "name": "truck_nuts_basic_0"
+ },
+ {
+ "children": [
+ 10
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "truck_screws"
+ },
+ {
+ "mesh": 3,
+ "name": "truck_screws_basic_0"
+ },
+ {
+ "children": [
+ 12
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "trucks"
+ },
+ {
+ "mesh": 4,
+ "name": "trucks_basic_0"
+ },
+ {
+ "children": [
+ 14
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "washers"
+ },
+ {
+ "mesh": 5,
+ "name": "washers_basic.003_0"
+ },
+ {
+ "children": [
+ 16
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "wheel_bolts"
+ },
+ {
+ "mesh": 6,
+ "name": "wheel_bolts_basic_0"
+ },
+ {
+ "children": [
+ 18
+ ],
+ "matrix": [
+ 100.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ -1.629206793918314e-05,
+ -99.99999999999868,
+ 0.0,
+ 0.0,
+ 99.99999999999868,
+ -1.629206793918314e-05,
+ 0.0,
+ 0.0,
+ 0.0,
+ 0.0,
+ 1.0
+ ],
+ "name": "wheels"
+ },
+ {
+ "mesh": 7,
+ "name": "wheels_basic_0"
+ }
+ ],
+ "scene": 0,
+ "scenes": [
+ {
+ "name": "Sketchfab_Scene",
+ "nodes": [
+ 0
+ ]
+ }
+ ]
+}
diff --git a/examples/skateboard-configurator/test1.json b/examples/skateboard-configurator/test1.json
new file mode 100644
index 0000000..c8f3d15
--- /dev/null
+++ b/examples/skateboard-configurator/test1.json
@@ -0,0 +1,22 @@
+{
+ "metadata": {"version": 4.6, "type": "Material", "generator": "Material.toJSON"},
+ "uuid": "e3761703-4ae0-4163-9218-a3692bcf299c",
+ "type": "MeshPhysicalMaterial",
+ "color": 16777215,
+ "sheen": 0,
+ "sheenColor": 0,
+ "sheenRoughness": 1,
+ "emissive": 0,
+ "specularIntensity": 1,
+ "specularColor": 16777215,
+ "iridescence": 0,
+ "iridescenceIOR": 1.3,
+ "iridescenceThicknessRange": [100, 400],
+ "anisotropy": 0,
+ "anisotropyRotation": 0,
+ "envMapIntensity": 1,
+ "reflectivity": null,
+ "thickness": 0,
+ "attenuationColor": 16777215,
+ "blendColor": 0
+}
diff --git a/examples/skateboard-configurator/test2.json b/examples/skateboard-configurator/test2.json
new file mode 100644
index 0000000..5ed40b9
--- /dev/null
+++ b/examples/skateboard-configurator/test2.json
@@ -0,0 +1,27 @@
+{
+ "metadata": {"version": 4.6, "type": "Material", "generator": "Material.toJSON"},
+ "uuid": "7d1a4515-f314-45fb-a1ee-c6df608b9b94",
+ "type": "MeshPhysicalMaterial",
+ "color": 16777215,
+ "roughness": 1,
+ "metalness": 0,
+ "sheen": 0,
+ "sheenColor": 0,
+ "sheenRoughness": 1,
+ "emissive": 0,
+ "specularIntensity": 1,
+ "specularColor": 16777215,
+ "clearcoat": 0,
+ "clearcoatRoughness": 0,
+ "iridescence": 0,
+ "iridescenceIOR": 1.3,
+ "iridescenceThicknessRange": [100, 400],
+ "anisotropy": 0,
+ "anisotropyRotation": 0,
+ "envMapIntensity": 1,
+ "reflectivity": 0.49999999999999983,
+ "transmission": 0,
+ "thickness": 0,
+ "attenuationColor": 16777215,
+ "blendColor": 0
+}
diff --git a/examples/spiral.md b/examples/spiral.md
index 4d6ac85..aa9d82f 100644
--- a/examples/spiral.md
+++ b/examples/spiral.md
@@ -3,7 +3,7 @@
+
+Deck
+ +
+
+
+
+
+
+
+
+
+ Trucks
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
- -
+ +
+ +
@@ -198,7 +198,7 @@ function meshExample({geometry = 'box', material = 'phong', color = ''} = {}) {
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- -