Create 3D web applications with HTML. Bring a new depth to your DOM!
MIT License
Bot releases are visible (Hide)
<lume-camera-rig>
attributes reactive instead of accepting only initial values b48b682be7826233b8a92937c5ee4a5311f64d28XYZValues
x
, y
, z
properties enumerable bd566f01041e78e464482895922ba8744464ca39 c97721754b4b497657015832515c6b0db106ea11<lume-camera-rig>
attributes reactive instead of serving only as initial values b48b682be7826233b8a92937c5ee4a5311f64d28standard-material
and physical-material behaviors
59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099 5711e8beeb04454b5484b11c1d4339f7d3b39269 (expanded from alpha.9)PointLight.power
property 6cbedf6645761ddd2dfaa1b7579d12ae9516056b<lume-torus>
element, torus-geometry
behavior, and docs for other mesh elements db268f9ef2eca1e7f1bfc4a1d913d69074482eb7.version
number property on all elements increments when world matrices of an element and its subtree have been updated 4e555fa78ede362ebfa6d9d3d42086ea89c00000Scene.physicallyCorrectLights
property to enable physically-correct lighting mode. c52628bd43b032a7afc5f2c9e448284765832f15projected-material
behaviors for Mesh
elements, along with accompanying <lume-texture-projector>
elements that project a texture onto meshes, and doc updates 5f3587f3ab06b1d7f1411155733b2b8b7ec6b0ef
@emits
decorator bb02328a8d686c7722f592e3afb5e96fdbf50622@emits
decorator, we now officially use the more robust and flexible dependency-tracking reactivity patterns for observing property changes bb02328a8d686c7722f592e3afb5e96fdbf50622@lume/eventful
from the index fb7fcb373b367eb17bef36b33b2a2d7872e859f8Published by trusktr over 2 years ago
Features:
<lume-3ds-model>
element to load .3ds
files. It works exactly like <lume-fbx-model>
and <lume-gltf-model>
elements, accepting a src
attribute for the asset file path. The only difference is the name of the element. abb9c5a7a4086cdd830ce52da4afed41c732ede8Breaking changes:
three
to 0.139. This doesn't break LUME APIs, but any code relying on element.three
to use Three.js objects directly may break, especially code that relies on Geometry
APIs because the Geometry
class was removed and all geometries that previously extended from Geometry
now extend from BufferGeometry
. 1e85a50ebd76e89294bf92b010676521ae6d74ecFull Changelog: https://github.com/lume/lume/compare/v0.3.0-alpha.9...v0.3.0-alpha.10
deltaTime
parameter to property functions 32d2942ae5fe11c33187c011a32a2edb898709f4element.rotation = (x, y, z, t, dt) => {...}
ShadowRoot
to <lume-camera-rig>
to make it possible to position (slot) external children relative to the internal camera (f.e. for HUDs) https://github.com/lume/lume/commit/55d6f9954add5332dd95bd74c765209b338f44f0
<lume-shape>
element allows for creating extrudable 2D shapes including the ability to define shapes with SVG path strings 9d3a37085b0ff792cf62295142f644caf80f3fb0 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099<lume-clip-plane>
element that allows clipping objects on a plane, along with docs and example 4c834df26191f0fb9d686778ca6a5a2b1515e7bf 6b69d0a29eb81da44ec7f4a25c663773cdec8976 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099standard-material
and physical-material
behaviors 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099PhongMaterialBehavior
59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099minHorizontalAngle
and maxHorizontalAngle
to <lume-camera-rig>
to control min/max amount of lateral rotation 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099<lume-cube-layout>
element makes a layout with 6 areas, one one each side of an invisible cube 59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099lumeParent
to parentLumeElement
59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099LUME.useDefaultNames()
in favor of LUME.defineElements()
, deprecate Class.define(name)
in favor of Class.defineElement(name)
https://github.com/lume/lume/commit/0a93fdd9acbd3aa6499e5cbb76125bdd72ef726c
remove the getter methods we had in place for Transformable and Sizeable properties, as TypeScript now has the ability to define different types for getters and setters of an accessor
This removes Transformable
's .getPosition()
, .getRotation()
, .getScale()
, .getOrigin()
, .getAlignPoint()
, .getMountPoint()
, and .getOpacity()
, and Sizeable
's .getSize()
and .getSizeMode()
methods.
Migration: use the respective properties directly (.position
, .rotation
, etc)
https://github.com/lume/lume/commit/f1f7055628b2d445b24a4ef8b19139310ab3409f
better handling of string values, XYZNumberValues
now coerces strings to numbers when setting x, y, or z, which can change behavior of an app in some cases. Migration: make sure you provide numbers, not strings; there is no way to restore old behavior because it was undefined. https://github.com/lume/lume/commit/79d514ffe41721eda86b2ee832b3b485dc015f36
renamed lumeParent
to parentLumeElement
59ef61bd3a97ebd5c7ff8c12bf912fa66be6a099
This includes updates from v0.3.0-alpha.4
to v0.3.0-alpha.8
Get them while they're hot!
VisualLayers
class adapted from my work at https://discourse.threejs.org/t/multiple-scenes-vs-layers/12503/34. We will soon use this to implement a declarative way for specifying visual layers in HTML markup. bdac4ee515a6972172bd5c28d4e2d93b5daa8124center-geometry
boolean attribute to <lume-gltf-model>
that when true
centers all of the model's geometry at the origin. f1a2856b867dee2de357473870a48a9a1e97035e<camera-rig>
that when false
disables user interaction, useful for non-interative positioning of a camera using a camera-rig
as the positioning mechanism. 76da7edb49d100a59ef3846c13597bb51969892cfogMode
, fogNear
, fogFar
, and fogColor
attributes to <lume-scene>
to set a visual fog. 18fe01a562ff9251f047f6ad6a126e41104aea69.fogDensity
property to Scene to configure fog density with fogMode
is expo2
. 3e45dd06b9240311aca5eda3a47d1a5ba4b799d1cameraNear
and cameraFar
properties to control the near and far of a Scene
's default camera. e24cdb7b2d86a3401c68671846e92797e01e2a05.swapLayers
property to Scene
to allow the CSS layer to be rendered below the WebGL layer. 762704f6e11dfec409c1c0486582209d88dea4d8<lume-instanced-mesh>
element. We are able to supply instance positions, rotations, and colors viaposition="1 2 3, 4 5 6, 7 8 9"
with each triplet being an X, Y and Z value. ec854161797c3875654b1a13b4f47c16692923e1 20b9906090ebd07040879a13115305acb3ae7c33ScrollFling
's and FlingRotation
's render tasks (i.e. terminate any animations) on stop()
. ded9fe229447d7e7069479adce1b83643e43ad11FlingRotation
instance no longer automatically starts on construction; the start()
method should be called manually after instantiation. 8a1b4b7355f97a04ced712fbb0f0b8d3d6b40005Factor out some old code from a few years back, making the tree structure
easier to understand and less error prone. This allowed us to make more sense
of the ShadowDOM composition stuff and to be able to finally polish the
remaining rough edges. 🎉
To clean up the code and finish ShadowDOM composition, we removed some APIs:
add
, addChildren
, removeNode
,removeChildren
, removeAllChildren
, childCount
, subnodes
, andparent
. You must now simply use the actual DOM APIs like append
,appendChild
, remove
, removeChild
, parentElement
, children
, etc.Scene.mount()
and Scene.unmount()
. Just use regular DOM APIs toScene
from the DOM.Unrelated to ShadowDOM composition, we cleaned up some other things too:
imperativeCounterpart
property._render()
to update()
because it is called from the outside inMotor
class.The stuff we removed existed for two reasons:
add
, removeChild
, etc) existed from before we werefeat: Added new APIs that are LUME-specific and complementary to DOM APIs:
.lumeParent
- Get the parent element of the current LUME element only if.lumeChildren
- Get the child LUME elements of the current LUME element..lumeChildCount
- Get the count of child LUME elements of the current LUMEcomposedLumeParent
- The composed parent LUME element (based on the composed tree) of the current LUME element.composedLumeChildren
- The composed child LUME elements (based on the composed tree) of the current LUME element..traverseSceneGraph(visitorFn)
- Traverses the composed tree of LUMEIn these new APIs, non-LUME elements are ignored similarly to how some regular
DOM APIs ignore text nodes (.children
, .parentElement
, .assignedElements
,
etc). To certain LUME elements like <lume-node>
or <lume-mixed-plane>
,
non-LUME HTML elements and text nodes are merely content that render on their
rectangular flat surface, and those non-LUME elements are not part of the
hierarchy of 3D objects, so these new APIs make it easier to traverse LUME elements
while ignoring the rest.
Published by trusktr over 3 years ago
New features
lambert-material
behavior. 797156360ad9f658bc0fdeb977abeb025ca89994<lume-direction-light>
element for defining directional lighting. 1ffd1818e107cbe3a16c18afdddaa71829c966f0Published by trusktr over 3 years ago
Version 0.3 is now in progress!
See the new demos!
the flingRotation
function was converted into a FlingRotation
class, which now provides an instance with start/stop methods similar to ScrollFling
. 444ecbe38414dbf60d9f4c0af115ce69821de66b
add the <lume-fbx-model>
element for loading FBX models. 6fbb1de0c1f27bcb7746179f9b7b8fb28548d06e
use a single type of event for all model elements. All model elements (<lume-gltf-model>
, <lume-obj-model>
, <lume-collada-model>
, <lume-fbx-model>
, and any elements with a points-geometry
behavior) now emit a generic event named MODEL_LOAD
of type {format: 'obj' | 'gltf' | 'collada' | 'fbx' | 'ply'; model: Group | GLTF | Collada | BufferGeometry}
, and a generic MODEL_ERROR
event of type Error
. The GLTF_*
and COLLADA_*
events were removed.
support for declaration emit. This changes mixin type definitions and usage in order to make declaration output be possible import for TypeScript projects). Because of this, mixins are now called as extends SomeClass(Foo)
instead of extends SomeClass.mixin(Foo)
, and come classes were converted to plain classes (use extends SomeClass
instead of extends SomeClass.mixin(Foo)
now). 56df57aaa9aec2bf738115c132cd5fd77bf842a1
private
members are now public and prefixed with double-underscores __
to denote private. Do not rely on private members labeled with double underscores!, they can change at any time.reorganize folder structure to co-locate related classes independently. Too many things were in the core/ folder. If you're importing classes directly from LUME's sub-folders, this will break your import statements. b06766a79b78a1322b02d70377cc8ae86b040341
rename LightBase
to Light
(the base class for <lume-point-light>
and <lume-ambient-light>
elements). 432b14bc30c59152b8eed3cc8df0f1667361aa4a
rename AutoLayoutNode
's add
and remove
methods to addToLayout
and removeFromLayout
, respectively, to satisfy the TypeScript requirement that subclass methods do not change the signature of superclass methods. 4a357a4d2541d0bfa57667cadf28bbf0e657dda5
rename classes (along with corresponding element and behavior names) to follow a strict PascalCase convention, and one class deleted. e1366716df37e378f9a18a31abc7131370c5ed3d
All words or "parts" or "things" of a name should have only the first
letter uppercase and other letter lowercased. For example "GltfModel"
instead of "GLTFModel", or "HtmlScene" instead of "HTMLScene".
Main changes to worry about:
DOMNode
(<lume-dom-node>
) was deleted.DOMPlane
(<lume-dom-plane>
) => MixedPlane
(<lume-mixed-plane>
)DOMNodeGeometryBehavior
(domnode-geometry
) => MixedPlaneGeometryBehavior
(mixedplane-geometry
)DOMNodeMaterialBehavior
(domnode-material
) => MixedPlaneMaterialBehavior
(mixedplane-material
)domnode-material
=> mixedplane-material
perspective
attribute to Scene
(<lume-scene>
). a991e69749b78f9cefdecb36c86f0656ecbb83aepoints-material
behavior for lume-mesh
elements for rendering point clouds. See the ply-geometry example (the lume-points element there implicitly uses the points-material behavior by default). 8c7025879c17befc1d1a3487f09d755f7d6194c2protected
keywords were removed, working towards working declaration emit. This means formerly protected members are now technically public, but note that they are still prefixed with an underscore _
to denote that they are protected! 00758eaa29054e6ae2732a60d4b9f7e0a33a8a6aPublished by trusktr over 3 years ago
New features:
CameraRig.active
property (<lume-camera-rig>
active
attribute) - When the property is set to true
, the CameraRig's camera becomes the scene's active camera.CameraRig.dollyFactor
property (<lume-camera-rig>
dolly-factor
attribute) - A number that that multiplies the speed that the CamerRig will dolly the camera in and out when scrolling (zooming). Set it to a lower number to make the camera dolly slower, for example.has
attribute has been added. F.e. <lume-mesh has="phong-material">
.Summary:
The align
property (align
attribute) renamed to alignPoint
property (align-point
attribute).
Breaking changes:
align
property was renamed to alignPoint
(with its dash-cased align-point
attribute equivalent) for all 3D elements. This prevents us from colliding and shadowing the built-in DOM align
property.Fixes:
Published by trusktr over 3 years ago
This release is non-breaking to plain JavaScript users, but some type definitions were modified and improved (especially for JSX templating), which is a breaking change in type checking for TypeScript users.
The properties that all LUME 3D elements have (f.e. position
, rotation
, etc) have setters that accept values that can be coerced into the underlying data type that is returned by the getter.
In JavaScript, we can set values as follows:
// with an array of numbers with up to three items:
element.position = [1, 2, 3]
// with an object with x,y, and z properties:
element.position = {x: 1, y: 2, z: 3}
// with a string (normally we avoid this form in JavaScript, but this is the form in which values from
// HTML attributes arrive to the properties):
element.position = "1 2 3"
// with an XYZValues object (f.e. XYZNumberValues):
element.position = new XYZNumberValues(1, 2, 3)
// with an property function which gets called repeatedly in an animation render loop. The function
// can return the same type of values as we can set in the previous example lines.
// The following animates Y position over time.
element.position = (x, y, z, time) => [x, ++y, z]
element.position = (x, y, z, time) => {x, y: ++y, z}
element.position = (x, y, z, time) => new XYZNumberValues(x, ++y, z)
The getters always return an XYZValues
object (f.e. XYZNumberValues
):
console.log(element.position) // XYZNumberValues { x: 1, y: 2, z: 3, ... }
// We can also set values like this:
element.position.x = 1
element.position.y = 2
element.position.z = 3
The breaking change is that now all of these possibilities are now described in the type definitions for the properties. Whereas before the types of the properties were only something like XYZNumberValues
, they are now typed as XYZNumberValues | [number, number, number] | {x: number, y: number, z: number} | string | PropertyFunction
or similar.
TypeScript has not (until the near future) had a way to define a different type for a getter than for a setter, so in TypeScript, the return value of element.position
will currently be that union type, and we'd have to type cast it like the following in order to use it:
;(this.position as XYZNumberValues).x = 1
To remedy this until the upcoming TypeScript Variant Accessors is out, we've provided get*()
methods for each of the properties, so TS users can write like follows:
this.getPosition().x = 1
A benefit of the new types is that all the following types of JSX are now valid and type checked correctly:
const sphere = <lume-box rotation={[1, 2, 3]} />
const sphere = <lume-box rotation={{x, y: ++y, z}} />
const sphere = <lume-box rotation={new XYZNumberValues(1, 2, 3)} />
const sphere = <lume-box rotation={"1 2 3"} />
const sphere = <lume-box rotation="1 2 3" />
const sphere = <lume-box rotation={(x, y, z, time) => [x, ++y, z]} />
Published by trusktr over 3 years ago
This is the first release of LUME's 3D elements! 🎉
This isn't 1.0 yet. There will be changes until 1.0 is ready.