DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 3DVista and Next.js
Brandon LeBoeuf
Brandon LeBoeuf

Posted on

3DVista and Next.js

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>
Enter fullscreen mode Exit fullscreen mode
  • Convert to a functional component
import Head from "next/head";

export default function index() {
  return (
    <div>
      <Head>
      ...
      </Head>
      <section>
      ...
      </section>
    <div>
  )
Enter fullscreen mode Exit fullscreen mode
  • Convert script tag to dangerouslySetHtml:
<script type="text/javascript">
  var tour;
  var devicesUrl = {"general":"script_general.js?v=1640882506117"};

  (function() {
    var deviceType = ['general'];
...
  }
</script>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 error

  • Replace all instances of `/Mobile\/\w+/` with `/Mobile/`, as they are causing a regex error

  • There 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)

Collapse
 
isaachkwu profile image
Isaac

Thanks for the detailed tutorial! Really helps a lot.

Layoffs: It’s Okay to Not Be Okay