@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# CHANGELOG
+
+## 2.0.0-alpha.11
+- 1.fix: 修复 ModelRoomLabelPlugin 未监听多楼层切换 rerender 问题。
+- 2.feat: ModelFloorplanPlugin & TopviewFloorplanPlugin 新增 `northDesc?: string` 配置项，支持用户修改指北针名称。
+
+## 2.0.0-alpha.10
+- 1.feat: 新增空间三维标签插件 PanoSpatialTagPlugin
+- 2.feat: 新增轻量 ejs 渲染模板函数 shared-utils/tinyEJSrender.js
+
+## 2.0.0-alpha.9
+- 1.refactor: 增加插件独立 js 输出及对 svelte 的编译。
+
+## 2.0.0-alpha.8
+- 1.fix: 修复 ModelViewPlugin 实景 VR 模型不居中问题；
+- 2.fix: 修复 ModelRoomLabelPlugin fov 更新未 rerender 问题；
+- 2.fix: 修复 ModelRoomLabelPlugin enable 判断问题；
+- 4.fix: 修改 ModelFloorplanPlugin 在全景态满足户型图的俯仰角时会自动切换户型图问题。
+
+## 2.0.0-alpha.7
+- 1.fix: PanoCompassPlugin 向下兼容；
+- 2.feat: 新增 PC 全景测量插件：PanoMeasurePlugin；
+- 3.docs: 修改 README.md；
+
+## 2.0.0-alpha.6
+- 1.fix: 标尺插件 PanoRulerPlugin 所有标尺仅展示一次问题；
+- 2.fix: TopviewFloorplanPlugin && ModelFloorplanPlugin 插件小雷达位置显示不正确问题；
+- 3.feat: 为 TopviewFloorplanPlugin && ModelFloorplanPlugin 插件新增线框图吸附位置配置选项。 
+  - 可选地板、天花板、模型中心，默认吸附选项为模型中心。
+
+## 2.0.0-alpha.5
+1.修复全景指南针插件 PanoCompassPlugin 默认导出 name
+
+## 2.0.0-alpha.4
+1.新增全景标尺插件 PanoRulerPlugin
+
+## 2.0.0-alpha.3
+1.新增全景指南针插件 PanoCompassPlugin

package/README.md

@@ -1,68 +1,37 @@
+# 注意
+2.x 版本依赖 `svelte`， 使用时请同时安装 
+```bash
+npm install svelte 
+```
+
 # 如视 -- "Dnalogel"
 
