@realsee/dnalogel
Version:
137 lines (136 loc) • 6.83 kB
JavaScript
var C = Object.defineProperty, R = Object.defineProperties;
var F = Object.getOwnPropertyDescriptors;
var b = Object.getOwnPropertySymbols;
var D = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
var m = (r, t, e) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, p = (r, t) => {
for (var e in t || (t = {}))
D.call(t, e) && m(r, e, t[e]);
if (b)
for (var e of b(t))
S.call(t, e) && m(r, e, t[e]);
return r;
}, l = (r, t) => R(r, F(t));
var o = (r, t, e) => (m(r, typeof t != "symbol" ? t + "" : t, e), e);
import { CSS3DRender as x } from "./utils/three/CSS3DRender.js";
import O from "./utils/waitFiveModelLoaded.js";
import P from "./utils/generateBehindFiveElement.js";
import "hammerjs";
import "three";
import "@realsee/five";
import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
import { absoluteUrl as $ } from "../shared-utils/url/absoluteUrl.js";
import "../shared-utils/positionToVector3.js";
import "./utils/three/CSS3DRenderer.js";
import "three/examples/jsm/renderers/CSS3DRenderer";
import "./utils/getAllCSS3DObject.js";
import "../shared-utils/util.js";
import "./utils/createResizeObserver.js";
import "./utils/even.js";
import "../shared-utils/Subscribe.js";
import "./utils/three/CSS3DObject.js";
import "./utils/three/OpacityMesh.js";
import "../shared-utils/three/centerPoint.js";
import "../shared-utils/three/getObjectVisible.js";
import "./utils/three/CSS3DScene.js";
import "./utils/three/CSS3DGroup.js";
const E = "v2.0.1", h = `CSS3DRenderPlugin@${E}`;
class Y extends x {
constructor(e) {
super();
o(this, "five");
o(this, "behindFiveContainer");
o(this, "VERSION", E);
o(this, "staticPrefix", "//vr-image-4.realsee-cdn.cn");
/**
* @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
* @param { Vector3Position[] } points 矩形四个点坐标
* @param config 均为可选值
* @config_document `config` 均为可选值
* | key | type | defaultValue | comment |
* | - | - | - | - |
* | `ratio` | *`number`* | `0.00216` | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
* | ~~`dpr`~~ | ~~*`number`*~~ | ~~`undefined`~~ | ~~**已改名**，请使用~~ `devicePixelRatio` |
* | `devicePixelRatio` | *`number`* | `1` | 设备的物理像素分辨率与CSS像素分辨率的比值 |
* | `container` | *`HTMLElement`* | `undefined` | 自定义 return 中的 `container`
* | `pointerEvents` | *`'none'\|'auto'`* | `'none'` | container 的 css属性：`pointer-events` 的值 |
* | `autoRender` | *`boolean`* | `true` | 是否自动渲染，通常为true |
* | `mode` | *`'front'\|'behind'`* | `front` | 两种模式:|
* | | | | `front` 模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
* | | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
* | `behindFiveContainer` | *`HTMLElement`* | `undefined` | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
*
* @return
* ```typescript
* {
* id: string, // id
* container: HTMLDIVElement // dom容器
* dispose: () => void // 销毁
* css3DObject: CSS3DObject // THREE.CSS3DObject 实例
* render?: () => void // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
* setVisible: (visible: boolean) => void // 设置显隐, 同 setVisibleById(id, visible)
* show: () => void // 同 setVisible(true)
* hide: () => void // 同 setVisible(false)
* setEnabled: (enabled: boolean) => void // 添加/移除 container, 同 setEnabledById(id, enabled)
* enable: () => void // 同 setEnabled(true)
* disable: () => void // 同 setEnabled(false)
* } | void
* ```
*/
o(this, "create3DDomContainer", (e, i) => {
if (this.state.disposed)
return;
const s = (() => {
var f;
(i == null ? void 0 : i.dpr) !== void 0 && console.warn(`${h}: please use "config.devicePixelRatio" replace "config.dpr"`);
const d = {
ratio: 216e-5,
devicePixelRatio: (f = i == null ? void 0 : i.dpr) != null ? f : 1,
mode: "front",
autoRender: !0,
wrapperStyle: {}
};
return Object.assign(d, i, (i == null ? void 0 : i.mode) === "behind" ? { scene: this.five.scene } : void 0);
})(), a = this.five.getElement();
if (!a) {
console.error(`${h}: five.getElement() is ${a}`);
return;
}
const { autoRender: v } = s;
s.mode === "behind" && s.behindFiveContainer && (this.behindFiveContainer = s.behindFiveContainer);
const n = this.create3DElement(this.five.camera, e, l(p({}, s), { autoRender: !1 }));
if (!n)
return;
const u = () => {
const d = n.css3DObject.mode === "front" ? a.parentElement : this.getBehindFiveElement();
if (!d)
return console.error(`${h}: wrapper is ${d}`);
n.appendToElement(d), n.render();
}, c = () => {
n.css3DObject.mode === "front" && u(), n.css3DObject.mode === "behind" && O(this.five).then(() => u());
};
return v && c(), l(p({}, n), { render: v ? void 0 : c });
});
this.five = e;
}
/** @deprecated disposeAll() renamed as dispose() */
disposeAll() {
return this.dispose();
}
setState(...e) {
const i = super.setState(...e);
return this.five.needsRender = !0, i;
}
getBehindFiveElement() {
return this.behindFiveContainer ? this.behindFiveContainer : (this.behindFiveContainer = P(this.five), this.behindFiveContainer);
}
/**
* @description: 获取静态资源的url
*/
absoluteUrl(e) {
return $(this.staticPrefix, e);
}
}
export {
h as PLUGIN_NAME,
Y as default
};