initial concept for DOM-based model load events #306
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…xtend from a base Model class that defines the event types for them
* develop: undo the temporary change to local examples importmap
…possible model types, let each model class specify its model type
…vent for `sizechange`, fully deprecate the `Events` object and usage of `.on`.
Deprecations:
Using `.on()` for events is fully deprecated, and the method will be removed in a version after 0.3.0. Use `.addEventListener()` instead (or your favorite web framework's template event syntax).
- `el.on('sizechange', ({x, y, z}) => {})` becomes `el.addEventListener('sizechange', ({target: {calculatedSize: {x, y, z}}}) => {})` (or just read from the element inside the event handler instead of reading from `event.target`).
- `el.on('MODEL_LOAD', ({model}) => {})` becomes `el.addEventListener('load', ({target: {threeModel: model}}) => {})`
- `el.on('MODEL_ERROR', error => {})` becomes `el.addEventListener('error', ({error}) => {})`
- `el.on('PROGRESS', event => {})` becomes `el.addEventListener('progress', event => {})` (`event` is the same)
The `el.emit()` method is also deprecated to be removed in a version
after 0.3.0, use `el.dispatchEvent()` instead. Along with `.on()` and
`.emit()`, the events mentioned will be removed in a future release
after 0.3.0.
… examples to React 19 and ensure that event prop types work as expected
`Settable`, update threejs minimum version requirement and fix some type errors, delete the `Scene.physicallyCorrectLights` property BREAKING: `Scene.physicallyCorrectLights` has been removed, light mode is always physically correct now, as it has been deprecated in Three.js and is being removed. If you had this value as false (that was the default) the lighting of your scene may appear darker now and will need adjustment. Lighting uses physically-correct units (candela, based on world units in meters) which mainly means that you'll typically need higher values for light `intensity` values, for example, depending on the size of your scene, try 100 or 1000 instead of 1. This is a nice step ahead for more better and more realistic lighting by default.
…Fling`, the logic will be usable for other purposes next
refactor: use upwardRoots in some more spots to improve selector refs so they all search in upwards roots refactor: make model elements and behaviors have common base classes to make them easier to reference with a common type feat: show a skeleton helper on a model element when it has its `debug` attribute set to true
* cleanups: chore: better organization for three utils refactor: split out the drag handling from `FlingRotation` into `DragFling`, the logic will be usable for other purposes next refactor: simplify `*Fling` classes by making them extend from `Settable`, update threejs minimum version requirement and fix some type errors, delete the `Scene.physicallyCorrectLights` property
…ts that use the same texture share the texture by default
…igger a texture update every time the DOM changes but the projectors didn't
…er side in SSR frameworks)
…rameworks that do not have a window)
…ents, prevent `LoadingIcon` from touching DOM APIs in SSR environments
…he next microtask instead of the next animation frame, add a .passive property to ScrollFling that when set to true will use passive wheel events
* develop: update examples importmap dependency versions for githack update camera-rig example update docs, update examples importmap fix examples importmap v0.3.0-alpha.44 update @lume/cli version and fix type errors get first-person-shooter deployed (first-person-shooter-20950.nodechef.com) get first-person-shooter working on latest lume and meteor Update lume/cli and lume/element, update decorator usage accordingly. With this we were able to make some double `__underscored` properties actually `#private` but still reactive. We also renamed some `__underscored` properties to be public in `CompositionTracker` because they could be useful in subclasses. Add a unit test file for the live-code package. update TypeScript and fix/improve some types as needed Update `lowclass`, `@lume/element`, and `three` versions (`@types/three` and `three` in `yarn.lock`)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Model elements (for example
<lume-gltf-model>now extend from a baseModelclass that defines the event types for them. We've added aLoadEventwith that is dispatched with the name"load", just like"load"events for built-in elements like<img>,<iframe>, etc.The benefit of this is that we are closer to DOM standards with this change, and users of web frameworks can hook into events for 3D elements in the same way they do with built-in elements in their favorite web framework's template syntax. For example, a React user can hook into the
loadevent for a 3D elements just the same as they would for an<img>element: