How to Build Custom Elements in Wix with three.js

Learn how to build a custom element for your Wix or Wix Studio site with three.js *************************************** Additional Wix for Developers Resources Get Started Coding on Wix Playlist (6 Videos) ►    • Start Coding with Velo   *************************************** Description Custom elements enables us to build custom interfaces beyond the native Wix Elements. We can define custom HTML tags using standard web component implementation. In this example, we will use the three.js library to create 3D Custom Elements for our Wix site. Note: three.js version 0.137.5 is used in this video Get the code ► https://github.com/tjimenezwix/Vibe-w... Custom Elements ► https://dev.wix.com/docs/develop-webs... three.js ► https://threejs.org/ API Documentation ► https://www.wix.com/velo/reference/ap... Timestamps: 00:00 Intro 0:11 What is a Custom Element? What are the benefits of using them? 0:52 Example of Custom Element on a site built on Wix 1:54 Wix Devcon Hackathon 2022: Implementing Three.js using Custom Elements 2:17 Getting Started 2:50 Adding a Custom Element to your Page 4:02 Hosting your Custom Element on Wix vs. Remotely 5:55 Three.Js Scene Explained 6:49 Creating a Custom Element Class 7:54 connectedCallback() - Lifecycle Method 09:01 - customElements.define() 10:36 - Previewing Initial Three.js Custom Element Implementation 10:49 - Communicating between Wix and your Custom Element (.on() and .setAttribute) 22:18 - Previewing our Three.js Custom Element 23:38 - Review #wix #wixstudio #javascript #webdevelopment #coding #threejs Be sure to subscribe for more developer tips and tutorials.    / @wixfordevelopers   STAY TUNED: Discord ►   / discord   Twitter ►   / devsonwix   YouTube ►    / @wixfordevelopers