Adding three.js in Metronic Template
Hi Team!
I bought Medtronic template and already in the middle of creating my website with it.
Now I need an additional javascript plugin "three".
I installed it via NPN and yarn. Can find it in the "node_modules" folder.
From that point I am a bit lost how to integrate it in the build environment, compile it and making use of it in my website. The tutorial I read here is not that helpful "https://preview.keenthemes.com/html/metronic/docs/getting-started/build/webpack".
It even looks like step 3 is same as step 2?
How to add "three" in the package.json
And Later how to integrate simply the javascript and css files in header and footer?
Integration via WebPack
Replies (1)
Hi,
Could you please try to follow these steps:
-
Create the file "three.bundle.js" in the following location: /tools/webpack/plugins/custom/three/
-
Add the following content to the "three.bundle.js" file:
import * as THREE from 'three/build/three.module.js'; window.THREE = THREE;
-
Save the file.
-
Run the "npm run build" command from the tools folder to compile the assets and include the "three.bundle.js" file.
After completing these steps, the "three.js" plugin should be available and accessible in your website's header and footer. You can include it in your HTML files using the regular script tag as you would with any other JavaScript file.
For example, in your website's header, you can add the following script tag:
Please make sure to adjust the "/dist/assets/plugins/custom/three/three.bundle.js" to the correct path where the file is located in your project.
If you encounter any issues or have further questions, feel free to reach out for assistance.
Thanks
