lume
Version:
933 lines • 83.9 kB
JavaScript
// TODO: write a test that imports public interfaces in every possible
// permutation to detect circular dependency errors.
// See: https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
};
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0) continue;
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
if (_ = accept(result.get)) descriptor.get = _;
if (_ = accept(result.set)) descriptor.set = _;
if (_ = accept(result.init)) initializers.unshift(_);
}
else if (_ = accept(result)) {
if (kind === "field") initializers.unshift(_);
else descriptor[key] = _;
}
}
if (target) Object.defineProperty(target, contextIn.name, descriptor);
done = true;
};
var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
};
import { createEffect, onCleanup, untrack } from 'solid-js';
import html from 'solid-js/html';
import { signal } from 'classy-solid';
import { booleanAttribute, attribute, numberAttribute, element, stringAttribute, noSignal, } from '@lume/element';
import { Scene as ThreeScene } from 'three/src/scenes/Scene.js';
import { PerspectiveCamera as ThreePerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
import { Camera as ThreeCamera } from 'three/src/cameras/Camera.js';
// import {AmbientLight} from 'three/src/lights/AmbientLight.js'
import { Color } from 'three/src/math/Color.js';
import { Fog } from 'three/src/scenes/Fog.js';
import { FogExp2 } from 'three/src/scenes/FogExp2.js';
import { WebglRendererThree } from '../renderers/WebglRendererThree.js';
import { Css3dRendererThree } from '../renderers/Css3dRendererThree.js';
import { SharedAPI } from './SharedAPI.js';
import { Motor } from './Motor.js';
import { autoDefineElements } from '../LumeConfig.js';
import { version } from '../index.js'; // TODO replace with version.ts for vanilla ES Module tree shakability
import { defaultScenePerspective } from '../constants.js';
const magic = () => ` LUME ✨ v${version} 👉 https://github.com/lume/lume `;
// Queue a microtask because otherwise this fires before the module graph has
// executed the version variable initializer.
queueMicrotask(() => console.info(magic()));
const Super = SharedAPI;
/**
* @class Scene -
*
* Element: `<lume-scene>`
*
* This is the backing class for `<lume-scene>` elements. All
* [`Element3D`](./Element3D.md)s must be inside of a `<lume-scene>` element. A `Scene`
* establishes a visual area in a web application where a 3D scene will be
* rendered.
*
* A Scene has some properties that apply to the scene as a whole and will have
* an effect on all LUME elements in the scene. For example, `fog-mode` defines fog
* rendering that changes the color of all WebGL objects in the scene to make them
* have the appearance of being obscured by a haze.
*
* ## Example
*
* The following example shows how to begin making a LUME scene within an HTML
* file. To learn more about how to get started, see the [install guide](../../guide/install.md).
*
* <live-code src="../../examples/scene.html"></live-code>
*
* @extends SharedAPI
*/
// TODO @element jsdoc tag
let Scene = (() => {
let _classDecorators = [element('lume-scene', autoDefineElements)];
let _classDescriptor;
let _classExtraInitializers = [];
let _classThis;
let _classSuper = Super;
let _instanceExtraInitializers = [];
let _enableCss_decorators;
let _enableCss_initializers = [];
let _enableCss_extraInitializers = [];
let _webgl_decorators;
let _webgl_initializers = [];
let _webgl_extraInitializers = [];
let _swapLayers_decorators;
let _swapLayers_initializers = [];
let _swapLayers_extraInitializers = [];
let _shadowMode_decorators;
let _shadowMode_initializers = [];
let _shadowMode_extraInitializers = [];
let _get_shadowmapType_decorators;
let _set_shadowmapType_decorators;
let _vr_decorators;
let _vr_initializers = [];
let _vr_extraInitializers = [];
let _backgroundColor_decorators;
let _backgroundColor_initializers = [];
let _backgroundColor_extraInitializers = [];
let _backgroundOpacity_decorators;
let _backgroundOpacity_initializers = [];
let _backgroundOpacity_extraInitializers = [];
let _background_decorators;
let _background_initializers = [];
let _background_extraInitializers = [];
let _backgroundIntensity_decorators;
let _backgroundIntensity_initializers = [];
let _backgroundIntensity_extraInitializers = [];
let _backgroundBlur_decorators;
let _backgroundBlur_initializers = [];
let _backgroundBlur_extraInitializers = [];
let _equirectangularBackground_decorators;
let _equirectangularBackground_initializers = [];
let _equirectangularBackground_extraInitializers = [];
let _environment_decorators;
let _environment_initializers = [];
let _environment_extraInitializers = [];
let _fogMode_decorators;
let _fogMode_initializers = [];
let _fogMode_extraInitializers = [];
let _fogNear_decorators;
let _fogNear_initializers = [];
let _fogNear_extraInitializers = [];
let _fogFar_decorators;
let _fogFar_initializers = [];
let _fogFar_extraInitializers = [];
let _fogColor_decorators;
let _fogColor_initializers = [];
let _fogColor_extraInitializers = [];
let _fogDensity_decorators;
let _fogDensity_initializers = [];
let _fogDensity_extraInitializers = [];
let _physicallyCorrectLights_decorators;
let _physicallyCorrectLights_initializers = [];
let _physicallyCorrectLights_extraInitializers = [];
let _cameraNear_decorators;
let _cameraNear_initializers = [];
let _cameraNear_extraInitializers = [];
let _cameraFar_decorators;
let _cameraFar_initializers = [];
let _cameraFar_extraInitializers = [];
let _perspective_decorators;
let _perspective_initializers = [];
let _perspective_extraInitializers = [];
let _private_defaultThreeCamera_decorators;
let _private_defaultThreeCamera_initializers = [];
let _private_defaultThreeCamera_extraInitializers = [];
let _private_defaultThreeCamera_descriptor;
let _private_camera_decorators;
let _private_camera_initializers = [];
let _private_camera_extraInitializers = [];
let _private_camera_descriptor;
let _localClipping_decorators;
let _localClipping_initializers = [];
let _localClipping_extraInitializers = [];
let _private_elementParentSize_decorators;
let _private_elementParentSize_initializers = [];
let _private_elementParentSize_extraInitializers = [];
let _private_elementParentSize_descriptor;
var Scene = class extends _classSuper {
static { _classThis = this; }
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
_enableCss_decorators = [booleanAttribute];
_webgl_decorators = [booleanAttribute];
_swapLayers_decorators = [booleanAttribute];
_shadowMode_decorators = [attribute];
_get_shadowmapType_decorators = [attribute, noSignal];
_set_shadowmapType_decorators = [attribute];
_vr_decorators = [booleanAttribute];
_backgroundColor_decorators = [attribute];
_backgroundOpacity_decorators = [numberAttribute];
_background_decorators = [attribute];
_backgroundIntensity_decorators = [numberAttribute];
_backgroundBlur_decorators = [numberAttribute];
_equirectangularBackground_decorators = [booleanAttribute];
_environment_decorators = [attribute];
_fogMode_decorators = [stringAttribute];
_fogNear_decorators = [numberAttribute];
_fogFar_decorators = [numberAttribute];
_fogColor_decorators = [stringAttribute];
_fogDensity_decorators = [numberAttribute];
_physicallyCorrectLights_decorators = [booleanAttribute];
_cameraNear_decorators = [numberAttribute];
_cameraFar_decorators = [numberAttribute];
_perspective_decorators = [numberAttribute];
_private_defaultThreeCamera_decorators = [signal];
_private_camera_decorators = [signal];
_localClipping_decorators = [signal];
_private_elementParentSize_decorators = [signal];
__esDecorate(this, null, _get_shadowmapType_decorators, { kind: "getter", name: "shadowmapType", static: false, private: false, access: { has: obj => "shadowmapType" in obj, get: obj => obj.shadowmapType }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _set_shadowmapType_decorators, { kind: "setter", name: "shadowmapType", static: false, private: false, access: { has: obj => "shadowmapType" in obj, set: (obj, value) => { obj.shadowmapType = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, _private_defaultThreeCamera_descriptor = { get: __setFunctionName(function () { return this.#defaultThreeCamera_accessor_storage; }, "#defaultThreeCamera", "get"), set: __setFunctionName(function (value) { this.#defaultThreeCamera_accessor_storage = value; }, "#defaultThreeCamera", "set") }, _private_defaultThreeCamera_decorators, { kind: "accessor", name: "#defaultThreeCamera", static: false, private: true, access: { has: obj => #defaultThreeCamera in obj, get: obj => obj.#defaultThreeCamera, set: (obj, value) => { obj.#defaultThreeCamera = value; } }, metadata: _metadata }, _private_defaultThreeCamera_initializers, _private_defaultThreeCamera_extraInitializers);
__esDecorate(this, _private_camera_descriptor = { get: __setFunctionName(function () { return this.#camera_accessor_storage; }, "#camera", "get"), set: __setFunctionName(function (value) { this.#camera_accessor_storage = value; }, "#camera", "set") }, _private_camera_decorators, { kind: "accessor", name: "#camera", static: false, private: true, access: { has: obj => #camera in obj, get: obj => obj.#camera, set: (obj, value) => { obj.#camera = value; } }, metadata: _metadata }, _private_camera_initializers, _private_camera_extraInitializers);
__esDecorate(this, _private_elementParentSize_descriptor = { get: __setFunctionName(function () { return this.#elementParentSize_accessor_storage; }, "#elementParentSize", "get"), set: __setFunctionName(function (value) { this.#elementParentSize_accessor_storage = value; }, "#elementParentSize", "set") }, _private_elementParentSize_decorators, { kind: "accessor", name: "#elementParentSize", static: false, private: true, access: { has: obj => #elementParentSize in obj, get: obj => obj.#elementParentSize, set: (obj, value) => { obj.#elementParentSize = value; } }, metadata: _metadata }, _private_elementParentSize_initializers, _private_elementParentSize_extraInitializers);
__esDecorate(null, null, _enableCss_decorators, { kind: "field", name: "enableCss", static: false, private: false, access: { has: obj => "enableCss" in obj, get: obj => obj.enableCss, set: (obj, value) => { obj.enableCss = value; } }, metadata: _metadata }, _enableCss_initializers, _enableCss_extraInitializers);
__esDecorate(null, null, _webgl_decorators, { kind: "field", name: "webgl", static: false, private: false, access: { has: obj => "webgl" in obj, get: obj => obj.webgl, set: (obj, value) => { obj.webgl = value; } }, metadata: _metadata }, _webgl_initializers, _webgl_extraInitializers);
__esDecorate(null, null, _swapLayers_decorators, { kind: "field", name: "swapLayers", static: false, private: false, access: { has: obj => "swapLayers" in obj, get: obj => obj.swapLayers, set: (obj, value) => { obj.swapLayers = value; } }, metadata: _metadata }, _swapLayers_initializers, _swapLayers_extraInitializers);
__esDecorate(null, null, _shadowMode_decorators, { kind: "field", name: "shadowMode", static: false, private: false, access: { has: obj => "shadowMode" in obj, get: obj => obj.shadowMode, set: (obj, value) => { obj.shadowMode = value; } }, metadata: _metadata }, _shadowMode_initializers, _shadowMode_extraInitializers);
__esDecorate(null, null, _vr_decorators, { kind: "field", name: "vr", static: false, private: false, access: { has: obj => "vr" in obj, get: obj => obj.vr, set: (obj, value) => { obj.vr = value; } }, metadata: _metadata }, _vr_initializers, _vr_extraInitializers);
__esDecorate(null, null, _backgroundColor_decorators, { kind: "field", name: "backgroundColor", static: false, private: false, access: { has: obj => "backgroundColor" in obj, get: obj => obj.backgroundColor, set: (obj, value) => { obj.backgroundColor = value; } }, metadata: _metadata }, _backgroundColor_initializers, _backgroundColor_extraInitializers);
__esDecorate(null, null, _backgroundOpacity_decorators, { kind: "field", name: "backgroundOpacity", static: false, private: false, access: { has: obj => "backgroundOpacity" in obj, get: obj => obj.backgroundOpacity, set: (obj, value) => { obj.backgroundOpacity = value; } }, metadata: _metadata }, _backgroundOpacity_initializers, _backgroundOpacity_extraInitializers);
__esDecorate(null, null, _background_decorators, { kind: "field", name: "background", static: false, private: false, access: { has: obj => "background" in obj, get: obj => obj.background, set: (obj, value) => { obj.background = value; } }, metadata: _metadata }, _background_initializers, _background_extraInitializers);
__esDecorate(null, null, _backgroundIntensity_decorators, { kind: "field", name: "backgroundIntensity", static: false, private: false, access: { has: obj => "backgroundIntensity" in obj, get: obj => obj.backgroundIntensity, set: (obj, value) => { obj.backgroundIntensity = value; } }, metadata: _metadata }, _backgroundIntensity_initializers, _backgroundIntensity_extraInitializers);
__esDecorate(null, null, _backgroundBlur_decorators, { kind: "field", name: "backgroundBlur", static: false, private: false, access: { has: obj => "backgroundBlur" in obj, get: obj => obj.backgroundBlur, set: (obj, value) => { obj.backgroundBlur = value; } }, metadata: _metadata }, _backgroundBlur_initializers, _backgroundBlur_extraInitializers);
__esDecorate(null, null, _equirectangularBackground_decorators, { kind: "field", name: "equirectangularBackground", static: false, private: false, access: { has: obj => "equirectangularBackground" in obj, get: obj => obj.equirectangularBackground, set: (obj, value) => { obj.equirectangularBackground = value; } }, metadata: _metadata }, _equirectangularBackground_initializers, _equirectangularBackground_extraInitializers);
__esDecorate(null, null, _environment_decorators, { kind: "field", name: "environment", static: false, private: false, access: { has: obj => "environment" in obj, get: obj => obj.environment, set: (obj, value) => { obj.environment = value; } }, metadata: _metadata }, _environment_initializers, _environment_extraInitializers);
__esDecorate(null, null, _fogMode_decorators, { kind: "field", name: "fogMode", static: false, private: false, access: { has: obj => "fogMode" in obj, get: obj => obj.fogMode, set: (obj, value) => { obj.fogMode = value; } }, metadata: _metadata }, _fogMode_initializers, _fogMode_extraInitializers);
__esDecorate(null, null, _fogNear_decorators, { kind: "field", name: "fogNear", static: false, private: false, access: { has: obj => "fogNear" in obj, get: obj => obj.fogNear, set: (obj, value) => { obj.fogNear = value; } }, metadata: _metadata }, _fogNear_initializers, _fogNear_extraInitializers);
__esDecorate(null, null, _fogFar_decorators, { kind: "field", name: "fogFar", static: false, private: false, access: { has: obj => "fogFar" in obj, get: obj => obj.fogFar, set: (obj, value) => { obj.fogFar = value; } }, metadata: _metadata }, _fogFar_initializers, _fogFar_extraInitializers);
__esDecorate(null, null, _fogColor_decorators, { kind: "field", name: "fogColor", static: false, private: false, access: { has: obj => "fogColor" in obj, get: obj => obj.fogColor, set: (obj, value) => { obj.fogColor = value; } }, metadata: _metadata }, _fogColor_initializers, _fogColor_extraInitializers);
__esDecorate(null, null, _fogDensity_decorators, { kind: "field", name: "fogDensity", static: false, private: false, access: { has: obj => "fogDensity" in obj, get: obj => obj.fogDensity, set: (obj, value) => { obj.fogDensity = value; } }, metadata: _metadata }, _fogDensity_initializers, _fogDensity_extraInitializers);
__esDecorate(null, null, _physicallyCorrectLights_decorators, { kind: "field", name: "physicallyCorrectLights", static: false, private: false, access: { has: obj => "physicallyCorrectLights" in obj, get: obj => obj.physicallyCorrectLights, set: (obj, value) => { obj.physicallyCorrectLights = value; } }, metadata: _metadata }, _physicallyCorrectLights_initializers, _physicallyCorrectLights_extraInitializers);
__esDecorate(null, null, _cameraNear_decorators, { kind: "field", name: "cameraNear", static: false, private: false, access: { has: obj => "cameraNear" in obj, get: obj => obj.cameraNear, set: (obj, value) => { obj.cameraNear = value; } }, metadata: _metadata }, _cameraNear_initializers, _cameraNear_extraInitializers);
__esDecorate(null, null, _cameraFar_decorators, { kind: "field", name: "cameraFar", static: false, private: false, access: { has: obj => "cameraFar" in obj, get: obj => obj.cameraFar, set: (obj, value) => { obj.cameraFar = value; } }, metadata: _metadata }, _cameraFar_initializers, _cameraFar_extraInitializers);
__esDecorate(null, null, _perspective_decorators, { kind: "field", name: "perspective", static: false, private: false, access: { has: obj => "perspective" in obj, get: obj => obj.perspective, set: (obj, value) => { obj.perspective = value; } }, metadata: _metadata }, _perspective_initializers, _perspective_extraInitializers);
__esDecorate(null, null, _localClipping_decorators, { kind: "field", name: "localClipping", static: false, private: false, access: { has: obj => "localClipping" in obj, get: obj => obj.localClipping, set: (obj, value) => { obj.localClipping = value; } }, metadata: _metadata }, _localClipping_initializers, _localClipping_extraInitializers);
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
Scene = _classThis = _classDescriptor.value;
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
}
/**
* @property {true} isScene -
*
* *readonly*
*
* Always `true` for things that are or inherit from `Scene`.
*/
// TODO @readonly jsdoc tag
isScene = (__runInitializers(this, _instanceExtraInitializers), true);
// Skip ShadowRoot observation for Scene instances, and consider composed
// children to always be the Scene's direct children, not any in its
// ShadowRoot. Only a Scene's actual children or distributed children are
// considered to be in the LUME scene graph because Scene's ShadowRoot
// serves a specific purpose in the rendering implementation and is not the
// user's.
skipShadowObservation = this.isScene;
/**
* @property {boolean} enableCss -
*
* *attribute*
*
* Default: `true`
*
* When `true`, CSS transforms are applied
* to all LUME elements. This allows regular HTML content placed inside LUME
* elements to be positioned in the scene's 3D space. Set this to `false` if
* you will render only WebGL content and do not need to listen to
* pointer events on the elements; the elements will have the CSS property
* `display:none`. When rendering only WebGL content, leaving this enabled is useful for
* debugging, as the elements are placed in the same locations in 3D
* space as the WebGL graphics, and thus devtools will highlight the
* positions of WebGL objects on the screen when hovering on them in the element inspector.
*/
// TODO @attribute jsdoc tag
// TODO @default jsdoc tag
enableCss = __runInitializers(this, _enableCss_initializers, true
/**
* @property {boolean} webgl -
*
* *attribute*
*
* Default: `false`
*
* When `true`, enables WebGL rendering.
*/
);
/**
* @property {boolean} webgl -
*
* *attribute*
*
* Default: `false`
*
* When `true`, enables WebGL rendering.
*/
webgl = (__runInitializers(this, _enableCss_extraInitializers), __runInitializers(this, _webgl_initializers, false
/**
* @property {boolean} swapLayers -
*
* *attribute*
*
* Default: `false`
*
* This is only useful when both CSS and
* WebGL render modes are enabled. When `true`, the CSS layer will render on
* top of the WebGL layer instead of below.
*/
));
/**
* @property {boolean} swapLayers -
*
* *attribute*
*
* Default: `false`
*
* This is only useful when both CSS and
* WebGL render modes are enabled. When `true`, the CSS layer will render on
* top of the WebGL layer instead of below.
*/
swapLayers = (__runInitializers(this, _webgl_extraInitializers), __runInitializers(this, _swapLayers_initializers, false
/**
* @property {'basic' | 'pcf' | 'pcfsoft' | 'vsm'} shadowMode -
*
* *attribute*
*
* Default: `'basic'`
*
* Specifies the type of shadows to use. The value can be `'basic'`,
* `'pcf'`, `'pcfsoft'`, or `'vsm'`. See the "Shadow Types" section in
* Three.js [Renderer
* Constants](https://threejs.org/docs/#api/en/constants/Renderer) for
* descriptions.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {'basic' | 'pcf' | 'pcfsoft' | 'vsm'} shadowMode -
*
* *attribute*
*
* Default: `'basic'`
*
* Specifies the type of shadows to use. The value can be `'basic'`,
* `'pcf'`, `'pcfsoft'`, or `'vsm'`. See the "Shadow Types" section in
* Three.js [Renderer
* Constants](https://threejs.org/docs/#api/en/constants/Renderer) for
* descriptions.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
shadowMode = (__runInitializers(this, _swapLayers_extraInitializers), __runInitializers(this, _shadowMode_initializers, 'basic'
/**
* @deprecated
* @property {'basic' | 'pcf' | 'pcfsoft' | 'vsm'} shadowmapType - Deprecated, use [`shadowMode`](#shadowmaptype) instead.
*
* *attribute*
*/
));
/**
* @deprecated
* @property {'basic' | 'pcf' | 'pcfsoft' | 'vsm'} shadowmapType - Deprecated, use [`shadowMode`](#shadowmaptype) instead.
*
* *attribute*
*/
get shadowmapType() {
return this.shadowMode;
}
set shadowmapType(v) {
this.shadowMode = v;
}
/**
* @property {boolean} vr -
*
* *attribute*
*
* Default: `false`
*
* When `true`, enables VR capabilities. The user
* can click a button to enter VR mode.
*
* Applies only if [`webgl`](#webgl) is `true`. CSS content can not be natively
* rendered with the browser's WebXR. There exist some tricks to import CSS
* rendering in the form of an SVG image to use as a texture in WebGL and
* hence WebXR, but it has some limitations including low performance if
* animating CSS features; we may add this feature later.
*/
vr = (__runInitializers(this, _shadowMode_extraInitializers), __runInitializers(this, _vr_initializers, false
/**
* @property {Color | string | number | null} backgroundColor -
*
* *attribute*
*
* Default: `'white'`
*
* The color of the
* scene's background when WebGL rendering is enabled. If the
* [`background`](#background) property is also set, then `backgroundColor` is
* ignored. Make sure to set `backgroundOpacity` to a higher value than the
* default of `0` or the color won't be visible and instead only the color of
* whatever is behind the `<lume-scene>` will be visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {Color | string | number | null} backgroundColor -
*
* *attribute*
*
* Default: `'white'`
*
* The color of the
* scene's background when WebGL rendering is enabled. If the
* [`background`](#background) property is also set, then `backgroundColor` is
* ignored. Make sure to set `backgroundOpacity` to a higher value than the
* default of `0` or the color won't be visible and instead only the color of
* whatever is behind the `<lume-scene>` will be visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
backgroundColor = (__runInitializers(this, _vr_extraInitializers), __runInitializers(this, _backgroundColor_initializers, new Color('white')
/**
* @property {number} backgroundOpacity -
*
* *attribute*
*
* Default: `0`
*
* A number between `0` and `1` that
* defines the opacity (opposite of transparency) of the `backgroundColor`
* when WebGL is enabled. If the value is less than 1, it means that any DOM
* contend behind the `<lume-scene>` element will be visible. A value of `0`
* means the background is fully transparent. This is ignored if the
* [`background`](#background) property is set.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {number} backgroundOpacity -
*
* *attribute*
*
* Default: `0`
*
* A number between `0` and `1` that
* defines the opacity (opposite of transparency) of the `backgroundColor`
* when WebGL is enabled. If the value is less than 1, it means that any DOM
* contend behind the `<lume-scene>` element will be visible. A value of `0`
* means the background is fully transparent. This is ignored if the
* [`background`](#background) property is set.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
backgroundOpacity = (__runInitializers(this, _backgroundColor_extraInitializers), __runInitializers(this, _backgroundOpacity_initializers, 0
/**
* @property {string | null} background -
*
* *attribute*
*
* Default: `null`
*
* Set an image as the scene's
* background. If the image is an [equirectangular environment
* map](https://coeleveld.com/spherical-equirectangular-environment-textures-and-hdri), then set the value of
* [`equirectangularBackground`](#equirectangularbackground) to `true`, otherwise the image
* will be treated as a 2D background image. The value should be a path
* to a jpeg, jpg, or png. Other types not supported yet. This value
* takes priority over the [`backgroundColor`](#backgroundcolor) and
* [`backgroundOpacity`](#backgroundopacity) properties; those properties will be
* ignored. Any transparent parts of the image will be rendered
* as color white.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {string | null} background -
*
* *attribute*
*
* Default: `null`
*
* Set an image as the scene's
* background. If the image is an [equirectangular environment
* map](https://coeleveld.com/spherical-equirectangular-environment-textures-and-hdri), then set the value of
* [`equirectangularBackground`](#equirectangularbackground) to `true`, otherwise the image
* will be treated as a 2D background image. The value should be a path
* to a jpeg, jpg, or png. Other types not supported yet. This value
* takes priority over the [`backgroundColor`](#backgroundcolor) and
* [`backgroundOpacity`](#backgroundopacity) properties; those properties will be
* ignored. Any transparent parts of the image will be rendered
* as color white.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
background = (__runInitializers(this, _backgroundOpacity_extraInitializers), __runInitializers(this, _background_initializers, null
/**
* @property {number} 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.
*/
));
/**
* @property {number} 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.
*/
backgroundIntensity = (__runInitializers(this, _background_extraInitializers), __runInitializers(this, _backgroundIntensity_initializers, 1
/**
* @property {number} 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`.
*/
));
/**
* @property {number} 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`.
*/
backgroundBlur = (__runInitializers(this, _backgroundIntensity_extraInitializers), __runInitializers(this, _backgroundBlur_initializers, 0
/**
* @property {boolean} equirectangularBackground -
*
* *attribute*
*
* Default: `false`
*
* 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`.
*/
));
/**
* @property {boolean} equirectangularBackground -
*
* *attribute*
*
* Default: `false`
*
* 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`.
*/
equirectangularBackground = (__runInitializers(this, _backgroundBlur_extraInitializers), __runInitializers(this, _equirectangularBackground_initializers, false
/**
* @property {string | null} environment -
*
* *attribute*
*
* Default: `null`
*
* The environment can be a path to a
* jpeg, jpg, or png (other format not yet supported). It is assumed to
* be an equirectangular image used for env maps for things like
* reflections on metallic objects in the scene.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {string | null} environment -
*
* *attribute*
*
* Default: `null`
*
* The environment can be a path to a
* jpeg, jpg, or png (other format not yet supported). It is assumed to
* be an equirectangular image used for env maps for things like
* reflections on metallic objects in the scene.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
environment = (__runInitializers(this, _equirectangularBackground_extraInitializers), __runInitializers(this, _environment_initializers, null
/**
* @property {'none' | 'linear' | 'expo2'} fogMode -
*
* *attribute*
*
* Default: `'none'`
*
* The fog mode to render
* the scene with.
*
* A value of `'none'` means no fog.
*
* A value of `'linear'`
* makes a fog that gets reduces visibility of objects with distance from the camera.
* The `fogNear` and `fogFar` properties specify the distance from the camera when
* linear fog starts being applied to objects and when objects are fully invisible,
* respectively. Any objects before the near point will be fully visible, and any
* objects beyond the far point will be fully invisible.
*
* A value of `'expo2'` creates an exponential squared fog. Unlike linear fog, the near
* and far cannot be configured. Instead, expo2 fog is more realistic, and only it's
* overall "physical" density can be configured with the `fogDensity` property.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {'none' | 'linear' | 'expo2'} fogMode -
*
* *attribute*
*
* Default: `'none'`
*
* The fog mode to render
* the scene with.
*
* A value of `'none'` means no fog.
*
* A value of `'linear'`
* makes a fog that gets reduces visibility of objects with distance from the camera.
* The `fogNear` and `fogFar` properties specify the distance from the camera when
* linear fog starts being applied to objects and when objects are fully invisible,
* respectively. Any objects before the near point will be fully visible, and any
* objects beyond the far point will be fully invisible.
*
* A value of `'expo2'` creates an exponential squared fog. Unlike linear fog, the near
* and far cannot be configured. Instead, expo2 fog is more realistic, and only it's
* overall "physical" density can be configured with the `fogDensity` property.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
fogMode = (__runInitializers(this, _environment_extraInitializers), __runInitializers(this, _fogMode_initializers, 'none'
/**
* @property {number} fogNear -
*
* *attribute*
*
* Default: `0`
*
* When `fogMode` is `'linear'`, this controls
* the distance from the camera where fog starts to appear and objects start
* to be less visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {number} fogNear -
*
* *attribute*
*
* Default: `0`
*
* When `fogMode` is `'linear'`, this controls
* the distance from the camera where fog starts to appear and objects start
* to be less visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
fogNear = (__runInitializers(this, _fogMode_extraInitializers), __runInitializers(this, _fogNear_initializers, 0
/**
* @property {number} fogFar -
*
* *attribute*
*
* Default: `1000`
*
* When `fogMode` is `'linear'`, this controls
* the distance from the camera where fog reaches maximum density and
* objects are no longer visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {number} fogFar -
*
* *attribute*
*
* Default: `1000`
*
* When `fogMode` is `'linear'`, this controls
* the distance from the camera where fog reaches maximum density and
* objects are no longer visible.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
fogFar = (__runInitializers(this, _fogNear_extraInitializers), __runInitializers(this, _fogFar_initializers, 1000
/**
* @property {string} fogColor -
*
* *attribute*
*
* Default: `'gray'`
*
* If `fogMode` is not `'none'`, this
* configures the fog color. The value should be any valid CSS color string.
*
* You will want to change the value to match that of, or be similar to,
* your scene's `backgroundColor`.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {string} fogColor -
*
* *attribute*
*
* Default: `'gray'`
*
* If `fogMode` is not `'none'`, this
* configures the fog color. The value should be any valid CSS color string.
*
* You will want to change the value to match that of, or be similar to,
* your scene's `backgroundColor`.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
fogColor = (__runInitializers(this, _fogFar_extraInitializers), __runInitializers(this, _fogColor_initializers, 'gray'
/**
* @property {number} fogDensity -
*
* *attribute*
*
* Default: `0.0025`
*
* If `fogMode` is set to `'expo2'`, this
* configures the fog density.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
));
/**
* @property {number} fogDensity -
*
* *attribute*
*
* Default: `0.0025`
*
* If `fogMode` is set to `'expo2'`, this
* configures the fog density.
*
* Applies only if [`webgl`](#webgl) is `true`.
*/
fogDensity = (__runInitializers(this, _fogColor_extraInitializers), __runInitializers(this, _fogDensity_initializers, 0.0025
/**
* @deprecated This property/attribute will be removed when Three.js r165 is
* released (estimated), and physically correct lighting will become the
* default option for enhanced interoperability with other graphics engines
* (f.e. Blender). To be ready for the removal, set this to true, and
* adjust lighting (intensity values may need to be notably higher as they
* are now in candela units assuming world units are in meters) to achieve a
* similar effect as before.
*
* @property {boolean} physicallyCorrectLights -
*
* `attribute`
*
* Default: `false`
*
* Whether to use physically correct lighting mode or not. This affects only
* [`PointLight`](../lights/PointLight) <!-- and `SpotLight` --> elements
* <!-- ; `RectArea` lights do this automatically -->. See the [lights /
* physical example](https://threejs.org/examples/#webgl_lights_physical)
* from Three.js and "physicallyCorrectLights" in the Three.js manual's
* [Lights](https://threejs.org/manual/?q=lig#en/lights) doc.
*/
));
/**
* @deprecated This property/attribute will be removed when Three.js r165 is
* released (estimated), and physically correct lighting will become the
* default option for enhanced interoperability with other graphics engines
* (f.e. Blender). To be ready for the removal, set this to true, and
* adjust lighting (intensity values may need to be notably higher as they
* are now in candela units assuming world units are in meters) to achieve a
* similar effect as before.
*
* @property {boolean} physicallyCorrectLights -
*
* `attribute`
*
* Default: `false`
*
* Whether to use physically correct lighting mode or not. This affects only
* [`PointLight`](../lights/PointLight) <!-- and `SpotLight` --> elements
* <!-- ; `RectArea` lights do this automatically -->. See the [lights /
* physical example](https://threejs.org/examples/#webgl_lights_physical)
* from Three.js and "physicallyCorrectLights" in the Three.js manual's
* [Lights](https://threejs.org/manual/?q=lig#en/lights) doc.
*/
physicallyCorrectLights = (__runInitializers(this, _fogDensity_extraInitializers), __runInitializers(this, _physicallyCorrectLights_initializers, false
/**
* @property {number} cameraNear -
*
* *attribute*
*
* Default: `0.1`
*
* When not using a custom camera, this
* configures the distance from the default camera of a plane perpendicular
* to the camera's line of sight after which objects objects are visible. Anything between
* the plane and the camera will not be visible. This should be smaller than `cameraFar`. Also see `cameraFar`.
*
* Applies in both CSS and WebGL rendering. Note that the near and far
* values apply only to WebGL rendering and are otherwise infinitely small and
* infinitely big (respectively) when it comes to CSS rendering.
*/
));
/**
* @property {number} cameraNear -
*
* *attribute*
*
* Default: `0.1`
*
* When not using a custom camera, this
* configures the distance from the default camera of a plane perpendicular
* to the camera's line of sight after which objects objects are visible. Anything between
* the plane and the camera will not be visible. This should be smaller than `cameraFar`. Also see `cameraFar`.
*
* Applies in both CSS and WebGL rendering. Note that the near and far
* values apply only to WebGL rendering and are otherwise infinitely small and
* infinitely big (respectively) when it comes to CSS rendering.
*/
cameraNear = (__runInitializers(this, _physicallyCorrectLights_extraInitializers), __runInitializers(this, _cameraNear_initializers, 0.1
/**
* @property {number} cameraFar -
*
* *attribute*
*
* Default: `10000`
*
* When not using a custom camera, this
* configures the distance from the default camera of a plane perpendicular
* to the camera's line of sight before which objects are visible. Anything further than
* the plane will not be visible. This should be bigger than `cameraNear`. Also see `cameraNear`.
*
* Applies in both CSS and WebGL rendering. Note that the near and far
* values apply only to WebGL rendering and are otherwise infinitely small and
* infinitely big (respectively) when it comes to CSS rendering.
*/
));
/**
* @property {number} cameraFar -
*
* *attribute*
*
* Default: `10000`
*
* When not using a custom camera, this
* configures the distance from the default camera of a plane perpendicular
* to the camera's line of sight before which objects are visible. Anything further than
* the plane will not be visible. This should be bigger than `cameraNear`. Also see `cameraNear`.
*
* Applies in both CSS and WebGL rendering. Note that the near and far
* values apply only to WebGL rendering and are otherwise infinitely small and
* infinitely big (respectively) when it comes to CSS rendering.
*/
cameraFar = (__runInitializers(this, _cameraNear_extraInitializers), __runInitializers(this, _cameraFar_initializers, 10000
/**
* @property {number} perspective -
*
* *attribute*
*
* Default: `400`
*
* 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 `<lume-perspective-camera>`) 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 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 CSS pixel on the screen; essentially that plane would be lined
* up perfectly with the screen surface.
*
* Applies with both CSS and WebGL rendering.
*/
// TODO perhaps we want the perspective to also affect a custom camera's internal
// position relative to the element's local origin. We can do this by making the THREE
// camera a child of the element's .three object instead of it being the
// .three object directly.
));
/**
* @property {number} perspective -
*
* *attribute*
*
* Default: `400`
*
* 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 `<lume-perspective-camera>`) then this value
* affects only the camera's fov, unless we specify a