We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Buidling HTML interfaces with Vue.js

Home Forums General Questions Buidling HTML interfaces with Vue.js

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #56403
    sazzrro
    Participant

    I’ve followed the steps for connecting verge3d with Vue:
    Resource

    But now I’m not sure how I can use my vue project to add HTML/CSS to my verge3d app. I’m familiar that it can be as simple as adding a new .HTML file within the applications folder but not sure how that can be done with my vue index.html file

    #56407
    sazzrro
    Participant

    Also, how do I add in a blend file once I’ve connected verge3d with Vue? I’m seeking to use blender for the 3D environment and Vue for the HTML interactive interfaces (and possibly vue for puzzle logic if needed)

    Attachments:
    You must be logged in to view attached files.
    #56414
    sazzrro
    Participant

    Is the purpose of connecting Vue to a Verge3d app specifically to do things with the puzzle editor? Are there other reasons for connecting with vue such as adding HTML interfaces, or is the only way to add HTML interfaces to add a separate .html file in the application folder of the app?

    In the case that Vue is meant only to do things with the puzzle editor, I’m fine with adding a separate .html file in the application folder for the app to get the interfaces working if that’s the only way to do it, but I would still require a way to have a .blend file for the app within the app managers under “scenes”.

    Is there a way to have a verge3d app connected with Vue and have a .blend file that I can edit in Blender?

    Attachments:
    You must be logged in to view attached files.
    #56435

    Hi sazzrro,

    The manual section you are referring to is just about how to use the puzzles editor to add the visual logic script to your vue/verge3d app.

    So, the “My Awesome App” entry in the App Manager’s interface is only useful for launching the puzzles editor and that’s it. It’s basically a dummy app and the App Manager can’t see the contents of the actual vue/verg3d project files like html, blend, etc…

    I’ve followed the steps for connecting verge3d with Vue: Resource

    But now I’m not sure how I can use my vue project to add HTML/CSS to my verge3d app.

    If you created a vue application by following this tutorial: https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#Verge3D_Vue
    then you should have a vue project that uses a verge3d app as a vue component. Specifically the component is located inside the vue app by the path src/components/V3DApp.vue. You can change its HTML and CSS as well as add more vue components the way it’s usually done in vue projects.

    Also, how do I add in a blend file once I’ve connected verge3d with Vue?

    Blend files by default should be located in the public/v3dApp/ directory inside your vue project, so you can place additional blend-files there as well (and not in “My Awesome App” since that’s just a dummy app for the puzzles editor), but they won’t be visible in the App Manager’s UI.

    Is the purpose of connecting Vue to a Verge3d app specifically to do things with the puzzle editor? Are there other reasons for connecting with vue such as adding HTML interfaces, or is the only way to add HTML interfaces to add a separate .html file in the application folder of the app?

    You are right that it’s only for the puzzles editor and there’s no other reasons for doing that. But to add HTML interfaces you can just work with vue components instead of using separate html files.

    Co-founder and lead developer at Soft8Soft.

    #56437
    sazzrro
    Participant

    Thank you! With that explanation, I believe I fully understand the flow there now. Would it be as easy as copying over a .blend file and visual_logic.js/xml from another project made purely through app manager into my public/vd3App folder? When I tried to copy files from another project into my vue project as described above, localhost runs the app but it never really opens/begins loading:

    The files in the screenshot are from my vue project. The only files in the screenshot that are from another project are the .blend, .gltf, and .bin files at the moment

    Attachments:
    You must be logged in to view attached files.
    #56441

    Would it be as easy as copying over a .blend file and visual_logic.js/xml from another project made purely through app manager into my public/vd3App folder?

    Yes, but you also need to open the src/components/V3DApp.vue file inside your vue project, then search for the line this.sceneURL = 'v3dApp/app.gltf'; and change it to the actual name of the gltf file you copied over there. I guess it should be this.sceneURL = 'v3dApp/Taos3D.gltf'; in your case.

    Co-founder and lead developer at Soft8Soft.

    #56442
    sazzrro
    Participant

    Thank you! I got the scene to appear using the blend file from another project :)

    #56444
    sazzrro
    Participant

    Edit: I resolved the lighting issues and am now able to see the scene load in the app manager puzzle editor (Screenshots are fixed now!). I was able to get the scene working/looking like the other app! Thanks again

    Attachments:
    You must be logged in to view attached files.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.