dsmooot

Hi GlifTek. Good to hear you’ve been making progress with your project setup. I work as a front-end dev with a team that uses Vue for most of our projects, so being familiar with the framework was a big motivation for integrating verge3d into a Vue context. There certainly is a lot to learn within Vue, so it’s great to learn by trying things (and failing often) first-hand. As this thread can show, there are areas where I am still learning about the framework (I’m usually working out of projects that have been set up :P, so project build-related stuff is my weak point)… I went ahead and pushed up the change where I’m using UI elements via Puzzles, so you can have that as a reference. I’m planning to finish working through the tutorial series and will continue to update that repo, so feel free to check in for changes. I’m a fan of going through terminal commands, npm, vu-cli, etc. vs. the gui, but it’s all preference. … and to note, I think it’s great that we are some of the first case-studies for user inquiries related to Vue w/verge3d. I hope that in some way our faults and questions provide some meaningful insight for the verge3d devs along the way! Can’t wait to see formal vue-related tutorials for verge3d!

..and Hello, GlifTek!
Glad you made it into the discussion. It seems you’ve found some answers fairly quickly as well! Always awesome to find helpful forums – especially getting to have a discussion with the lead dev! As Ivan suggested to you, I used the vue template from the Embeddable folder to setup the Vue project and then compared, migrated, and renamed my files from my static project into my Vue project.
I linked my repo to github in a previous post, so feel free to clone it if it’s helpful to you. Pushed up the fix to my problem, so it should be functional as a template!

Hi, Ivan. Thank you for the prompt response! I really appreciate you for taking the time to investigate this issue.

“Does this error happen when you open the scene itself or the puzzle editor (or both)?”

I receive the error when I access the scene in the browser. For context, I’m going through the Swiss Army knife tutorial series and thought I’d attempt to integrate it into a Vue project. In my app.js file (named swiss_army_knife.js, for this project), there are references to the v3d instance that are causing the error. Oddly enough, after tinkering with the project after my previous post, I started to place the v3d.js file in different directories within the project to test that it wasn’t an incorrect path for import. I ended up placing it back into the /public folder root and was able to successfully launch the scene without errors. After a few hours, I tried to launch the project again, without making any changes to the file structure, and the ‘v3d not defined’ error returned.

Today, I attempted to run the project again and am receiving the same error, yet the scene loads successfully behind the errors overlay! Truly a strange outcome. I am beginning to wonder if I need to setup a Promise for the v3d.js file to import before referencing it in the swiss_army_knife.js file.

“does it work if you just change the LOAD_LOGIC_FILES variable back to false?”

Another odd case: Initially, before setting LOAD_LOGIC_FILES to true, I was able to launch the scene successfully without error. After setting to true, I received the error overlay, with the scene running in the background (with the puzzles animation working). I then set LOAD_LOGIC_FILES back to false and continue to receive the error overlay, with the scene running in the background (without puzzles animation working). Note: I’m also hard refreshing and clearing cache between attempts.

I’ve attached a screenshot of the scene running with the error overlay (error.png), along with the console log from the terminal (console.png). The browser console stopped logging the error, so I wasn’t able to screenshot it before it disappeared.

Also, I’ve pushed my project to a remote GitHub repo if you would like to see the file structure, test things, etc. Here is the link: https://github.com/dsmooot/verge3d-myFirstProject

I’m really looking forward to getting things running smooth! Very excited for what’s to come with Verge3D.

Thanks for your hard work and for your help, Ivan!

Cheers.