与react.js/vue.js集成

将Verge3D场景集成到项目中的方法有很多,其中最简单的方法之一是通过iframe元素单独加载于嵌入。但如果您想直接在应用内使用,那么在这一过程中可能会比较麻烦。但很多项目配置都有其特定的问题和特性。本指南不能覆盖全部,只针对React.js和Vue.js等流行的javascript框架做出介绍。

Verge3D提供了一个简单的例子,说明如何制作一个简单的"Hello,World!" React或Vue项目,并将一个标准的Verge3D应用集成到其中。示例文件位于Verge3D发行版中的 manager/templates/embeddable 目录下。

Verge3D React.js应用示例

这里有一个简单的说明,如何用Create React App工具创建一个基本的React.js + Verge3D应用。您可以在Verge3D发行版中的 manager/templates/embeddable/readme.md 目录中找到此说明的副本。

1)通过Create React App实用程序创建React.js应用: npx create-react-app react_v3d_app

2)删除 react_v3d_app/src 目录中的所有文件。

3)将 manager/templates/Embeddable/public Verge3D的目录内容复制到 react_v3d_app/public

manager/templates/Embeddable/src Verge3D的目录内容复制到 react_v3d_app/src

将引擎文件 build/v3d.js 复制到 react_v3d_app/public

4) 在 react_v3d_app/public/index.html 中添加以下脚本标签: <script src="%PUBLIC_URL%/v3d.js"></script>

5)在 react_v3d_app/src 中创建一个 components 目录。然后创建一个名为 react_v3d_app/src/components/v3dapp.js 的文件,其内容如下: import React from 'react'; import * as v3dAppAPI from '../v3dApp/app.js'; import '../v3dApp/app.css'; class V3DApp extends React.Component { #app = null; componentDidMount() { v3dAppAPI.createApp().then(app => { this.#app = app; }); } componentWillUnmount() { if (this.#app !== null) { this.#app.dispose(); this.#app = null; } } render() { return <div id={v3dAppAPI.CONTAINER_ID}><div id="fullscreen_button" className="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div></div>; } } export default V3DApp;

6) 创建一个文件react_v3d_app/src/index.js,包含以下代码: import React from 'react'; import ReactDOM from 'react-dom'; import V3DApp from './components/V3DApp.js'; ReactDOM.render( <V3DApp/>, document.getElementById('root') );

7) 通过在 react_v3d_app 目录下执行以下命令运行开发服务器: npm start 默认情况下,应用现在应该可以在 http://localhost:3000/ 地址中访问了。

Verge3D Vue.js应用示例

下面是关于如何使用Vue CLI工具创建基础的Vue.js+Verge3D应用的简单说明。您可以在Verge3D发行版中的 manager/templates/embeddable/readme.md 目录中找到此说明的副本。

1)通过Vue CLI工具创建Vue.js应用: npx @vue/cli create vue_v3d_app

2)将 manager/templates/Embeddable/public Verge3D的目录内容复制到 vue_v3d_app/public

manager/templates/Embeddable/src Verge3D的目录内容复制到 vue_v3d_app/src

将引擎文件 build/v3d.js 复制到 vue_v3d_app/public

3) 在 vue_v3d_app/public/index.html 中添加以下脚本标签: <script src="<%= BASE_URL %>v3d.js"></script>

4) 创建一个文件 vue_v3d_app/src/components/V3DApp.vue ,包含以下代码: <template><div :id="containerId"><div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div></div></template><script> import * as v3dAppAPI from '../v3dApp/app.js'; export default { name: 'V3DApp', data() { return { containerId: v3dAppAPI.CONTAINER_ID, } }, app: null, mounted() { v3dAppAPI.createApp().then(app => { this.$options.app = app; }); }, beforeDestroy() { if (this.$options.app) { this.$options.app.dispose(); this.$options.app = null; } }, } </script><style> @import '../v3dApp/app.css'; </style>

beforeDestroy()钩子在Vue.js 3.0.0+中被弃用,请使用beforeUnmount()代替。
参见:https://eslint.vuejs.org/rules/no-deprecated-destromed-lifecycle.html

5)按如下所示更改 vue_v3d_app/src/app.vue <template><V3DApp></V3DApp></template><script> import V3DApp from './components/V3DApp.vue'; export default { name: 'App', components: { V3DApp } } </script>

6)通过在 vue_v3d_app 目录中执行以下命令来运行开发服务器: npm run serve 默认情况下,应用现在应该可以在 http://localhost:8080/ 地址中访问了。

使用拼图编辑器

React/Vue和 拼图编辑器 / 应用管理器 之间没有直接的整合方式。尽管如此,您仍然可以使用拼图来为您的React/Vue应用添加场景交互。本节解释了如何使用这种方法及其局限性。

应用管理器并不能直接处理一个典型的React/Vue项目的目录结构。但经过一些调整后,应用管理器至少可以识别项目的 *.blend* 文件、导出的 *.gltf/.glb/.bin* 场景文件以及拼图的可视化逻辑脚本。这意味着您可以在应用管理器网页中查看相应的场景资源并启动拼图编辑器。

这里的缺点是,查看.gltf文件和处理拼图只能通过Verge3D播放器来完成,也就是说,与 在应用管理器内创建 的所有标准Verge3D应用的方式相同。因此,无法访问React/Vue的功能、组件、逻辑等...... 而且只能以一种单独的方式添加拼图。不过,一个完整的React/Vue应用可以加载、运行并与拼图编辑器中创建的逻辑脚本进行通信。

应用管理器设置

假设我们有一个根据本手册指南创建的React或Vue应用。假设它位于 APP_PATH 路径下,而您的Verge3D发行版位于 VERGE3D_PATH 路径下。

为了 “连接” 应用管理器和React/Vue项目,我们需要在 VERGE3D_PATH/applications 内创建一个专门的目录(所有Venge3D应用通常都在这个地方)。我们将创建一个符号链接,指向 APP_PATH/public/v3dApp ——这是我们React/Vue项目中与verge3d相关的场景资源和拼图的逻辑文件所在的地方。让我们把新目录称为my_app。下面是实现的方法:

在Linux中 ln -sr APP_PATH/public/v3dApp VERGE3D_PATH/applications/my_app 在 Windows中 (PowerShell, 需要管理员权限) cmd /c mklink /D VERGE3D_PATH\applications\my_app (Resolve-Path APP_PATH\public\v3dApp)

之后,只需打开文件 APP_PATH/src/v3dApp/app.js ,然后找到以下一行:

var LOAD_LOGIC_FILES = false;

并对其进行如下修改,以实现加载拼图的逻辑脚本。

var LOAD_LOGIC_FILES = true;

现在您可以在应用管理器中看到该项目了。在这里,您可以直接打开.gltf和.blend文件,以及使用拼图编辑器了。