-[如视(realsee.com)](https://realsee.com) 提供了在浏览器环境中的渲染三维空间 [VR 看房 SDK Five](https://developers.realsee.com/docs/#/docs/five/web/quickstart)。
-通过 [如视 3D 空间 API](https://developers.realsee.com/docs/#/docs/five/server/README) 并结合 Five 的渲染能力可以制作丰富多彩的三维空间应用。
+[如视(realsee.com)](https://realsee.com) 提供了在浏览器环境中的渲染三维空间 [VR 看房 SDK Five](https://open-platform.realsee.com/developer/docs/front/3d-space/get-started/rendering-engine/) 。
+通过 [如视开放 API](https://open-platform.realsee.com/developer/open/api/#/) 并结合 Five 的渲染能力可以制作丰富多彩的三维空间应用。
 
-除了 Five 强大的三维空间渲染能力之外，我们也积累了大量的 **VR 看房** 常用功能，并以 `React Components` 和 `Five Plugins` 的形式进行抽象。
+除了 Five 强大的三维空间渲染能力之外，我们也积累了大量的 **VR 看房** 常用功能，并以 `Five Plugins` 的形式进行抽象。
 
-无论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，凡是最终落地的功能我们均毫无保留的开源并以 [Storybook](https://storybook.js.org/) 的形式演示。
+无论是经过线上环境千锤百炼的刚需功能，还是灵感一现的炫酷尝试，凡是最终落地的功能我们均毫无保留的开源至 github [realsee-developer](https://github.com/realsee-developer) 空间。
 
-如果组件满足您的需求，`npm install @realsee/dnalogel`一键安装使用。
+如果插件满足您的需求，`npm install @realsee/dnalogel`一键安装使用。
 
 如果不满足需求，没关系，把我们当作代码示例，我们抛砖引玉。
 
-我们也很期待您基于 [Three.js](https://threejs.org/)、[Five.js](https://www.npmjs.com/package/@realsee/five) 等这类渲染库做出有意思的功能。
-
-## Components
-
-我们目前的组件都是基于 [React](https://reactjs.org/) 界面库实现的，直接按照 [React](https://reactjs.org/) 方式引用使用即可。
-
-### 组件列表
-
-- `ARVideoFigure` AR 视频形象
-- `FloorplanRadar` 户型雷达图
-- `GlassFilters` 滤镜
-- `ModelView` 模型视图 @todo
-- `PBRView` PBR 视图 @todo
-- `PaintBrush` 画笔 @todo
-- `PanoTag` 全景标签 @todo
-- ... 待补充
-
-### 使用方式
-
-```jsx
-import { FiveProvider, FiveCanvas } from '@realsee/five/react'
-import Component from '@realsee/dnalogel/components/Component'
-
-ReactDOM.render(
-  <FiveProvider>
-    <FiveCanvas />
-    <Component config onCallback />
-  </FiveProvider>,
-  containter,
-)
-```
-
-## Five Plugins
-
-**Five Plugins** 是使用了 `@realsee/five` 提供的工厂模式插件机制开发的插件。适合面向过程的可复用逻辑、命令式调用的对象抽象、无 DOM 或轻量 DOM 的组件、复杂动画等。
+我们也很期待您基于 [Three.js](https://threejs.org/) 、[Five.js](https://www.npmjs.com/package/@realsee/five) 等这类渲染库做出有意思的功能。
 
-如果您项目的技术栈不是[React](https://reactjs.org/) ，**Five Plugins** 可能更适合你。
-
-当然，部分插件我们也以 [React Component](https://reactjs.org/) 的形式提供了支持，但这些组件非**纯**组件（会有影响 `five` 实例状态的副作用），您可以按照实际情况酌情引用。
 
 ### 插件列表
-
-- `ModelChassisCompassPlugin` 模型底盘雷达图插件
-- `ModelTVVideoPlugin` 模型电视视频插件
-- `ModelViewPlugin` 模型视图插件
-- `PanoRulerPlugin` 全景标尺插件
-- `PanoTVVideoPlugin` 全景电视视频插件
-- `PanoFloorplanRadarPlugin` 全景户型雷达图插件
-- `PanoDoorLabelPlugin` 全景房间标签引导插件 @todo
-- `PanoIRobotPlugin` 全景扫地机器人插件 @todo
-- `PanoMeasurePlguin` 全景测量插件 @todo
-- `ModelEntryDoorGuidePlugin` 模型入户门引导插件 @todo
+- ModelViewPlugin：模型小窗插件
+- PanoFloorplanRadarPlugin：全景户型雷达图插件
+- ModelRoomLabelPlugin：模型态房屋标签插件
+- TopviewFloorplanPlugin：俯视模型户型图插件
+- ModelChassisCompassPlugin：模型底盘指南针插件
+- ModelEntryDoorGuidePlugin：模型入户门引导插件
+- CSS3DRenderPlugin：CSS3D渲染插件
+- CameraMovementPlugin：相机运镜插件
+- ModelFloorplanPlugin：模型户型图插件
+- PanoRulerPlugin：全景标尺插件
+- PanoCompassPlugin：全景指南针插件
 - ... 待补充
 
 ### 使用方式
@@ -74,21 +43,8 @@ const five = new Five({
   plugins: [[Plugin, 'PluginName', initOptions]],
 })
 
-// 不同插件提供的方法可能存在差异
+// 不同插件提供的方法可能存在差异,请参考各插件 API 文档
 five.plugins.PluginName.load(data)
 five.plugins.PluginName.enable()
 five.plugins.PluginName.disable()
 ```
-
-## Examples
-
-> **Examples** 是应用级别的复杂示例。例子永远不嫌多！
-
-### 最佳示例
-
-- Five 状态控制器：[Demo]()。
-- VR 看房：[移动端 Demo]() | [PC 端 Demo]()。
-
-## Tools
-
-> 为方便您更合理使用、理解 "Dnalogel" 组件、插件，我们提供了一些简单的数据生产编辑工具。

package/{plugins → dist}/CSS3DRenderPlugin/index.d.ts

@@ -1,7 +1,7 @@
 import { FivePlugin } from '@realsee/five';
 import { Vector3 } from 'three';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import { Vector3Position } from '../../typings/math.type';
+import { Vector3Position } from '../typings/math.type';
 export declare type CSS3DRenderPluginParameterType = undefined;
 export interface CSS3DRenderPluginExportType {
     /**

package/dist/CSS3DRenderPlugin/index.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.smaller ? -1 : 1);
+}
+
+function centerPoint(point1, point2) {
+    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}
+
+const transformPositionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}
+
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof THREE.Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if (points?.length < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!five?.model?.loaded)
+            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = config?.ratio || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = config?.dpr || 1;
+        const mode = config?.mode || 'front';
+        const autoRender = config?.autoRender ?? true;
+        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
+        const container = config?.container || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
+        const { scene, css3DRenderer } = stateMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    scene.add(css3DObject);
+                    resizeObserver?.observe?.();
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            disposers.forEach((d) => d?.());
+            scene.remove(css3DObject);
+            if (scene.children.length === 0) {
+                if (typeof stateMode.requestAnimationFrameId === 'number') {
+                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
+                }
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    resizeObserver?.unobserve?.();
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DRenderer.CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE__namespace.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE__namespace.DoubleSide,
+            });
+            const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE__namespace.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+
+exports.CSS3DRenderPlugin = CSS3DRenderPlugin;
+exports["default"] = CSS3DRenderPlugin;

package/dist/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func: () => any, element?: HTMLElement): {
+    observe: () => void;
+    unobserve: () => void;
+};