@xviewer.js/core 1.0.0 → 1.0.1

package/dist/main.js

@@ -7,6 +7,7 @@ var DRACOLoader_js = require('three/examples/jsm/loaders/DRACOLoader.js');
 var meshopt_decoder_module_js = require('three/examples/jsm/libs/meshopt_decoder.module.js');
 var three = require('three');
 var RGBELoader_js = require('three/examples/jsm/loaders/RGBELoader.js');
+var Addons_js = require('three/examples/jsm/Addons.js');
 
 class EventEmitter {
     _removeEvent(list, index, name) {
@@ -918,10 +919,11 @@ class Tween {
             } else if (typeof end === 'object' && end) {
                 // eslint-disable-next-line
                 // @ts-ignore FIXME?
-                this._updateProperties(_object[property], start, end, value);
-                let des = Object.getOwnPropertyDescriptor(_object, property);
-                if (des && des.set) {
-                    _object[property] = _object[property];
+                let des = getPropertyDescriptor(_object, property);
+                if ((des == null ? void 0 : des.set) || (des == null ? void 0 : des.writable)) {
+                    _object[property] = this._updateProperties(_object[property], start, end, value);
+                } else {
+                    this._updateProperties(_object[property], start, end, value);
                 }
             } else {
                 // Parses relative end values with start as base (e.g.: +10, -3)
@@ -934,6 +936,7 @@ class Tween {
                 }
             }
         }
+        return _object;
     }
     _handleRelativeValue(start, end) {
         if (typeof end !== 'string') {
@@ -985,6 +988,14 @@ class Tween {
         this._goToEnd = false;
     }
 }
+function getPropertyDescriptor(obj, prop) {
+    while(obj){
+        let desc = Object.getOwnPropertyDescriptor(obj, prop);
+        if (desc) return desc;
+        obj = Object.getPrototypeOf(obj);
+    }
+    return undefined;
+}
 
 class TweenChain {
     start() {
@@ -1686,34 +1697,34 @@ class DeviceInput {
         return this._keys;
     }
     addEventListeners() {
-        const domElement = this.viewer.canvas;
-        domElement.style.touchAction = 'none';
-        this._addEventListener(domElement, 'contextmenu', (e)=>e.preventDefault());
-        this._addEventListener(domElement, "pointerdown", (e)=>this._onPointerDown(e), {
+        const { canvas } = this.viewer;
+        canvas.style.touchAction = 'none';
+        this._addEventListener(canvas, 'contextmenu', (e)=>e.preventDefault());
+        this._addEventListener(canvas, "pointerdown", (e)=>this._onPointerDown(e), {
             passive: false
         });
-        this._addEventListener(domElement, "pointerup", (e)=>this._onPointerUp(e), {
+        this._addEventListener(canvas, "pointerup", (e)=>this._onPointerUp(e), {
             passive: false
         });
-        this._addEventListener(domElement, "pointercancel", (e)=>this._onPointerUp(e), {
+        this._addEventListener(canvas, "pointercancel", (e)=>this._onPointerUp(e), {
             passive: false
         });
-        this._addEventListener(domElement, "pointerout", (e)=>this._onPointerUp(e), {
+        this._addEventListener(canvas, "pointerout", (e)=>this._onPointerUp(e), {
             passive: false
         });
-        this._addEventListener(domElement, "pointermove", (e)=>this._onPointerMove(e), {
+        this._addEventListener(canvas, "pointermove", (e)=>this._onPointerMove(e), {
             passive: true
         });
-        this._addEventListener(domElement, "wheel", (e)=>this._onMouseWheel(e), {
+        this._addEventListener(canvas, "wheel", (e)=>this._onMouseWheel(e), {
             passive: false
         });
-        this._addEventListener(domElement, "touchstart", (e)=>this._onTouchStart(e), {
+        this._addEventListener(canvas, "touchstart", (e)=>this._onTouchStart(e), {
             passive: true
         });
-        this._addEventListener(domElement, "touchend", (e)=>this._onTouchEnd(e), {
+        this._addEventListener(canvas, "touchend", (e)=>this._onTouchEnd(e), {
             passive: true
         });
-        this._addEventListener(domElement, "touchmove", (e)=>this._onTouchMove(e), {
+        this._addEventListener(canvas, "touchmove", (e)=>this._onTouchMove(e), {
             passive: true
         });
         //监听了pointer事件之后，key事件失效，改成window解决
@@ -1726,6 +1737,9 @@ class DeviceInput {
         this._addEventListener(window, "keyup", (e)=>this._onKeyUp(e), {
             passive: false
         });
+        this._addEventListener(window, "resize", (e)=>this._onResize(e), {
+            passive: false
+        });
     }
     removeAllListeners() {
         for (let { target, type, callback } of this._listeners){
@@ -1757,6 +1771,10 @@ class DeviceInput {
             callback
         });
     }
+    _onResize(e) {
+        this.viewer.rotate();
+        this.viewer.resize();
+    }
     _remapPointer(e) {
         const width = this.viewer.width;
         return this.viewer.rootRotated ? {
@@ -2158,19 +2176,21 @@ const Vector3_NEG_ONE = Object.freeze(new three.Vector3(-1, -1, -1));
 const { clamp: clamp$2 } = three.MathUtils;
 const { max, abs: abs$1, acos } = Math;
 const EPSILON = 1.e-6;
-const __delta = new three.Vector3();
-function VInterpTo(current, target, deltaTime, speed, out = current) {
+const __deltaMap = new Map();
+__deltaMap.set(three.Vector3, new three.Vector3());
+__deltaMap.set(three.Vector2, new three.Vector2());
+function VInterpTo(current, target, deltaTime, speed, out = current, epsilon = EPSILON) {
     if (speed <= 0) {
         return out.copy(target);
     }
-    let dist = __delta.copy(target).sub(current);
-    if (dist.lengthSq() < EPSILON) {
+    let dist = __deltaMap.get(current.constructor).copy(target).sub(current);
+    if (dist.lengthSq() < epsilon) {
         return out.copy(target);
     }
     return out.copy(current).add(dist.multiplyScalar(clamp$2(deltaTime * speed, 0, 1)));
 }
 function VInterpConstantTo(current, target, deltaTime, speed, out = current) {
-    let delta = __delta.copy(target).sub(current);
+    let delta = __deltaMap.get(current.constructor).copy(target).sub(current);
     let deltaM = delta.length();
     let maxStep = speed * deltaTime;
     if (deltaM > maxStep) {
@@ -2190,11 +2210,11 @@ function Quat_AngularDistance(a, b) {
     let innerProd = a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w;
     return acos(2 * innerProd * innerProd - 1);
 }
-function QInterpTo(current, target, deltaTime, speed) {
+function QInterpTo(current, target, deltaTime, speed, epsilon = EPSILON) {
     if (speed <= 0) {
         return target;
     }
-    if (Quat_Equals(current, target)) {
+    if (Quat_Equals(current, target, epsilon)) {
         return target;
     }
     return current.slerp(target, clamp$2(speed * deltaTime, 0, 1));
@@ -2211,20 +2231,20 @@ function QInterpConstantTo(current, target, deltaTime, speed, out = current) {
     return out.copy(current).slerp(target, clamp$2(deltaSpeed / angularDist, 0, 1));
 }
 //非线性
-function FInterpTo(current, target, deltaTime, speed) {
+function FInterpTo(current, target, deltaTime, speed, epsilon = EPSILON) {
     if (speed <= 0) {
         return target;
     }
     let dist = target - current;
-    if (abs$1(dist) < EPSILON) {
+    if (abs$1(dist) < epsilon) {
         return target;
     }
     return current + dist * clamp$2(speed * deltaTime, 0, 1);
 }
 //线性插值
-function FInterpConstantTo(current, target, deltaTime, speed) {
+function FInterpConstantTo(current, target, deltaTime, speed, epsilon = EPSILON) {
     let dist = target - current;
-    if (abs$1(dist) < EPSILON) {
+    if (abs$1(dist) < epsilon) {
         return target;
     }
     let step = speed * deltaTime;
@@ -2672,6 +2692,7 @@ Perlin._Permutation = [
 
 const { clamp, degToRad } = three.MathUtils;
 const { abs, tan, PI } = Math;
+const PI2 = PI * 2;
 const ESP = 0.001;
 class FreelookVirtualCamera extends VirtualCamera {
     get lookAt() {
@@ -2681,6 +2702,13 @@ class FreelookVirtualCamera extends VirtualCamera {
         this._lookAt.copy(v);
         this._targetLookAt.copy(v);
     }
+    get offset() {
+        return this._offset;
+    }
+    set offset(v) {
+        this._offset.copy(v);
+        this._targetOffset.copy(v);
+    }
     get springLength() {
         return this._spherical.radius;
     }
@@ -2802,8 +2830,7 @@ class FreelookVirtualCamera extends VirtualCamera {
     }
     _calculateRotatelDelta(out, loc0, loc1) {
         this._tempRotateSmoothing = this.rotateSmoothing;
-        const domElement = this.viewer.canvas;
-        out.copy(loc1).sub(loc0).multiplyScalar(this.rotateSpeed * 2 * Math.PI / domElement.clientHeight);
+        out.copy(loc1).sub(loc0).multiplyScalar(this.rotateSpeed * 2 * Math.PI / this.viewer.height);
         out.y = -out.y;
         if (this.forbidX) {
             out.x = 0;
@@ -2815,8 +2842,7 @@ class FreelookVirtualCamera extends VirtualCamera {
     }
     _calculatePanDelta(out, loc0, loc1) {
         this._tempRotateSmoothing = this.rotateSmoothing;
-        const domElement = this.viewer.canvas;
-        out.copy(loc1).sub(loc0).multiplyScalar(this.panSpeed / domElement.clientHeight);
+        out.copy(loc1).sub(loc0).multiplyScalar(this.panSpeed / this.viewer.height);
         if (this.forbidPanX) {
             out.x = 0;
         }
@@ -2825,7 +2851,7 @@ class FreelookVirtualCamera extends VirtualCamera {
         }
         return out;
     }
-    _setTargetLookAt(panDelta) {
+    _calculateLookAtOffset(panDelta, out = new three.Vector3()) {
         const { __xAxis, __yAxis, __posDelta } = FreelookVirtualCamera;
         __xAxis.setFromMatrixColumn(this.node.matrix, 0);
         __yAxis.setFromMatrixColumn(this.node.matrix, 1);
@@ -2835,7 +2861,11 @@ class FreelookVirtualCamera extends VirtualCamera {
         }
         __posDelta.copy(this.node.position).sub(this.lookAt);
         const length = __posDelta.length() * 2 * tan(degToRad(this.fov * 0.5));
-        this._targetLookAt.sub(__xAxis.multiplyScalar(panDelta.x * length)).add(__yAxis.multiplyScalar(panDelta.y * length));
+        return out.set(0, 0, 0).sub(__xAxis.multiplyScalar(panDelta.x * length)).add(__yAxis.multiplyScalar(panDelta.y * length));
+    }
+    _setTargetLookAt(panDelta) {
+        const { __lookAtOffset } = FreelookVirtualCamera;
+        this._targetLookAt.add(this._calculateLookAtOffset(panDelta, __lookAtOffset));
     }
     _setTargetRotation(rotateDelta) {
         this._targetTheta -= rotateDelta.x;
@@ -2846,11 +2876,15 @@ class FreelookVirtualCamera extends VirtualCamera {
     _setTargetSpringLength(radius) {
         this._targetSpringLength = clamp(radius, this.distanceMin, this.distanceMax);
     }
-    goto({ springLength = this._targetSpringLength, theta = this._targetTheta, phi = this._targetPhi, lookAt = this._lookAt, fov = this.lens.fov, smoothing = this.smoothing, rotateSmoothing = this.smoothing }) {
-        this._targetSpringLength = clamp(springLength, this.distanceMin, this.distanceMax);
-        this._targetTheta = clamp(theta, this.thetaMin, this.thetaMax);
+    goto({ springLength = this._targetSpringLength, theta = this._targetTheta, phi = this._targetPhi, lookAt = this._lookAt, offset = this._targetOffset, fov = this.lens.fov, smoothing = this.smoothing, rotateSmoothing = this.smoothing }) {
+        const t0 = this._spherical.theta = this._spherical.theta % PI2;
+        const t1 = theta % PI2;
+        const delta = three.MathUtils.euclideanModulo(t1 - t0 + Math.PI, PI2) - Math.PI;
+        this._targetTheta = clamp(t0 + delta, this.thetaMin, this.thetaMax);
         this._targetPhi = clamp(phi, this.phiMin, this.phiMax);
+        this._targetSpringLength = clamp(springLength, this.distanceMin, this.distanceMax);
         this._targetLookAt.copy(lookAt);
+        this._targetOffset.copy(offset);
         this._targetFov = fov;
         this._tempSmoothing = smoothing;
         this._tempRotateSmoothing = rotateSmoothing;
@@ -2863,8 +2897,10 @@ class FreelookVirtualCamera extends VirtualCamera {
         this._spherical.radius = FInterpTo(this._spherical.radius, this._targetSpringLength, dt, smoothing);
         this.lens.fov = FInterpTo(this.lens.fov, this._targetFov, dt, smoothing);
         VInterpTo(this._lookAt, this._targetLookAt, dt, smoothing);
-        this.node.position.setFromSpherical(this._spherical).add(this._lookAt);
-        this.node.lookAt(this._lookAt);
+        VInterpTo(this._offset, this._targetOffset, dt, smoothing);
+        this._calculateLookAtOffset(this._offset, this._finalLookAt).add(this._lookAt);
+        this.node.position.setFromSpherical(this._spherical).add(this._finalLookAt);
+        this.node.lookAt(this._finalLookAt);
     }
     constructor(...args){
         super(...args);
@@ -2874,6 +2910,7 @@ class FreelookVirtualCamera extends VirtualCamera {
         this._preLoc1 = new three.Vector2();
         this._spherical = new three.Spherical(4, Math.PI / 2);
         this._lookAt = new three.Vector3();
+        this._offset = new three.Vector2();
         this._tempSmoothing = 6;
         this._tempRotateSmoothing = 8;
         this._targetTheta = 0;
@@ -2881,6 +2918,7 @@ class FreelookVirtualCamera extends VirtualCamera {
         this._targetSpringLength = 4;
         this._targetFov = this.fov;
         this._targetLookAt = new three.Vector3();
+        this._targetOffset = new three.Vector2();
         this.forbidX = false;
         this.forbidY = false;
         this.forbidZ = false;
@@ -2897,6 +2935,7 @@ class FreelookVirtualCamera extends VirtualCamera {
         this.thetaMax = Infinity;
         this.distanceMin = ESP;
         this.distanceMax = Infinity;
+        this._finalLookAt = new three.Vector3();
     }
 }
 FreelookVirtualCamera.__loc0 = new three.Vector2();
@@ -2907,6 +2946,7 @@ FreelookVirtualCamera.__panDelta = new three.Vector2();
 FreelookVirtualCamera.__panTarget = new three.Vector2();
 FreelookVirtualCamera.__rotateDelta = new three.Vector2();
 FreelookVirtualCamera.__posDelta = new three.Vector3();
+FreelookVirtualCamera.__lookAtOffset = new three.Vector3();
 FreelookVirtualCamera.__xAxis = new three.Vector3();
 FreelookVirtualCamera.__yAxis = new three.Vector3();
 FreelookVirtualCamera.__quat = new three.Quaternion();
@@ -3001,10 +3041,11 @@ __decorate([
     })
 ], FreelookVirtualCamera.prototype, "distanceMax", void 0);
 __decorate([
-    property({
-        step: 0.01
-    })
+    property
 ], FreelookVirtualCamera.prototype, "lookAt", null);
+__decorate([
+    property
+], FreelookVirtualCamera.prototype, "offset", null);
 __decorate([
     property({
         step: 0.01
@@ -3216,6 +3257,186 @@ class Animation extends Component {
     }
 }
 
+function applyProps(target, props) {
+    for(let k in props){
+        let prop = props[k];
+        if (prop === undefined) {
+            continue;
+        }
+        if (target[k] !== undefined) {
+            let des = Object.getOwnPropertyDescriptor(target, k);
+            if (!des || des.writable || des.set) {
+                target[k] = prop;
+            } else {
+                let value = target[k];
+                if (value && value.copy) {
+                    value.copy(prop);
+                }
+            }
+        }
+    }
+    return target;
+}
+function find(node, path) {
+    let child = null;
+    let parts = path.split("/");
+    let children = node.children;
+    for (let part of parts){
+        child = children.find((v)=>v.name === part);
+        if (child) {
+            children = child.children;
+        } else {
+            return null;
+        }
+    }
+    return child;
+}
+function getChildren(node, filter, group = false) {
+    const queue = [
+        node
+    ];
+    const objects = [];
+    while(queue.length !== 0){
+        let object = queue.shift();
+        let target = filter(object);
+        if (target) {
+            objects.push(object);
+            if (!group) {
+                break;
+            }
+        }
+        object.children.forEach((v)=>queue.push(v));
+    }
+    if (group) {
+        return objects;
+    }
+    return objects[0];
+}
+function getChildByName(node, name) {
+    return getChildren(node, (v)=>v && v.name === name);
+}
+const __emtpyObject = {};
+function queryValues(object, name, group = false) {
+    if (name) {
+        if (group) {
+            return Object.values(object || __emtpyObject).filter((v)=>v.name === name);
+        }
+        return Object.values(object || __emtpyObject).find((v)=>v.name === name);
+    }
+    return Object.values(object);
+}
+
+class ContactShadows extends Component {
+    get visible() {
+        return this.node.visible;
+    }
+    set visible(v) {
+        this.node.visible = v;
+    }
+    constructor({ scale = 10, frames = Infinity, width = 1, height = 1, intensity = 1, blur = 1, near = 0, far = 10, resolution = 512, smooth = true, color = new three.Color(0x0), renderOrder = 0, layerMask = 1 << 0, ...props } = {}){
+        super();
+        this.layerMask = 1 << 0;
+        this.color = new three.Color();
+        this.blur = 1;
+        this.blur = blur;
+        this.layerMask = layerMask;
+        this.color.copy(color);
+        width = width * scale;
+        height = height * scale;
+        const planeGeometry = new three.PlaneGeometry(width, height);
+        const shadowCamera = new three.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, near, far);
+        const renderTarget = new three.WebGLRenderTarget(resolution, resolution);
+        const renderTargetBlur = new three.WebGLRenderTarget(resolution, resolution);
+        renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false;
+        const depthMaterial = new three.MeshDepthMaterial();
+        depthMaterial.depthTest = depthMaterial.depthWrite = false;
+        depthMaterial.onBeforeCompile = (shader)=>{
+            shader.uniforms = {
+                ...shader.uniforms,
+                color: {
+                    value: this.color
+                }
+            };
+            shader.fragmentShader = shader.fragmentShader.replace(`void main() {`, `uniform vec3  color;
+                 uniform float intensity;
+                 void main() {
+                `);
+            shader.fragmentShader = shader.fragmentShader.replace('vec4( vec3( 1.0 - fragCoordZ ), opacity );', // Colorize the shadow, multiply by the falloff so that the center can remain darker
+            'vec4( color * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );');
+        };
+        const horizontalBlurMaterial = new three.ShaderMaterial(Addons_js.HorizontalBlurShader);
+        const verticalBlurMaterial = new three.ShaderMaterial(Addons_js.VerticalBlurShader);
+        verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false;
+        const blurPlane = new three.Mesh(planeGeometry);
+        this.node = applyProps(new three.Group(), {
+            rotation: new three.Euler(Math.PI / 2, 0, 0),
+            ...props
+        });
+        this.node.add(shadowCamera);
+        this.node.add(blurPlane);
+        const textureMatrix = new three.Matrix4();
+        const blurShadows = (gl, blur)=>{
+            blurPlane.visible = true;
+            blurPlane.material = horizontalBlurMaterial;
+            horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture;
+            horizontalBlurMaterial.uniforms.h.value = blur * 1 / 256;
+            gl.setRenderTarget(renderTargetBlur);
+            gl.render(blurPlane, shadowCamera);
+            blurPlane.material = verticalBlurMaterial;
+            verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture;
+            verticalBlurMaterial.uniforms.v.value = blur * 1 / 256;
+            gl.setRenderTarget(renderTarget);
+            gl.render(blurPlane, shadowCamera);
+            blurPlane.visible = false;
+        };
+        let count = 0;
+        let initialBackground;
+        let initialOverrideMaterial;
+        let initialClearAlpha;
+        this.update = ()=>{
+            shadowCamera.layers.mask = blurPlane.layers.mask = this.layerMask;
+            if (frames === Infinity || count < frames) {
+                count++;
+                const { scene, renderer: gl } = this.viewer;
+                initialBackground = scene.background;
+                initialOverrideMaterial = scene.overrideMaterial;
+                this.node.visible = false;
+                scene.background = null;
+                scene.overrideMaterial = depthMaterial;
+                textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+                textureMatrix.multiply(shadowCamera.projectionMatrix);
+                textureMatrix.multiply(shadowCamera.matrixWorldInverse);
+                initialClearAlpha = gl.getClearAlpha();
+                gl.setClearAlpha(0);
+                gl.setRenderTarget(renderTarget);
+                gl.render(scene, shadowCamera);
+                blurShadows(gl, this.blur);
+                if (smooth) blurShadows(gl, this.blur * 0.4);
+                gl.setRenderTarget(null);
+                gl.setClearAlpha(initialClearAlpha);
+                this.node.visible = true;
+                scene.overrideMaterial = initialOverrideMaterial;
+                scene.background = initialBackground;
+            }
+        };
+        this.onDestroy = ()=>renderTarget.dispose();
+        this.getRenderTarget = ()=>renderTarget;
+        this.getTextureMatrix = ()=>textureMatrix;
+    }
+}
+__decorate([
+    property
+], ContactShadows.prototype, "visible", null);
+__decorate([
+    property
+], ContactShadows.prototype, "color", void 0);
+__decorate([
+    property({
+        min: 0,
+        max: 15
+    })
+], ContactShadows.prototype, "blur", void 0);
+
 const vert_fullscreen = /*glsl*/ `
 varying vec2 vUv;
 void main() {
@@ -3572,7 +3793,6 @@ class ReflectorMaterial extends three.ShaderMaterial {
     set lightMapIntensity(v) {
         this.uniforms.lightMapIntensity.value = v;
     }
-    // @property
     get reflectMap() {
         return this.uniforms.reflectMap.value;
     }
@@ -3688,6 +3908,9 @@ __decorate([
         parent: "lightMap"
     })
 ], ReflectorMaterial.prototype, "lightMapIntensity", null);
+__decorate([
+    property()
+], ReflectorMaterial.prototype, "reflectMap", null);
 __decorate([
     property({
         min: 0,
@@ -3697,6 +3920,72 @@ __decorate([
     })
 ], ReflectorMaterial.prototype, "reflectIntensity", null);
 
+const vert_Shadow = `
+varying vec4 v_shadows;
+uniform mat4 shadowsMatrix;
+
+void main() {
+    vec4 worldPos = modelMatrix * vec4(position, 1.);
+    vec4 mvPosition = viewMatrix * worldPos;
+    
+    gl_Position = projectionMatrix * mvPosition;
+
+    v_shadows = shadowsMatrix * worldPos;
+}
+`;
+const frag_Shadow = `
+uniform vec3      color;
+uniform float     opacity;
+
+varying vec4      v_shadows;
+uniform sampler2D shadowsMap;
+uniform float     shadowsIntensity;
+
+void main() {
+    vec4 shadows = texture2DProj(shadowsMap, v_shadows);
+    gl_FragColor = vec4(color * shadows.rgb, shadows.a * opacity);
+
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+}
+`;
+class ShadowMaterial extends three.ShaderMaterial {
+    get color() {
+        return this.uniforms.color.value;
+    }
+    set color(v) {
+        this.uniforms.color.value.copy(v);
+    }
+    constructor({ shadows, ...props }){
+        super();
+        this.vertexShader = vert_Shadow;
+        this.fragmentShader = frag_Shadow;
+        this.uniforms = {
+            color: {
+                value: new three.Color()
+            },
+            opacity: {
+                value: 1
+            },
+            shadowsMap: {
+                value: null
+            },
+            shadowsMatrix: {
+                value: new three.Matrix4()
+            }
+        };
+        Object.defineProperty(this, "opacity", {
+            get: ()=>this.uniforms.opacity.value,
+            set: (v)=>this.uniforms.opacity.value = v
+        });
+        this.uniforms.shadowsMap.value = shadows.getRenderTarget().texture;
+        this.uniforms.shadowsMatrix.value = shadows.getTextureMatrix();
+        this.transparent = true;
+        this.depthWrite = false;
+        this.setValues(props);
+    }
+}
+
 const LOD_MIN = 4;
 const _flatCamera = /*@__PURE__*/ new three.OrthographicCamera();
 // Golden Ratio
@@ -4479,75 +4768,6 @@ ResourceManager._texSettingKeys = [
     "channel"
 ];
 
-function applyProps(target, props) {
-    for(let k in props){
-        let prop = props[k];
-        if (prop === undefined) {
-            continue;
-        }
-        if (target[k] !== undefined) {
-            let des = Object.getOwnPropertyDescriptor(target, k);
-            if (!des || des.writable || des.set) {
-                target[k] = prop;
-            } else {
-                let value = target[k];
-                if (value && value.copy) {
-                    value.copy(prop);
-                }
-            }
-        }
-    }
-    return target;
-}
-function find(node, path) {
-    let child = null;
-    let parts = path.split("/");
-    let children = node.children;
-    for (let part of parts){
-        child = children.find((v)=>v.name === part);
-        if (child) {
-            children = child.children;
-        } else {
-            return null;
-        }
-    }
-    return child;
-}
-function getChidren(node, filter, group = false) {
-    const queue = [
-        node
-    ];
-    const objects = [];
-    while(queue.length !== 0){
-        let object = queue.shift();
-        let target = filter(object);
-        if (target) {
-            objects.push(object);
-            if (!group) {
-                break;
-            }
-        }
-        object.children.forEach((v)=>queue.push(v));
-    }
-    if (group) {
-        return objects;
-    }
-    return objects[0];
-}
-function getChildByName(node, name) {
-    return getChidren(node, (v)=>v && v.name === name);
-}
-const __emtpyObject = {};
-function queryValues(object, name, group = false) {
-    if (name) {
-        if (group) {
-            return Object.values(object || __emtpyObject).filter((v)=>v.name === name);
-        }
-        return Object.values(object || __emtpyObject).find((v)=>v.name === name);
-    }
-    return Object.values(object);
-}
-
 class Viewer extends EventEmitter {
     static _setDirectLightShadow(shadow, props) {
         const shadowCamera = shadow.camera;
@@ -4611,6 +4831,9 @@ class Viewer extends EventEmitter {
     get root() {
         return this._root;
     }
+    get container() {
+        return this._container;
+    }
     get time() {
         return this._time;
     }
@@ -4703,7 +4926,6 @@ class Viewer extends EventEmitter {
         }
     }
     loop(dt) {
-        if (this._autoResize) this.resize();
         dt = Math.min(dt, 0.067);
         this.update(dt);
         this.render(dt);
@@ -4741,59 +4963,75 @@ class Viewer extends EventEmitter {
         this._time = this._lastTime = 0;
         return this;
     }
-    resize(width = window.innerWidth, height = window.innerHeight) {
-        this._rootRotated = this._orientation === exports.Orientation.LANDSCAPE ? width < height : this._orientation === exports.Orientation.PORTRAIT ? width > height : false;
+    rotate() {
+        let width = window.innerWidth;
+        let height = window.innerHeight;
+        if (this._orientation === exports.Orientation.LANDSCAPE) {
+            this._rootRotated = width < height;
+        } else if (this._orientation === exports.Orientation.PORTRAIT) {
+            this._rootRotated = width > height;
+        } else {
+            return;
+        }
         if (this._rootRotated) {
             let tmp = width;
             width = height;
             height = tmp;
         }
-        if (this._width !== width || this._height !== height) {
-            this._width = width;
-            this._height = height;
-            let root = this._root;
-            if (this._rootRotated) {
-                root.style['-webkit-transform'] = 'rotate(90deg)';
-                root.style.transform = 'rotate(90deg)';
-                root.style['-webkit-transform-origin'] = '0px 0px 0px';
-                root.style.transformOrigin = '0px 0px 0px';
-                root.style.margin = `0 0 0 ${height}px`;
-                root.style.width = `${width}px`;
-                root.style.height = `${height}px`;
-            } else {
-                root.style['-webkit-transform'] = 'rotate(0deg)';
-                root.style.transform = 'rotate(0deg)';
-                root.style.margin = '0px auto';
-                root.style.width = `${width}px`;
-                root.style.height = `${height}px`;
-            }
-            let camera = this._camera;
-            if (camera.isOrthographicCamera) {
-                this._viewport = {
-                    width: width / camera.zoom,
-                    height: height / camera.zoom,
-                    factor: 1
-                };
-            } else if (camera.isPerspectiveCamera) {
-                if (!camera.manual) {
-                    camera.aspect = width / height;
-                    camera.updateProjectionMatrix();
-                }
-                let distance = camera.getWorldPosition(Viewer.__worldPos).distanceTo(Viewer.__target);
-                let h = 2 * Math.tan(three.MathUtils.degToRad(camera.fov * 0.5)) * distance;
-                let w = h * width / height;
-                this._viewport = {
-                    width: w,
-                    height: h,
-                    factor: width / w
-                };
+        const root = this._root;
+        if (this._rootRotated) {
+            root.style['-webkit-transform'] = 'rotate(90deg)';
+            root.style.transform = 'rotate(90deg)';
+            root.style['-webkit-transform-origin'] = '0px 0px 0px';
+            root.style.transformOrigin = '0px 0px 0px';
+            root.style.margin = `0 0 0 ${height}px`;
+            root.style.width = `${width}px`;
+            root.style.height = `${height}px`;
+        } else {
+            root.style['-webkit-transform'] = 'rotate(0deg)';
+            root.style.transform = 'rotate(0deg)';
+            root.style.margin = '0px auto';
+            root.style.width = `${width}px`;
+            root.style.height = `${height}px`;
+        }
+    }
+    resize(width = this._container.offsetWidth, height = this._container.offsetHeight) {
+        if (!this._autoResize) {
+            return;
+        }
+        if (this._rootRotated) {
+            let tmp = width;
+            width = height;
+            height = tmp;
+        }
+        this._width = width;
+        this._height = height;
+        let camera = this._camera;
+        if (camera.isOrthographicCamera) {
+            this._viewport = {
+                width: width / camera.zoom,
+                height: height / camera.zoom,
+                factor: 1
+            };
+        } else if (camera.isPerspectiveCamera) {
+            if (!camera.manual) {
+                camera.aspect = width / height;
+                camera.updateProjectionMatrix();
             }
-            this._resizing(width, height);
-            this._componentManager.resize(width, height);
+            let distance = camera.getWorldPosition(Viewer.__worldPos).distanceTo(Viewer.__target);
+            let h = 2 * Math.tan(three.MathUtils.degToRad(camera.fov * 0.5)) * distance;
+            let w = h * width / height;
+            this._viewport = {
+                width: w,
+                height: h,
+                factor: width / w
+            };
         }
+        this._resizing(width, height);
+        this._componentManager.resize(width, height);
     }
     loadAsset(props) {
-        return this._resourceManager.loadAsset(Object.assign(Object.assign({}, this._defaultProps), props));
+        return this._resourceManager.loadAsset(Object.assign({}, this._defaultProps, props));
     }
     getLoader(ext) {
         return this._resourceManager.getLoader(ext);
@@ -4956,7 +5194,7 @@ class Viewer extends EventEmitter {
             Viewer.CompileObject3D(this._renderer, this._scene, this._camera, this._scene);
         }
     }
-    constructor({ root, canvas, autoStart = true, autoResize = true, shadows = false, camera = {
+    constructor({ root, canvas, container, autoStart = true, autoResize = true, shadows = false, camera = {
         fov: 45,
         near: 0.1,
         far: 1000,
@@ -4990,6 +5228,7 @@ class Viewer extends EventEmitter {
         }
         this._root = root || el;
         this._canvas = el;
+        this._container = container || el.parentElement;
         this._gl = webgl.gl;
         this._RENDER_TARGET_FLOAT_TYPE = webgl.RENDER_TARGET_FLOAT_TYPE;
         this._DATA_FLOAT_TYPE = webgl.DATA_FLOAT_TYPE;
@@ -5024,7 +5263,10 @@ class Viewer extends EventEmitter {
         this._input = new DeviceInput(this);
         this._input.addEventListeners();
         this._addDefaultLoaders();
-        if (autoStart) this.start();
+        if (autoStart) {
+            this.start();
+        }
+        this.rotate();
         this.resize();
     }
 }
@@ -5708,6 +5950,7 @@ exports.BoxProjection = BoxProjection;
 exports.CinestationBlendDefinition = CinestationBlendDefinition;
 exports.CinestationBrain = CinestationBrain;
 exports.Component = Component;
+exports.ContactShadows = ContactShadows;
 exports.DeviceInput = DeviceInput;
 exports.DropFile = DropFile;
 exports.Easing = Easing;
@@ -5733,6 +5976,7 @@ exports.Quat_smoothDamp = Quat_smoothDamp;
 exports.Reflector = Reflector;
 exports.ReflectorMaterial = ReflectorMaterial;
 exports.ResourceManager = ResourceManager;
+exports.ShadowMaterial = ShadowMaterial;
 exports.Sphere = Sphere;
 exports.SystemInfo = SystemInfo;
 exports.Tween = Tween;
@@ -5766,8 +6010,8 @@ exports.find = find;
 exports.frag_BoxfilterBlur = frag_BoxfilterBlur;
 exports.frag_cubeMapToPanorama = frag_cubeMapToPanorama;
 exports.frag_panoramaToCubeMap = frag_panoramaToCubeMap;
-exports.getChidren = getChidren;
 exports.getChildByName = getChildByName;
+exports.getChildren = getChildren;
 exports.getClassInstance = getClassInstance;
 exports.getShaderMaterial = getShaderMaterial;
 exports.mixin = mixin;