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