Interactive Mouse Effects with Three.js

Question

really appreciate some help for this one. I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:

Interactive Mouse Effects with Three.js

Just after the "var animate" part I receive an error of "cube not defined" So I was wordering if there is a missing part for this tutorial??

Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??

My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?

Thank you thank you soooo very much!!

Answer 1

I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.

I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??

Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.

Is there important information due to this library use, that I need to know so I can upload it online?

I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.