Dw.EasyCam is not defined p5.js & Vue.js Integration

[adinai]

Hello,
I`m using p5.js with Vuejs framework. It works fine but when I try to add easyCam library, it show that Dw.EasyCam is not defined. I do import 'p5/lib/p5.easycam'; library as needed in Vue.js.
p.setup =_=> {
this.canvas = p.createCanvas(innerWidth, innerHeight, p.WEBGL)
this.easycam = new Dw.EasyCam(this._renderer, {distance : this.lunarDistance*1.3})
this.canvas.parent(this.$refs.canvas)
}
Please help me with this issue.

Thanks in advance!

[yishiyang]

@adinai
Any progress on this issue? I'm working on the same thing and stuck here.

[jwdunn1]

Not really an issue. Use createEasyCam(). This fiddle uses p5, vue, and EasyCam without error: https://jsfiddle.net/intrinsica/7rt695bs/
Also be sure to use the newer versions of p5js and p5.EasyCam (forked and supported here)

[yishiyang]

@jwdunn1
Thanks for the answer!
I'm using p5.js instance mode in the vue project.

The p5 dependency is installed as a npm module in the back.
And I have also include both "p5.js" and "p5.easycam.min.js" in the header of the main page.

For this:
new Dw.EasyCam(p5.RendererGL,{distance:300});
I'm getting a message saying "renderer needs to be an instance of p5.RendererGL".

For this:
createEasyCam();
I'm getting an error saying "sunlight.js?ab4b:53 Uncaught ReferenceError: createEasyCam is not defined"

The test from your example does work.
p5.print(Dw.EasyCam.INFO)

Here's a screenshot of all the console messages:

Do you have any clues for this? Thanks a lot!

[jwdunn1]

Try commenting out the "new Dw.EasyCam()" line and then add a "p5." in front of the createEasyCam().
Here is another version of the same sketch I shared earlier, but now running in instance mode. Check out how createEasyCam is handled. https://jsfiddle.net/intrinsica/7rt695bs/14/