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/