Integration with React.js/Vue.js

One of the easiest way of integrating a Verge3D scene into your project is to load it separately through an iframe element. But if you want to use it directly inside your app then there could appear some difficulties along the way. However, there are plenty of possible project configurations with their specific issues and peculiarities. This guide can't comprehend them all and only targets such popular javascript frameworks as React.js and Vue.js.

Verge3D provides an example of how to make a simple "Hello, world!" React or Vue project and integrate a standard Verge3D application into it. The example files are located in the manager/templates/Embeddable directory inside the Verge3D distribution.

Verge3D React.js Application Example

Here's a simple instruction on how to create a basic React.js + Verge3D application with the Create React App utility. You can find a copy of this instruction in manager/templates/Embeddable/README.md inside the Verge3D distribution.

1) Create a React.js application via the Create React App utility: npx create-react-app react_v3d_app

2) Delete all files in the react_v3d_app/src directory.

3) Copy the content of the manager/templates/Embeddable/public Verge3D's directory to react_v3d_app/public.

Copy the content of the manager/templates/Embeddable/src Verge3D's directory to react_v3d_app/src.

Copy the engine file build/v3d.js to react_v3d_app/public.

4) Add the following script tag into react_v3d_app/public/index.html: <script src="%PUBLIC_URL%/v3d.js"></script>

5) Create a file react_v3d_app/src/index.js containing the following code: import React from 'react'; import ReactDOM from 'react-dom'; import * as V3DApp from './v3dApp/app.js'; import './v3dApp/app.css'; ReactDOM.render( <div id={V3DApp.CONTAINER_ID}> <div id="fullscreen_button" className="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div> </div>, document.getElementById('root') ); V3DApp.createApp();

6) Run the development server by executing the following command in the react_v3d_app directory: npm run start By default the application now should be available at http://localhost:3000/.

Verge3D Vue.js Application Example

Here's a simple instruction on how to create a basic Vue.js + Verge3D application with the Vue CLI utility. You can find a copy of this instruction in manager/templates/Embeddable/README.md inside the Verge3D distribution.

1) Create a Vue.js application via the Vue CLI utility: npx @vue/cli create vue_v3d_app

2) Copy the content of the manager/templates/Embeddable/public Verge3D's directory to vue_v3d_app/public.

Copy the content of the manager/templates/Embeddable/src Verge3D's directory to vue_v3d_app/src.

Copy the engine file build/v3d.js to vue_v3d_app/public.

3) Add the following script tag into vue_v3d_app/public/index.html: <script src="<%= BASE_URL %>v3d.js"></script>

4) Create a file vue_v3d_app/src/components/V3DApp.vue containing the following code: <template> <div :id="containerId"> <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div> </div> </template> <script> import * as V3DApp from '../v3dApp/app.js'; export default { name: 'V3DApp', data: function() { return { containerId: V3DApp.CONTAINER_ID } }, mounted: function() { V3DApp.createApp(); } } </script> <style> @import '../v3dApp/app.css'; </style>

5) Change vue_v3d_app/src/App.vue so it will look like this: <template> <div id="app"> <V3DApp></V3DApp> </div> </template> <script> import V3DApp from './components/V3DApp.vue'; export default { name: 'App', components: { V3DApp } } </script>

6) Run the development server by executing the following command in the vue_v3d_app directory: npm run serve By default the application now should be available at http://localhost:8080/.