Create 3D web applications with HTML. Bring a new depth to your DOM!
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! 00758eaa29054e6ae2732a60d4b9f7e0a33a8a6aNew 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">.Removed console.logs from source.
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:
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]} />
This is the first release of LUME's 3D elements! :tada:
This isn't 1.0 yet. There will be changes until 1.0 is ready.
Breaking change: the public mountPromise property is now gone from all nodes, and underneath the hood the logic relies on synchronous connected/disconnected callbacks, which makes the code simpler and easier to understand.
Fixes a bug that was causing sizes not to propagate to WebGL objects.
This release updates all props (position, size, rotation, etc) to be reactive by means of SkateJS instead of our own (not very organized) getters/setters. This cleans up the code a bit. For the most part, the changes are not noticeable and everything works the same as before on the outside.
The only breaking changes are that camelCased props are now mapped strictly to dash-cased attributes.
This means the mountPoint property of a Node can also be set via the mount-point="" attribute but no longer via the mountpoint="" attribute, and same for sizeMode (use size-mode="", not sizemode="" or sizeMode="").
From now on any new props that are camelCased will map only to dashed-cased attributes.
Example code changes:
The following,
<i-plane id="plane" mountPoint="0.5 0.5"></i-plane>
<i-box id="box" sizemode="proportional literal"></i-box>
changes to
<i-plane id="plane" mount-point="0.5 0.5"></i-plane>
<i-box id="box" size-mode="proportional literal"></i-box>
The JavaScript props remain the same (camelCased):
plane.mountPoint = [0.5, 0.5]
box.sizeMode = ['proportional', 'literal']
Major changes:
experimental-webgl attribute on your <i-scene> element. Stick the following in an HTML file and open it in your browser:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>VR mode test</title>
<meta charset="utf-8">
<!-- required polyfills if your browser doesn't have Custom Elements -->
<script src="https://unpkg.com/[email protected]/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-sd-ce.js"></script>
<script src="https://unpkg.com/[email protected]/global.js"></script>
<script> infamous.html.useDefaultNames() </script>
<style> body, html { width: 100%; height: 100%; padding: 0; margin: 0; } </style>
</head>
<body>
<i-scene experimental-webgl vr>
<i-box id="node" size="80 80 80" align="0.5 0.5 0.5" mountPoint="0.5 0.5 0.5" position="0 0 -500" rotation="30 30 30" color="deeppink"></i-box>
<i-point-light align="0.5 0.5 0.5" mountPoint="0.5 0.5 0.5" position="-200 0 0" color="yellow"></i-point-light>
</i-scene>
<script>
window.node.rotation = ( x, y, z, time ) => [ x, ++y, z ]
</script>
</body>
</html>