Use 3DVista in a Next.js app
The default export for 3DVista's Virtual Tour PRO is not supported for frameworks like React or Next.js. Below are the steps that need to be taken in order to get 3DVista working on next.js.
Tested it on:
- Mac: Chrome/Safari/Firefox
- PC: Chrome/Safari/Firefox
- iPhone: Safari/Chrome
- iPad: Safari/Chrome
1. Export from 3DVista
- Click Publish
- Select For Web / Mobile
- Set the Destination to a New Folder called 3DVista (this will end up in you next.js projects /public directory)
- Click Publish
2. Add to next.js project
- Add the newly created 3DVista folder into the pages directory of your project
3. Move files/folders
- Move these files from /pages/3DVista to /public:
- /lib
- /locale
- /media
- script_general.js
- script.js
4. Update CSS
- Create a new file called 3dvista.css
- Remove all declarations in the style tag in /pages/index.htm and place them in 3dvista.css
- Remove all inline styles, replacing with a class, and putting these classes into 3dvista.css
- import 3dvista.css file at the top of _app.js
5. Edit index.htm
- Rename index.htm to index.jsx
- Remove outer html and head tags and the !DOCTYPE declaration:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
</body>
</html>
- Convert to a functional component
import Head from "next/head";
export default function index() {
return (
<div>
<Head>
...
</Head>
<section>
...
</section>
<div>
)
- Convert script tag to dangerouslySetHtml:
<script type="text/javascript">
var tour;
var devicesUrl = {"general":"script_general.js?v=1640882506117"};
(function() {
var deviceType = ['general'];
...
}
</script>
to (*see bonus for alternate strategy here)
<script
type="text/javascript"
dangerouslySetInnerHTML={{
__html: `
let tour;
let devicesUrl = { general: "script_general.js" };
(function () {
let deviceType = ["general"];
...
`
</script>
NOTE: Be sure to have the __html wrapped in backticks `` to avoid single/double quote conflicts
Remove this comment which is causing an error:
`//Force hide. Some cases the transitionend event isn't dispatched with an iFrame.`Remove the
`isSafariDesktopV11orGreater()`function, as its causing an errorReplace all instances of
`/Mobile\/\w+/`with`/Mobile/`, as they are causing a regex errorThere are query parameters on the .txt, .js, and .jpg in the link and script tags that need to be removed. Locate this (looks something like this
?v=1640882506117) at the first link tag within the head tag. Remove All occurrences of this query parameter throughout the document (highlight, right click and select "Change All Occurrences")
THATS IT!
Hope this is helpful to someone else out there in the interwebz :)
Top comments (1)
Thanks for the detailed tutorial! Really helps a lot.