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.

Access “app” from external JS

Home Forums Programming Access “app” from external JS

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #48902


    I am trying to get some of your example custom shaders on github and apply the shader to an object on an existing scene which was created with the Verge3D App Mannager.

    I did the following: copied the code from github into the App (into the function runCode(app) {}). In that example, some external modules from other files are being imported. So I downloaded those and re-linked them.
    This was not working firstly because the myAwesomeApp.js is not a module thus you get the error ‘Cannot use import statement outside a module’.

    Instead I am binding new js file and declare it as a module.

    function runCode(app) {
        let js = document.createElement("script");
        js.type = "module";
        js.src = "custom_shader.js"

    Inside that file custom_shader.js now the modules are being imported. But once the code runs that file and gets to the point


    I am getting an error because the scene is undefined. So I understand from that file the ‘app’ is not accessabble.
    That line was originally v3d.scene.add(wireframe);

    but I am trying to access the current scene of the App itself.

    I have been researching for this for hours now. Sorry if the solution might be too obvious – but I am not getting it :/ Or maybe I am doing it totally wrong and there is an easier way.

    I could “import” all those modules too by just copying them into the main app js code. But 1) that will make it all pretty messy and 2) I want to understand what I am not understanding here ;)

    Thanks so much for your help. :rose:
    Once that is solved I may likely stumble into the next problem…



    are you using shaders compatible with Three.js?

    Chief 3D Verger | LinkedIn | Twitter


    Hello Yuri,

    I was trying to implement this shader:



    I just had a look at this one


    too, it seems to be a bit more simple. I KIND OF managed to implement it, but not without having troubles (see image)

    I dont know which of both is a “three.js” compatible one.

    You must be logged in to view attached files.

    I see. In fact, you can do it without any coding as Verge3D supports line rendering out of the box. See the Lines example in your Verge3D for Blender distro.

    Chief 3D Verger | LinkedIn | Twitter


    Wait..What? There is ONE simple tick box for this? :yahoo:
    I saw this example before. But I did not find any puzzles nor code nor material setting. But now I found it. Thank you for guiding me there again.

    Would be still great to know how to get there through coding though. I see that three.js supports dashed lines for example. I will try more with my half-working example and get back here.


    Ok figured it out. For anyone interested this is the coding solution to create a simple wireframe material and apply it to an object. It is really that simple. I was totally going too far :wacko:
    Now need to find out more about v3d material libraries

    function runCode(app) {
        const material1 = new v3d.MeshBasicMaterial({
            color: 0xe0e0ff,
            wireframe: true,
        app.scene.children[0].material = material1;

    thank you for sharing a solution! :good:

    Chief 3D Verger | LinkedIn | Twitter


    You are welcome. As for the dashed material I copied a code snippet from your “dashed lines” example and tried to apply a dashed line to an object.

        const material2 = new v3d.LineDashedMaterial({
          color: 0xff0040,
          linewidth: 1,
          scale: 1,
          dashSize: 3,
          gapSize: 1
        let x_geo = app.scene.children[1].geometry;  
        const line = new v3d.Line(x_geo, material2);

    I was getting the console warning
    ‘v3d.js:1 v3d.Line.computeLineDistances(): Computation only possible with non-indexed BufferGeometry.’
    But still after adding the line
    it doesnt work

    Probably doing something essentially wrong here. But as long I am not getting errors I am confident to be close to the solution. Any suggestion?

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.