Getting Started with Three JS (2023)

DevDojo

Products

Tails

Create websites with TailwindCSS

Wave

Start building the next great SAAS

Devblog

Create a professional dev blog

MarkdownX

The Markdown editor of the future

SAAS Adventure

21-day program for building a SAAS

Learn

Learn how to code & design

Community

Join78,322 other developers as we learn, build, and grow together.

Connect with fellow developers and gain access to tools that will help you build a profitable SaaS 🚀

Community

🏠Home🙋Questions🍿Videos🎓Courses🤓Snippets🤣Fun

Rewards

⭐Points🎖Badges💰DevCoin🏆Contests

Resources

📘Guides📚eBooks💡Topics

Meet the Team

Tony LeaFounder / Developer

Bobby IlievCo-Founder / DevOps

Boyan IlievDeveloper / DevOps

View All Users

(Video) Three.js Crash Course For Beginners | Create This Awesome 3D Website!

Pricing

About

🦺

Help & Support

Have a question or need help

🤝

Sponsorships

Learn about sponsorships

📄

Terms of Service

The boring legal stuff

Signup

Written by Tony Lea on Oct 8th, 2021・ Views ・ Report Post

Tony LeaVisit User Profile

Table of contents

📦 Rendering a rotating Cube
💾 Loading a simple 3D model
🪐 Finding 3D Models
💡 Learning More

(Video) Getting Started With Three.js

ThreeJS is one of the most popular libraries for displaying 3D content on a webpage. You can see a lot of examples of the cool stuff you can create, by checking out their homepage.

In this quick tutorial, I'll show you how to get started using and loading 3D content on your website. The best way to learn is to just jump into the code, so let's start by showing you how to render a rotating cube.

📦 Rendering a rotating Cube

It's always nice to see what we are going to create before diving directly into the code. Take a look at this Codepen Example, this is what we'll be creating.

Let's learn how simple it is to create this rotating cube. Inside the <body> of any HTML file, we are going to load three.js from a CDN, like so:

<script type="module"> // Find the latest version by visiting https://cdn.skypack.dev/three. import * as THREE from 'https://cdn.skypack.dev/three';</script>

Next we want to create two constants, our scene, and our camera:

const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Then we need to create our renderer and our cube. We also add our cube to the scene, set the size of our renderer, set the camera position, and append the rendered output to our document:

const renderer = new THREE.WebGLRenderer();const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );const cube = new THREE.Mesh( geometry, material );scene.add( cube );renderer.setSize( window.innerWidth, window.innerHeight );camera.position.z = 5;document.body.appendChild( renderer.domElement );

This will only add the cube to the page, but nothing will be animating yet. We can add some simple animation by adding the following few lines:

function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera );}animate();setInterval(function(){ cube.rotation.x += 0.01; cube.rotation.y += 0.01;}, 5);

Below is the contents of our HTML file that renders this 3D Cube 🕺

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.View WebsiteThe official Laravel job board. Find the best and most talented Laravel developers by posting your job on the official Laravel job board.View WebsiteLearn how to code your own blockchain and create your own crypto-currency with the CoinCamp interactive and fun online training platform.Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ThreeJS Fun</title> <style> body{ background:#000; padding:0px; margin:0px; } </style></head><body> <script type="module"> // Find the latest version by visiting https://cdn.skypack.dev/three. import * as THREE from 'https://cdn.skypack.dev/three'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); const cube = new THREE.Mesh( geometry, material ); scene.add( cube ); renderer.setSize( window.innerWidth, window.innerHeight ); camera.position.z = 5; document.body.appendChild( renderer.domElement ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); setInterval(function(){ cube.rotation.x += 0.01; cube.rotation.y += 0.01; }, 5); </script></body></html>

Next, we'll learn how we can load a 3D file via a GLTF file, this is a common 3D file format.

💾 Loading a simple 3D model

Here is an example of what we'll be creating in this step. As you can see it's a simple render of a 3-D Parrot 🦜

This is also very simple to accomplish. First, we need to import our libraries (including a library to import GLTF/GLB file). We will also be creating our scene, camera, renderer, loader, light, and of course our 3d object:

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js';const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new THREE.WebGLRenderer();const loader = new GLTFLoader();const light = new THREE.SpotLight();const flamingo = await loader.loadAsync('//devdojo.com.s3.us-east-1.amazonaws.com/assets/3d/parrot.glb');

Next, we'll set the background color of our scene and reposition the light and camera. Then we add our light and 3d object to our scene.

scene.background = new THREE.Color('#72c0ff');light.position.set(-20, 15, 120);camera.position.set( 10, 0, 140 );scene.add(light);scene.add(flamingo.scene);

Finally, we append our rendered contents to the screen, render our scene in an animation, and rotate our 3D model.

renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera );}animate();setInterval(function(){ flamingo.scene.children[0].rotation.y += 0.001;}, 5);

Here is the contents of that single file that loads our 3D object 🦜

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ThreeJS Fun</title> <style> body{ background:#000; padding:0px; margin:0px; } </style></head><body> <script type="module"> import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js'; import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); const loader = new GLTFLoader(); const light = new THREE.SpotLight() light.position.set(-20, 15, 120) scene.add(light) const flamingo = await loader.loadAsync('https://cdn.devdojo.com/assets/3d/parrot.glb'); scene.add(flamingo.scene); scene.background = new THREE.Color('#72c0ff'); renderer.setSize( window.innerWidth, window.innerHeight ); camera.position.set( 10, 0, 140 ); document.body.appendChild( renderer.domElement ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); setInterval(function(){ flamingo.scene.children[0].rotation.y += 0.001; }, 5); </script></body></html>

🪐 Finding 3D Models

There are a few resources where you can find some amazing 3D models to use in your projects. The first one is Free3D, and the second (my favorite) is SketchFab.

Be sure to search around because there are many other websites out there with some really cool 3D models 🙌

💡 Learning More

If you would like to learn more about Three.js and how you can use it to create some awesome and engaging websites be sure to check out the following resources:

Be sure to follow me here as well because I will be creating more tutorials on how to use Three.js 😉

Comments (1)

\n`));class Kr extends Or{constructor({classNames:e}={}){super({template:Wr,classes:Ur}),this.classNames=e}load(e){const t=document.createElement("img");this.classNames&&(t.className=this.classNames),t.addEventListener("load",(()=>{this.el.replaceWith(t)}),{once:!0}),Promise.resolve(e).then((e=>t.src=e))}renderSync(){return super.renderSync(),this.classNames&&this.classNames.split(" ").forEach((e=>this.el.classList.add(e))),this.el}}const Yr=br("customEmoji");const Xr=new qr((({emoji:e})=>`${e}`));class Jr extends class{renderElement(e){return{content:e}}renderImage(e="",t){const n=new Kr({classNames:e});return n.renderSync(),{content:n,resolver:()=>(n.load(t()),n.el)}}doRender(e,t,n){if(e.custom)return this.renderCustom(e,t,n);const{content:o,resolver:i}=this.render(e,n),r=o instanceof Element?o:o.el;return i&&i(),r}doEmit(e){return e.custom?this.emitCustom(e):this.emit(e)}emitCustom({url:e,label:t,emoji:n,data:o}){return{url:e,label:t,emoji:n,data:o}}renderCustom(e,t,n=""){const o=[Yr.customEmoji,n].join(" ").trim(),{content:i,resolver:r}=this.renderImage(o,(()=>e.url)),s=i instanceof Element?i:i.el;return r&&r(),s}}{render(e){return this.renderElement(Xr.renderSync({emoji:e.emoji}))}emit({emoji:e,hexcode:t,label:n}){return{emoji:e,hexcode:t,label:n}}}const Zr=[(e,t)=>("1F91D"===e.hexcode&&t<14&&(e.skins=[]),e),(e,t)=>(e.skins&&(e.skins=e.skins.filter((e=>!e.version||e.version<=t))),e)];function Gr(e,t){return e.filter((e=>null!==function(e,t){return Zr.some((n=>null===n(e,t)))?null:e}(e,t)))}function Qr(e){var t;return{emoji:e.emoji,label:e.label,tags:e.tags,skins:null==(t=e.skins)?void 0:t.map((e=>Qr(e))),order:e.order,custom:!1,hexcode:e.hexcode,version:e.version}}function es(e,t,n){var o;return!(n&&!n.some((t=>t.order===e.group)))&&(vr(e.label,t)||(null==(o=e.tags)?void 0:o.some((e=>vr(e,t)))))}class ts{constructor(e="en"){this.locale=e}}const ns="PicMo";function os(e){return new is(e)}os.deleteDatabase=e=>new Promise(((t,n)=>{const o=indexedDB.deleteDatabase(`${ns}-${e}`);o.addEventListener("success",t),o.addEventListener("error",n)}));class is extends ts{async open(){const e=indexedDB.open(`${ns}-${this.locale}`);return new Promise(((t,n)=>{e.addEventListener("success",(e=>{var n;this.db=null==(n=e.target)?void 0:n.result,t()})),e.addEventListener("error",n),e.addEventListener("upgradeneeded",(async e=>{var t;this.db=null==(t=e.target)?void 0:t.result,this.db.createObjectStore("category",{keyPath:"order"});const n=this.db.createObjectStore("emoji",{keyPath:"emoji"});n.createIndex("category","group"),n.createIndex("version","version"),this.db.createObjectStore("meta")}))}))}async delete(){this.close();const e=indexedDB.deleteDatabase(`${ns}-${this.locale}`);await this.waitForRequest(e)}close(){this.db.close()}async getEmojiCount(){const e=this.db.transaction("emoji","readonly").objectStore("emoji");return(await this.waitForRequest(e.count())).target.result}async getEtags(){const e=this.db.transaction("meta","readonly").objectStore("meta"),[t,n]=await Promise.all([this.waitForRequest(e.get("emojisEtag")),this.waitForRequest(e.get("messagesEtag"))]);return{storedEmojisEtag:t.target.result,storedMessagesEtag:n.target.result}}async setMeta(e){const t=this.db.transaction("meta","readwrite"),n=t.objectStore("meta");return new Promise((o=>{t.oncomplete=o,Object.keys(e).filter(Boolean).forEach((t=>{n.put(e[t],t)}))}))}async getHash(){const e=this.db.transaction("meta","readonly").objectStore("meta");return(await this.waitForRequest(e.get("hash"))).target.result}async isPopulated(){const e=this.db.transaction("category","readonly").objectStore("category");return(await this.waitForRequest(e.count())).target.result>0}async populate({groups:e,emojis:t,emojisEtag:n,messagesEtag:o,hash:i}){await this.removeAllObjects("category","emoji");const r=[this.addObjects("category",e),this.addObjects("emoji",t),this.setMeta({emojisEtag:n,messagesEtag:o,hash:i})];await Promise.all(r)}async getCategories(e){var t;const n=this.db.transaction("category","readonly").objectStore("category");let o=(await this.waitForRequest(n.getAll())).target.result.filter((e=>"component"!==e.key));if(e.showRecents&&o.unshift({key:"recents",order:-1}),null!=(t=e.custom)&&t.length&&o.push({key:"custom",order:10}),e.categories){const t=e.categories;o=o.filter((e=>t.includes(e.key))),o.sort(((e,n)=>t.indexOf(e.key)-t.indexOf(n.key)))}else o.sort(((e,t)=>e.order-t.order));return o}async getEmojis(e,t){const n=this.db.transaction("emoji","readonly").objectStore("emoji").index("category");return Gr((await this.waitForRequest(n.getAll(e.order))).target.result.filter((e=>e.version<=t)).sort(((e,t)=>null!=e.order&&null!=t.order?e.order-t.order:0)).map(Qr),t)}async searchEmojis(e,t,n,o){const i=[];return new Promise(((r,s)=>{const a=this.db.transaction("emoji","readonly").objectStore("emoji").openCursor();a.addEventListener("success",(s=>{var a;const c=null==(a=s.target)?void 0:a.result;if(!c)return r([...Gr(i,n),...t.filter((t=>es(t,e)))]);const l=c.value;es(l,e,o)&&l.version<=n&&i.push(Qr(l)),c.continue()})),a.addEventListener("error",(e=>{s(e)}))}))}async waitForRequest(e){return new Promise(((t,n)=>{e.onsuccess=t,e.onerror=n}))}withTransaction(e,t="readwrite",n){return new Promise(((o,i)=>{const r=this.db.transaction(e,t);r.oncomplete=o,r.onerror=i,n(r)}))}async removeAllObjects(...e){const t=this.db.transaction(e,"readwrite"),n=e.map((e=>t.objectStore(e)));await Promise.all(n.map((e=>this.waitForRequest(e.clear()))))}async addObjects(e,t){return this.withTransaction(e,"readwrite",(n=>{const o=n.objectStore(e);t.forEach((e=>{o.add(e)}))}))}}const rs="PicMo:recents";class ss extends class{}{constructor(e){super(),this.storage=e}clear(){this.storage.removeItem(rs)}getRecents(e){var t;try{return JSON.parse(null!=(t=this.storage.getItem(rs))?t:"[]").slice(0,e)}catch{return[]}}addOrUpdateRecent(e,t){const n=[e,...this.getRecents(t).filter((t=>t.hexcode!==e.hexcode))].slice(0,t);try{this.storage.setItem(rs,JSON.stringify(n))}catch{console.warn("storage is not available, recent emojis will not be saved")}}}class as extends ss{constructor(){super(localStorage)}}const cs={dataStore:os,theme:Lr,animate:!0,showCategoryTabs:!0,showPreview:!0,showRecents:!0,showSearch:!0,showVariants:!0,emojisPerRow:8,visibleRows:6,emojiVersion:"auto",i18n:{"categories.activities":"Activities","categories.animals-nature":"Animals & Nature","categories.custom":"Custom","categories.flags":"Flags","categories.food-drink":"Food & Drink","categories.objects":"Objects","categories.people-body":"People & Body","categories.recents":"Recently Used","categories.smileys-emotion":"Smileys & Emotion","categories.symbols":"Symbols","categories.travel-places":"Travel & Places","error.load":"Failed to load emojis","recents.clear":"Clear recent emojis","recents.none":"You haven't selected any emojis yet.",retry:"Try again","search.clear":"Clear search","search.error":"Failed to search emojis","search.notFound":"No results found",search:"Search emojis..."},locale:"en",maxRecents:50,custom:[]};var ls,us,ds,hs,ps;class fs{constructor(){sr(this,us),sr(this,hs),sr(this,ls,new Map)}on(e,t,n){cr(this,hs,ps).call(this,e,t,n)}once(e,t,n){cr(this,hs,ps).call(this,e,t,n,!0)}off(e,t){const n=cr(this,us,ds).call(this,e);rr(this,ls).set(e,n.filter((e=>e.handler!==t)))}emit(e,...t){cr(this,us,ds).call(this,e).forEach((n=>{n.handler.apply(n.context,t),n.once&&this.off(e,n.handler)}))}removeAll(){rr(this,ls).clear()}}ls=new WeakMap,us=new WeakSet,ds=function(e){return rr(this,ls).has(e)||rr(this,ls).set(e,[]),rr(this,ls).get(e)},hs=new WeakSet,ps=function(e,t,n,o=!1){cr(this,us,ds).call(this,e).push({context:n,handler:t,once:o})};const ms=!0;class gs extends fs{}class vs extends fs{}const ys=br("emojiCategory","categoryName","noRecents","recentEmojis");class ws extends Or{constructor({template:e,category:t,showVariants:n,lazyLoader:o}){super({template:e,classes:ys}),this.baseUIElements={categoryName:Or.byClass(ys.categoryName)},this.category=t,this.showVariants=n,this.lazyLoader=o}setActive(e,t,n){this.emojiContainer.setActive(e,t,n)}}const bs=new qr((({classes:e,emoji:t})=>`\n \n`)),xs=br("emojiButton");class Cs extends Or{constructor({emoji:e,lazyLoader:t,category:n}){super({template:bs,classes:xs}),this.emoji=e,this.lazyLoader=t,this.category=n}initialize(){this.uiEvents=[Or.uiEvent("focus",this.handleFocus)],super.initialize()}handleFocus(){this.category&&this.events.emit("focus:change",this.category)}activateFocus(e){this.el.tabIndex=0,e&&this.el.focus()}deactivateFocus(){this.el.tabIndex=-1}renderSync(){return super.renderSync({emoji:this.emoji,emojiContent:this.renderer.doRender(this.emoji,this.lazyLoader)})}}class ks{constructor(e,t,n=0,o=0,i=!1){this.events=new fs,this.keyHandlers={ArrowLeft:this.focusPrevious.bind(this),ArrowRight:this.focusNext.bind(this),ArrowUp:this.focusUp.bind(this),ArrowDown:this.focusDown.bind(this)},this.rowCount=Math.ceil(t/e),this.columnCount=e,this.focusedRow=n,this.focusedColumn=o,this.emojiCount=t,this.wrap=i,this.handleKeyDown=this.handleKeyDown.bind(this)}destroy(){this.events.removeAll()}on(e,t){this.events.on(e,t)}handleKeyDown(e){e.key in this.keyHandlers&&(e.preventDefault(),this.keyHandlers[e.key]())}setCell(e,t,n=!0){const o=this.getIndex();this.focusedRow=e,void 0!==t&&(this.focusedColumn=Math.min(this.columnCount,t)),(this.focusedRow>=this.rowCount||this.getIndex()>=this.emojiCount)&&(this.focusedRow=this.rowCount-1,this.focusedColumn=this.emojiCount%this.columnCount-1),this.events.emit("focus:change",{from:o,to:this.getIndex(),performFocus:n})}setFocusedIndex(e,t=!0){const n=Math.floor(e/this.columnCount),o=e%this.columnCount;this.setCell(n,o,t)}focusNext(){this.focusedColumn

0?this.setCell(this.focusedRow,this.focusedColumn-1):this.focusedRow>0?this.setCell(this.focusedRow-1,this.columnCount-1):this.wrap?this.setCell(this.rowCount-1,this.columnCount-1):this.events.emit("focus:underflow",this.columnCount-1)}focusUp(){this.focusedRow>0?this.setCell(this.focusedRow-1,this.focusedColumn):this.events.emit("focus:underflow",this.focusedColumn)}focusDown(){this.focusedRow`\n

\n`)),Es=br("emojiContainer");class _s extends Or{constructor({emojis:e,showVariants:t,preview:n=!0,lazyLoader:o,category:i,fullHeight:r=!1}){super({template:js,classes:Es}),this.fullHeight=!1,this.showVariants=t,this.lazyLoader=o,this.preview=n,this.emojis=e,this.category=i,this.fullHeight=r,this.setFocus=this.setFocus.bind(this),this.triggerNextCategory=this.triggerNextCategory.bind(this),this.triggerPreviousCategory=this.triggerPreviousCategory.bind(this)}initialize(){this.grid=new ks(this.options.emojisPerRow,this.emojiCount,0,0,!this.category),this.grid.on("focus:change",this.setFocus),this.grid.on("focus:overflow",this.triggerNextCategory),this.grid.on("focus:underflow",this.triggerPreviousCategory),this.uiEvents=[Or.uiEvent("click",this.selectEmoji),Or.uiEvent("keydown",this.grid.handleKeyDown)],this.preview&&this.uiEvents.push(Or.uiEvent("mouseover",this.showPreview),Or.uiEvent("mouseout",this.hidePreview),Or.uiEvent("focus",this.showPreview,{capture:!0}),Or.uiEvent("blur",this.hidePreview,{capture:!0})),super.initialize()}setFocusedView(e,t){if(e)if("string"==typeof e){const t=this.emojis.findIndex((t=>t.emoji===e));this.grid.setFocusedIndex(t,!1),setTimeout((()=>{var e,n,o,i;const r=this.emojiViews[t].el;r.scrollIntoView();const s=null==(e=r.parentElement)?void 0:e.previousElementSibling;(null==(o=null==(n=r.parentElement)?void 0:n.parentElement)?void 0:o.parentElement).scrollTop-=null!=(i=null==s?void 0:s.offsetHeight)?i:0}))}else"first"===e.row||0===e.row?this.grid.setCell(0,e.offset,t):"last"===e.row&&this.grid.setCell(this.grid.getRowCount()-1,e.offset,t)}setActive(e,t,n){var o;e?this.setFocusedView(t,n):null==(o=this.emojiViews[this.grid.getIndex()])||o.deactivateFocus()}renderSync(){return this.emojiViews=this.emojis.map((e=>this.viewFactory.create(Cs,{emoji:e,category:this.category,lazyLoader:this.lazyLoader,renderer:this.renderer}))),this.emojiElements=this.emojiViews.map((e=>e.renderSync())),super.renderSync({emojis:this.emojiElements,i18n:this.i18n})}destroy(){super.destroy(),this.emojiViews.forEach((e=>e.destroy())),this.grid.destroy()}triggerPreviousCategory(e){this.events.emit("category:previous",e)}triggerNextCategory(e){this.category&&this.events.emit("category:next",e)}setFocus({from:e,to:t,performFocus:n}){var o,i;null==(o=this.emojiViews[e])||o.deactivateFocus(),null==(i=this.emojiViews[t])||i.activateFocus(n)}selectEmoji(e){e.stopPropagation();const t=mr(e,this.emojis);t&&this.events.emit("emoji:select",{emoji:t,showVariants:this.showVariants})}showPreview(e){const t=e.target.closest("button"),n=null==t?void 0:t.firstElementChild,o=mr(e,this.emojis);o&&this.events.emit("preview:show",o,null==n?void 0:n.cloneNode(!0))}hidePreview(e){mr(e,this.emojis)&&this.events.emit("preview:hide")}get emojiCount(){return this.emojis.length}}const Ss=new qr((({classes:e,category:t,pickerId:n,icon:o,i18n:i})=>`\n

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

\n \n

\n`));class Ls extends ws{constructor({category:e,showVariants:t,lazyLoader:n,emojiVersion:o}){super({category:e,showVariants:t,lazyLoader:n,template:Ss}),this.showVariants=t,this.lazyLoader=n,this.emojiVersion=o}initialize(){this.uiElements={...this.baseUIElements},super.initialize()}async render(){await this.emojiDataPromise;const e=await this.emojiData.getEmojis(this.category,this.emojiVersion);return this.emojiContainer=this.viewFactory.create(_s,{emojis:e,showVariants:this.showVariants,lazyLoader:this.lazyLoader,category:this.category.key}),super.render({category:this.category,emojis:this.emojiContainer,emojiCount:e.length,icon:Pr[this.category.key]})}}class As extends _s{constructor({category:e,emojis:t,preview:n=!0,lazyLoader:o}){super({category:e,emojis:t,showVariants:!1,preview:n,lazyLoader:o})}async addOrUpdate(e){const t=this.el.querySelector(`[data-emoji="${e.emoji}"]`);t&&(this.el.removeChild(t),this.emojis=this.emojis.filter((t=>t!==e)));const n=this.viewFactory.create(Cs,{emoji:e});if(this.el.insertBefore(n.renderSync(),this.el.firstChild),this.emojis=[e,...this.emojis.filter((t=>t!==e))],this.emojis.length>this.options.maxRecents){this.emojis=this.emojis.slice(0,this.options.maxRecents);const e=this.el.childElementCount-this.options.maxRecents;for(let t=0;t`\n

\n \n ${r.get(`categories.${n.key}`,n.message||n.key)}\n

\n ${r.get("recents.none")}\n

\n`),{mode:"async"});const Os=new qr((({classes:e,category:t,pickerId:n,icon:o,i18n:i})=>`\n

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

\n \n

\n`));class Is{constructor(){this.elements=new Map}lazyLoad(e,t){return this.elements.set(e,t),e}observe(e){if(window.IntersectionObserver){const t=new IntersectionObserver((e=>{e.filter((e=>e.intersectionRatio>0)).map((e=>e.target)).forEach((e=>{const n=this.elements.get(e);null==n||n(),t.unobserve(e)}))}),{root:e});this.elements.forEach(((e,n)=>{t.observe(n)}))}else this.elements.forEach((e=>{e()}))}}const Ps=br("emojiArea"),Ms=new qr((({classes:e})=>`\n

\n`),{mode:"async"}),Bs={recents:class extends ws{constructor({category:e,lazyLoader:t,provider:n}){super({category:e,showVariants:!1,lazyLoader:t,template:Ts}),this.provider=n}initialize(){this.uiElements={...this.baseUIElements,recents:Or.byClass(ys.recentEmojis)},this.appEvents={"recent:add":this.addRecent},super.initialize()}async addRecent(e){await this.emojiContainer.addOrUpdate(e),this.ui.recents.dataset.empty="false"}async render(){var e;const t=null==(e=this.provider)?void 0:e.getRecents(this.options.maxRecents);return this.emojiContainer=this.viewFactory.create(As,{emojis:t,showVariants:!1,lazyLoader:this.lazyLoader,category:this.category.key}),await super.render({category:this.category,emojis:this.emojiContainer,emojiCount:t.length,icon:Pr[this.category.key]}),this.el}},custom:class extends ws{constructor({category:e,lazyLoader:t}){super({template:Os,showVariants:!1,lazyLoader:t,category:e})}initialize(){this.uiElements={...this.baseUIElements},super.initialize()}async render(){return this.emojiContainer=this.viewFactory.create(_s,{emojis:this.customEmojis,showVariants:this.showVariants,lazyLoader:this.lazyLoader,category:this.category.key}),super.render({category:this.category,emojis:this.emojiContainer,emojiCount:this.customEmojis.length,icon:Pr[this.category.key]})}}};class zs extends Or{constructor({categoryTabs:e,categories:t,emojiVersion:n}){super({template:Ms,classes:Ps}),this.selectedCategory=0,this.scrollListenerState="active",this.lazyLoader=new Is,this.categoryTabs=e,this.categories=t,this.emojiVersion=n,this.handleScroll=function(e,t){let n=null;return()=>{n||(n=window.setTimeout((()=>{e(),n=null}),t))}}(this.handleScroll.bind(this),100)}initialize(){this.appEvents={"category:select":this.handleCategorySelect,"category:previous":this.focusPreviousCategory,"category:next":this.focusNextCategory,"focus:change":this.updateFocusedCategory},this.uiElements={emojis:Or.byClass(Ps.emojiArea)},this.uiEvents=[Or.uiEvent("scroll",this.handleScroll)],super.initialize()}get focusableEmoji(){return this.el.querySelector('[tabindex="0"]')}async render(){this.emojiCategories=this.categories.map(this.createCategory,this);const e={};return this.categories.forEach(((t,n)=>{e[`emojis-${t.key}`]=this.emojiCategories[n]})),await super.render({emojis:await Promise.all(this.emojiCategories.map((e=>e.render())))}),this.lazyLoader.observe(this.el),window.ResizeObserver&&(this.observer=new ResizeObserver((()=>{const e=this.el.scrollHeight-this.scrollHeight;this.el.scrollTop-this.scrollTop==0&&e>0&&(this.el.scrollTop+=e),this.scrollHeight=this.el.scrollHeight,this.scrollTop=this.el.scrollTop})),this.emojiCategories.forEach((e=>{this.observer.observe(e.el)}))),this.el}destroy(){super.destroy(),this.emojiCategories.forEach((e=>{var t;null==(t=this.observer)||t.unobserve(e.el),e.destroy()}))}handleCategorySelect(e,t){this.selectCategory(e,t)}createCategory(e){const t=Bs[e.key]||Ls;return this.viewFactory.create(t,{category:e,showVariants:!0,lazyLoader:this.lazyLoader,emojiVersion:this.emojiVersion,provider:this.options.recentsProvider})}determineInitialCategory(){var e;return this.options.initialCategory&&this.categories.find((e=>e.key===this.options.initialCategory))?this.options.initialCategory:null==(e=this.categories.find((e=>"recents"!==e.key)))?void 0:e.key}determineFocusTarget(e){const t=this.emojiCategories.find((t=>t.category.key===e));return this.options.initialEmoji&&(null==t?void 0:t.el.querySelector(`[data-emoji="${this.options.initialEmoji}"]`))?this.options.initialEmoji:"button"}reset(e=!0){this.events.emit("preview:hide");const t=this.determineInitialCategory();t&&(this.selectCategory(t,{focus:this.determineFocusTarget(t),performFocus:e,scroll:"jump"}),this.selectedCategory=this.getCategoryIndex(t))}getCategoryIndex(e){return this.categories.findIndex((t=>t.key===e))}focusPreviousCategory(e){this.selectedCategory>0&&this.focusCategory(this.selectedCategory-1,{row:"last",offset:null!=e?e:this.options.emojisPerRow})}focusNextCategory(e){this.selectedCategory{var o;return e<(null==(o=this.emojiCategories[n+1])?void 0:o.el.offsetTop)})),o={changeFocusable:!1,performFocus:!1,scroll:!1};0===e?this.categoryTabs.setActiveTab(0,o):Math.floor(e)===Math.floor(t)||n<0?this.categoryTabs.setActiveTab(this.categories.length-1,o):this.categoryTabs.setActiveTab(n,o)}}const $s=new qr((({classList:e,classes:t,icon:n,message:o})=>`\n

${o}

\n`)),Fs=br("error","iconContainer","title");class Rs extends Or{constructor({message:e,icon:t="warning",template:n=$s,className:o}){super({template:n,classes:Fs}),this.message=e,this.icon=t,this.className=o}renderSync(){const e=[Fs.error,this.className].join(" ").trim();return super.renderSync({message:this.message,icon:this.icon,classList:e})}}const Ns=new qr((({classList:e,classes:t,icon:n,i18n:o,message:i})=>`\n

${i}

\n \n

\n`)),Ds=br("dataError");class Vs extends Rs{constructor({message:e}){super({message:e,template:Ns,className:Ds.dataError})}initialize(){this.uiElements={retryButton:"button"},this.uiEvents=[Or.childEvent("retryButton","click",this.onRetry)],super.initialize()}async onRetry(){this.emojiData?await this.emojiData.delete():await this.options.dataStore.deleteDatabase(this.options.locale),this.events.emit("reinitialize");const e=await _r(this.options.locale,this.options.dataStore,this.options.messages,this.options.emojiData,this.emojiData);this.viewFactory.setEmojiData(e),this.events.emit("data:ready",e)}}const Hs=br("preview","previewEmoji","previewName","tagList","tag"),qs=new qr((({classes:e,tag:t})=>`\n

${t}

\n`)),Us=new qr((({classes:e})=>`\n

\n`));class Ws extends Or{constructor(){super({template:Us,classes:Hs})}initialize(){this.uiElements={emoji:Or.byClass(Hs.previewEmoji),name:Or.byClass(Hs.previewName),tagList:Or.byClass(Hs.tagList)},this.appEvents={"preview:show":this.showPreview,"preview:hide":this.hidePreview},super.initialize()}showPreview(e,t){if(this.ui.emoji.replaceChildren(t),this.ui.name.textContent=e.label,e.tags){this.ui.tagList.style.display="flex";const t=e.tags.map((e=>qs.renderSync({tag:e,classes:Hs})));this.ui.tagList.replaceChildren(...t)}}hidePreview(){this.ui.emoji.replaceChildren(),this.ui.name.textContent="",this.ui.tagList.replaceChildren()}}const Ks=new qr((({classes:e,i18n:t})=>`\n \n`)),Ys=new qr((({classes:e,i18n:t})=>`\n

\n \n \n

\n`),{mode:"async"}),Xs=br("searchContainer","searchField","clearButton","searchAccessory","clearSearchButton","notFound");class Js extends Or{constructor({categories:e,emojiVersion:t}){super({template:Ys,classes:Xs}),this.categories=e.filter((e=>"recents"!==e.key)),this.emojiVersion=t,this.search=function(e,t){let n=null;return(...o)=>{n&&window.clearTimeout(n),n=window.setTimeout((()=>{e(...o),n=null}),t)}}(this.search.bind(this),100)}initialize(){this.uiElements={searchField:Or.byClass(Xs.searchField),searchAccessory:Or.byClass(Xs.searchAccessory)},this.uiEvents=[Or.childEvent("searchField","keydown",this.onKeyDown),Or.childEvent("searchField","input",this.onSearchInput)],super.initialize()}async render(){return await super.render(),this.searchIcon=Mr("search"),this.notFoundMessage=this.viewFactory.create(Rs,{message:this.i18n.get("search.notFound"),className:Xs.notFound,icon:"sad"}),this.notFoundMessage.renderSync(),this.errorMessage=this.viewFactory.create(Rs,{message:this.i18n.get("search.error")}),this.errorMessage.renderSync(),this.clearSearchButton=Ks.render({classes:Xs,i18n:this.i18n}),this.clearSearchButton.addEventListener("click",(e=>this.onClearSearch(e))),this.searchField=this.ui.searchField,this.showSearchIcon(),this.el}showSearchIcon(){this.showSearchAccessory(this.searchIcon)}showClearSearchButton(){this.showSearchAccessory(this.clearSearchButton)}showSearchAccessory(e){this.ui.searchAccessory.replaceChildren(e)}clear(){this.searchField.value="",this.showSearchIcon()}focus(){this.searchField.focus()}onClearSearch(e){var t;e.stopPropagation(),this.searchField.value="",null==(t=this.resultsContainer)||t.destroy(),this.resultsContainer=null,this.showSearchIcon(),this.events.emit("content:show"),this.searchField.focus()}handleResultsKeydown(e){this.resultsContainer&&"Escape"===e.key&&this.onClearSearch(e)}onKeyDown(e){var t;"Escape"===e.key&&this.searchField.value?this.onClearSearch(e):("Enter"===e.key||"ArrowDown"===e.key)&&this.resultsContainer&&(e.preventDefault(),null==(t=this.resultsContainer.el.querySelector('[tabindex="0"]'))||t.focus())}onSearchInput(e){this.searchField.value?(this.showClearSearchButton(),this.search()):this.onClearSearch(e)}async search(){var e;if(this.searchField.value)try{const t=await this.emojiData.searchEmojis(this.searchField.value,this.customEmojis,this.emojiVersion,this.categories);if(this.events.emit("preview:hide"),t.length){const n=new Is;this.resultsContainer=this.viewFactory.create(_s,{emojis:t,fullHeight:!0,showVariants:!0,lazyLoader:n}),this.resultsContainer.renderSync(),null!=(e=this.resultsContainer)&&e.el&&(n.observe(this.resultsContainer.el),this.resultsContainer.setActive(!0,{row:0,offset:0},!1),this.resultsContainer.el.addEventListener("keydown",(e=>this.handleResultsKeydown(e))),this.events.emit("content:show",this.resultsContainer))}else this.events.emit("content:show",this.notFoundMessage)}catch{this.events.emit("content:show",this.errorMessage)}}}const Zs=new qr((({classes:e})=>`\n

(Video) Getting Started with THREE.JS in 2021!

\n`)),Gs=br("variantOverlay","variantPopup"),Qs={easing:"ease-in-out",duration:250,fill:"both"},ea={opacity:[0,1]},ta={opacity:[0,1],transform:["scale3d(0.8, 0.8, 0.8)","scale3d(1, 1, 1)"]};class na extends Or{constructor({emoji:e,parent:t}){super({template:Zs,classes:Gs,parent:t}),this.focusedEmojiIndex=0,this.focusTrap=new Sr,this.animateShow=()=>Promise.all([yr(this.el,ea,Qs,this.options),yr(this.ui.popup,ta,Qs,this.options)]),this.emoji=e}initialize(){this.uiElements={popup:Or.byClass(Gs.variantPopup)},this.uiEvents=[Or.uiEvent("click",this.handleClick),Or.uiEvent("keydown",this.handleKeydown)],super.initialize()}animateHide(){const e={...Qs,direction:"reverse"};return Promise.all([yr(this.el,ea,e,this.options),yr(this.ui.popup,ta,e,this.options)])}async hide(){await this.animateHide(),this.events.emit("variantPopup:hide")}handleKeydown(e){"Escape"===e.key&&(this.hide(),e.stopPropagation())}handleClick(e){this.ui.popup.contains(e.target)||this.hide()}getEmoji(e){return this.renderedEmojis[e]}setFocusedEmoji(e){this.getEmoji(this.focusedEmojiIndex).tabIndex=-1,this.focusedEmojiIndex=e;const t=this.getEmoji(this.focusedEmojiIndex);t.tabIndex=0,t.focus()}destroy(){this.emojiContainer.destroy(),this.focusTrap.deactivate(),super.destroy()}renderSync(){const e=[{...this.emoji,skins:null},...(this.emoji.skins||[]).map((e=>({...e,label:this.emoji.label,tags:this.emoji.tags})))];return this.emojiContainer=this.viewFactory.create(_s,{emojis:e,preview:!1}),super.renderSync({emojis:this.emojiContainer}),e.length`\n

\n`)),ia=br("categoryTab","categoryTabActive","categoryButton");class ra extends Or{constructor({category:e,icon:t}){super({template:oa,classes:ia}),this.isActive=!1,this.category=e,this.icon=t}initialize(){this.uiElements={button:Or.byClass(ia.categoryButton)},this.uiEvents=[Or.childEvent("button","click",this.selectCategory),Or.childEvent("button","focus",this.selectCategory)],super.initialize()}renderSync(){return super.renderSync({category:this.category,icon:this.icon}),this.ui.button.ariaSelected="false",this.el}setActive(e,t={}){const{changeFocusable:n,performFocus:o,scroll:i}={changeFocusable:!0,performFocus:!0,scroll:!0,...t};this.el.classList.toggle(ia.categoryTabActive,e),n&&(this.ui.button.tabIndex=e?0:-1,this.ui.button.ariaSelected=e.toString()),e&&o&&(this.ui.button.focus(),i&&this.events.emit("category:select",this.category.key,{scroll:"animate",focus:"button",performFocus:!1})),this.isActive=e}selectCategory(){this.isActive||this.events.emit("category:select",this.category.key,{scroll:"animate",focus:"button",performFocus:!0})}}const sa=new qr((({classes:e})=>`\n

\n \n

\n`)),aa=br("categoryButtons","categoryButtonsContainer");class ca extends Or{constructor({categories:e}){super({template:sa,classes:aa}),this.activeCategoryIndex=0,this.categories=e}initialize(){this.keyBindings={ArrowLeft:this.stepSelectedTab(-1),ArrowRight:this.stepSelectedTab(1)},this.uiEvents=[Or.uiEvent("scroll",this.checkOverflow)],super.initialize()}checkOverflow(){const e=Math.abs(this.el.scrollLeft-(this.el.scrollWidth-this.el.offsetWidth))>1,t=this.el.scrollLeft>0;this.el.className="categoryButtonsContainer",t&&e?this.el.classList.add("has-overflow-both"):t?this.el.classList.add("has-overflow-left"):e&&this.el.classList.add("has-overflow-right")}renderSync(){return this.tabViews=this.categories.map((e=>this.viewFactory.create(ra,{category:e,icon:Pr[e.key]}))),super.renderSync({tabs:this.tabViews.map((e=>e.renderSync()))}),this.el}get currentCategory(){return this.categories[this.activeCategoryIndex]}get currentTabView(){return this.tabViews[this.activeCategoryIndex]}setActiveTab(e,t={}){this.checkOverflow();const n=this.currentTabView,o=this.tabViews[e];n.setActive(!1,t),o.setActive(!0,t),this.activeCategoryIndex=e}getTargetCategory(e){return e<0?this.categories.length-1:e>=this.categories.length?0:e}stepSelectedTab(e){return()=>{const t=this.activeCategoryIndex+e;this.setActiveTab(this.getTargetCategory(t),{changeFocusable:!0,performFocus:!0})}}}const la=[{version:15,emoji:String.fromCodePoint(129768)},{version:14,emoji:String.fromCodePoint(128733)},{version:13,emoji:String.fromCodePoint(129729)},{version:12,emoji:String.fromCodePoint(129449)},{version:11,emoji:String.fromCodePoint(129463)},{version:5,emoji:String.fromCodePoint(129322)},{version:4,emoji:String.fromCodePoint(9877)},{version:3,emoji:String.fromCodePoint(129314)},{version:2,emoji:String.fromCodePoint(128488)},{version:1,emoji:String.fromCodePoint(128512)}];function ua(){var e;const t=la.find((e=>function(e){const t=document.createElement("canvas").getContext("2d");if(t)return t.textBaseline="top",t.font="32px Arial",t.fillText(e,0,0),0!==t.getImageData(16,16,1,1).data[0]}(e.emoji)));return null!=(e=null==t?void 0:t.version)?e:1}function da(e,t){return Array.from({length:e},(()=>t)).join("")}function ha(e){const{emojiCount:t,classes:n,theme:o,className:i,categoryCount:r}=e;return`\n

\n ${(({showHeader:t,classes:n})=>t?`\n

\n ${(({showSearch:e,classes:t})=>e?`\n

\n `:"")(e)}\n ${(({showCategoryTabs:e,classes:t})=>e?`\n

\n ${da(r,`

`)}\n

\n `:"")(e)}\n

\n ${da(t,`

`)}\n

\n ${(({showPreview:e,classes:t})=>e?`\n

`)}\n

\n `:"")(e)}\n

\n `}const pa=new qr((e=>e.isLoaded?function(e){const{classes:t,theme:n,className:o=""}=e;return`\n

\n ${function({showHeader:e,classes:t}){return e?`\n

\n \n \n

\n `:""}(e)}\n

\n `}(e):ha(e))),fa=br("picker","skeleton","placeholder","searchSkeleton","searchInput","categoryTabsSkeleton","headerSkeleton","categoryTab","contentSkeleton","categoryName","emojiGrid","emoji","previewSkeleton","previewEmoji","previewName","tagList","tag","overlay","content","fullHeight","pluginContainer","header"),ma={emojisPerRow:"--emojis-per-row",visibleRows:"--row-count",emojiSize:"--emoji-size"};class ga extends Or{constructor(){super({template:pa,classes:fa}),this.pickerReady=!1,this.externalEvents=new vs,this.updaters={styleProperty:e=>t=>this.el.style.setProperty(ma[e],t.toString()),theme:e=>{this.el.classList.remove(this.options.theme),this.el.classList.add(e)},className:e=>{this.options.className&&this.el.classList.remove(this.options.className),this.el.classList.add(e)},emojisPerRow:this.updateStyleProperty.bind(this,"emojisPerRow"),emojiSize:this.updateStyleProperty.bind(this,"emojiSize"),visibleRows:this.updateStyleProperty.bind(this,"visibleRows")}}initialize(){this.uiElements={pickerContent:Or.byClass(fa.content),header:Or.byClass(fa.header)},this.uiEvents=[Or.uiEvent("keydown",this.handleKeyDown)],this.appEvents={error:this.onError,reinitialize:this.reinitialize,"data:ready":this.onDataReady,"content:show":this.showContent,"variantPopup:hide":this.hideVariantPopup,"emoji:select":this.selectEmoji},super.initialize(),this.options.recentsProvider}destroy(){var e,t;super.destroy(),null==(e=this.search)||e.destroy(),this.emojiArea.destroy(),null==(t=this.categoryTabs)||t.destroy(),this.events.removeAll(),this.externalEvents.removeAll()}clearRecents(){this.options.recentsProvider.clear()}addEventListener(e,t){this.externalEvents.on(e,t)}removeEventListener(e,t){this.externalEvents.off(e,t)}initializePickerView(){this.pickerReady&&(this.showContent(),this.emojiArea.reset(!1))}handleKeyDown(e){const t=e.ctrlKey||e.metaKey;"s"===e.key&&t&&this.search&&(e.preventDefault(),this.search.focus())}buildChildViews(){return this.options.showPreview&&(this.preview=this.viewFactory.create(Ws)),this.options.showSearch&&(this.search=this.viewFactory.create(Js,{categories:this.categories,emojiVersion:this.emojiVersion})),this.options.showCategoryTabs&&(this.categoryTabs=this.viewFactory.create(ca,{categories:this.categories})),this.currentView=this.emojiArea=this.viewFactory.create(zs,{categoryTabs:this.categoryTabs,categories:this.categories,emojiVersion:this.emojiVersion}),[this.preview,this.search,this.emojiArea,this.categoryTabs]}setStyleProperties(){this.options.showSearch||this.el.style.setProperty("--search-height-full","0px"),this.options.showCategoryTabs||(this.el.style.setProperty("--category-tabs-height","0px"),this.el.style.setProperty("--category-tabs-offset","0px")),this.options.showPreview||this.el.style.setProperty("--emoji-preview-height-full","0px"),Object.keys(ma).forEach((e=>{this.options[e]&&this.el.style.setProperty(ma[e],this.options[e].toString())}))}updateStyleProperty(e,t){this.el.style.setProperty(ma[e],t.toString())}reinitialize(){this.renderSync()}onError(e){const t=this.viewFactory.create(Vs,{message:this.i18n.get("error.load")}),n=this.el.offsetHeight||375;throw this.el.style.height=`${n}px`,this.el.replaceChildren(t.renderSync()),e}async onDataReady(e){const t=this.el;try{e?this.emojiData=e:await this.emojiDataPromise,"auto"===this.options.emojiVersion?this.emojiVersion=ua()||parseFloat("14.0"):this.emojiVersion=this.options.emojiVersion,this.categories=await this.emojiData.getCategories(this.options);const[n,o,i,r]=this.buildChildViews();await super.render({isLoaded:!0,search:o,categoryTabs:r,emojiArea:i,preview:n,showHeader:Boolean(this.search||this.categoryTabs),theme:this.options.theme,className:this.options.className}),this.el.style.setProperty("--category-count",this.categories.length.toString()),this.pickerReady=!0,t.replaceWith(this.el),this.setStyleProperties(),this.initializePickerView(),this.setInitialFocus(),this.externalEvents.emit("data:ready")}catch(e){this.events.emit("error",e)}}renderSync(){var e;let t=(null==(e=this.options.categories)?void 0:e.length)||10;if(this.options.showRecents&&(t+=1),super.renderSync({isLoaded:!1,theme:this.options.theme,showSearch:this.options.showSearch,showPreview:this.options.showPreview,showCategoryTabs:this.options.showCategoryTabs,showHeader:this.options.showSearch||this.options.showCategoryTabs,emojiCount:this.options.emojisPerRow*this.options.visibleRows,categoryCount:t}),this.el.style.setProperty("--category-count",t.toString()),!this.options.rootElement)throw new Error("Picker must be given a root element via the rootElement option");return this.options.rootElement.replaceChildren(this.el),this.setStyleProperties(),this.pickerReady&&this.initializePickerView(),this.el}getInitialFocusTarget(){if(typeof this.options.autoFocus<"u")switch(this.options.autoFocus){case"emojis":return this.emojiArea.focusableEmoji;case"search":return this.search;case"auto":return this.search||this.emojiArea.focusableEmoji;default:return null}if(!0===this.options.autoFocusSearch)return console.warn("options.autoFocusSearch is deprecated, please use options.focusTarget instead"),this.search}setInitialFocus(){var e;!this.pickerReady||null==(e=this.getInitialFocusTarget())||e.focus()}reset(e=!0){var t;this.pickerReady&&(this.emojiArea.reset(e),this.showContent(this.emojiArea)),null==(t=this.search)||t.clear(),this.hideVariantPopup()}showContent(e=this.emojiArea){var t,n;e!==this.currentView&&(this.currentView!==this.emojiArea&&(null==(t=this.currentView)||t.destroy()),this.ui.pickerContent.classList.toggle(fa.fullHeight,e!==this.emojiArea),this.ui.pickerContent.replaceChildren(e.el),this.currentView=e,e===this.emojiArea?(this.emojiArea.reset(),this.categoryTabs&&this.ui.header.appendChild(this.categoryTabs.el)):null==(n=this.categoryTabs)||n.el.remove())}hideVariantPopup(){var e;null==(e=this.variantPopup)||e.destroy()}isPickerClick(e){var t,n;const o=e.target,i=this.el.contains(o),r=null==(n=null==(t=this.variantPopup)?void 0:t.el)?void 0:n.contains(o);return i||r}async selectEmoji({emoji:e}){var t,n;(null==(t=e.skins)?void 0:t.length)&&this.options.showVariants&&!this.isVariantPopupOpen?this.showVariantPopup(e):(await(null==(n=this.variantPopup)?void 0:n.animateHide()),this.events.emit("variantPopup:hide"),await this.emitEmoji(e))}get isVariantPopupOpen(){return this.variantPopup&&!this.variantPopup.isDestroyed}async showVariantPopup(e){const t=document.activeElement;this.events.once("variantPopup:hide",(()=>{null==t||t.focus()})),this.variantPopup=this.viewFactory.create(na,{emoji:e,parent:this.el}),this.el.appendChild(this.variantPopup.renderSync()),this.variantPopup.activate()}async emitEmoji(e){this.externalEvents.emit("emoji:select",await this.renderer.doEmit(e)),this.options.recentsProvider.addOrUpdateRecent(e,this.options.maxRecents),this.events.emit("recent:add",e)}updateOptions(e){Object.keys(e).forEach((t=>{this.updaters[t](e[t])})),Object.assign(this.options,e)}}class va{constructor({events:e,i18n:t,renderer:n,emojiData:o,options:i,customEmojis:r=[],pickerId:s}){this.events=e,this.i18n=t,this.renderer=n,this.emojiData=o,this.options=i,this.customEmojis=r,this.pickerId=s}setEmojiData(e){this.emojiData=Promise.resolve(e)}create(e,...t){const n=new e(...t);return n.setPickerId(this.pickerId),n.setEvents(this.events),n.setI18n(this.i18n),n.setRenderer(this.renderer),n.setEmojiData(this.emojiData),n.setOptions(this.options),n.setCustomEmojis(this.customEmojis),n.viewFactory=this,n.initialize(),n}}var ya;class wa{constructor(e={}){sr(this,ya,void 0),ar(this,ya,new Map(Object.entries(e)))}get(e,t=e){return rr(this,ya).get(e)||t}}ya=new WeakMap;let ba=0;const xa=function(){let e=!1;return function(t){ms&&!e&&(function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&!(typeof document>"u")){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(t),e=!0)}}();function Ca(e){return function(e){if(Array.isArray(e))return ka(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return ka(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return ka(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ka(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n*{font-family:var(--ui-font)}.picmo-picker.skeleton{background:var(--background-color);border-radius:var(--border-radius);border:1px solid var(--border-color);font-family:var(--ui-font);width:var(--picker-width);color:var(--secondary-text-color)}.picmo-picker.skeleton *{box-sizing:border-box}.picmo-picker.skeleton .placeholder{background:var(--placeholder-background-color);position:relative;overflow:hidden}.picmo-picker.skeleton .placeholder:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 100%);animation:shine 2s infinite;content:""}.picmo-picker.skeleton .headerSkeleton{background-color:var(--secondary-background-color);padding-top:8px;padding-bottom:8px;display:flex;flex-direction:column;overflow:hidden;gap:8px;border-bottom:1px solid var(--border-color);width:var(--picker-width)}.picmo-picker.skeleton .searchSkeleton{padding:0 8px;height:var(--search-height)}.picmo-picker.skeleton .searchSkeleton .searchInput{width:100%;height:28px;border-radius:3px}.picmo-picker.skeleton .categoryTabsSkeleton{height:var(--category-tabs-height);display:flex;flex-direction:row;align-items:center;justify-self:center;width:calc(2rem * var(--category-count, 1))}.picmo-picker.skeleton .categoryTabsSkeleton .categoryTab{width:25px;height:25px;padding:2px;border-radius:5px;margin:.25em}.picmo-picker.skeleton .contentSkeleton{height:var(--content-height);padding-right:8px;opacity:.7}.picmo-picker.skeleton .contentSkeleton .categoryName{width:50%;height:1rem;margin:.5rem;box-sizing:border-box}.picmo-picker.skeleton .contentSkeleton .emojiGrid{display:grid;justify-content:space-between;gap:1px;padding:0 .5em;grid-template-columns:repeat(var(--emojis-per-row),calc(var(--emoji-size) * var(--emoji-size-multiplier)));grid-auto-rows:calc(var(--emoji-size) * var(--emoji-size-multiplier));align-items:center;justify-items:center;width:var(--picker-width)}.picmo-picker.skeleton .contentSkeleton .emojiGrid .emoji{width:var(--emoji-size);height:var(--emoji-size);border-radius:50%}.picmo-picker.skeleton .previewSkeleton{height:var(--emoji-preview-height);border-top:1px solid var(--border-color);display:grid;align-items:center;padding:.5em;gap:6px;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"emoji name" "emoji tags"}.picmo-picker.skeleton .previewSkeleton .previewEmoji{grid-area:emoji;border-radius:50%;width:var(--emoji-preview-size);height:var(--emoji-preview-size)}.picmo-picker.skeleton .previewSkeleton .previewName{grid-area:name;height:.8em;width:80%}.picmo-picker.skeleton .previewSkeleton .tagList{grid-area:tags;list-style-type:none;display:flex;flex-direction:row;padding:0;margin:0}.picmo-picker.skeleton .previewSkeleton .tagList .tag{border-radius:3px;padding:2px 8px;margin-right:.25em;height:1em;width:20%}.overlay{background:rgba(0,0,0,.75);height:100%;left:0;position:fixed;top:0;width:100%;z-index:1000}.content{position:relative;overflow:hidden;height:var(--content-height)}.content.fullHeight{height:calc(var(--content-height) + var(--category-tabs-height) + var(--category-tabs-offset));overflow-y:auto;scrollbar-color:var(--scrollbar-color) var(--scrollbar-background-color);scrollbar-width:thin}.content.fullHeight::-webkit-scrollbar{background:var(--scrollbar-background-color);width:1.1em}.content.fullHeight::-webkit-scrollbar-thumb{background:var(--scrollbar-color);background-clip:padding-box;height:1em;border-radius:.5em}.pluginContainer{margin:.5em;display:flex;flex-direction:row}.header{background-color:var(--secondary-background-color);padding-top:8px;padding-bottom:8px;display:grid;gap:8px;border-bottom:1px solid var(--border-color)}@media (prefers-reduced-motion: reduce){.placeholder{background:var(--placeholder-background-color);position:relative;overflow:hidden}.placeholder:after{display:none}}.picmo-picker .preview{border-top:1px solid var(--border-color);display:grid;align-items:center;gap:6px;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"emoji name" "emoji tags";height:var(--emoji-preview-height);box-sizing:border-box;padding:.5em;position:relative;background:var(--preview-background-color)}.picmo-picker .preview .previewEmoji{grid-area:emoji;font-size:var(--emoji-preview-size);font-family:var(--emoji-font);width:1.25em;display:flex;align-items:center;justify-content:center}.picmo-picker .preview .previewName{grid-area:name;color:var(--text-color);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.picmo-picker .preview .tagList{grid-area:tags;list-style-type:none;display:flex;flex-direction:row;padding:0;margin:0;font-size:.75em;overflow:hidden}.picmo-picker .preview .tag{border-radius:3px;background:var(--tag-background-color);color:var(--text-color);padding:2px 8px;margin-right:.25em;white-space:nowrap}.picmo-picker .preview .tag:last-child{margin-right:0}.picmo-picker .searchContainer{display:flex;height:var(--search-height);box-sizing:border-box;padding:0 8px;position:relative}.picmo-picker .searchContainer .searchField{background:var(--search-background-color);border-radius:3px;border:none;box-sizing:border-box;color:var(--text-color);font-size:.9em;outline:none;padding:.5em 2.25em .5em .5em;width:100%}.picmo-picker .searchContainer .searchField:focus{background:var(--search-focus-background-color)}.picmo-picker .searchContainer .searchField::placeholder{color:var(--search-placeholder-color)}.picmo-picker .searchContainer .searchAccessory{color:var(--search-icon-color);height:100%;position:absolute;right:1em;top:0;width:1.25rem;display:flex;align-items:center}.picmo-picker .searchContainer .searchAccessory svg{fill:var(--search-icon-color)}.picmo-picker .searchContainer .clearButton{border:0;color:var(--search-icon-color);background:transparent;cursor:pointer}.picmo-picker .searchContainer .clearSearchButton{cursor:pointer;border:none;background:transparent;color:var(--search-icon-color);font-size:1em;width:100%;height:100%;display:flex;align-items:center;padding:0}.picmo-picker .searchContainer .notFound [data-icon]{fill:#f3e265}.picmo-picker .variantOverlay{background:var(--overlay-background-color);border-radius:5px;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.picmo-picker .variantOverlay .variantPopup{background:var(--variant-popup-background-color);border-radius:5px;margin:.5em;padding:.5em;text-align:center;user-select:none;display:flex;align-items:center;justify-content:center}.customEmoji{width:1em;height:1em}@keyframes shine{to{transform:translate(100%)}}.picmo-picker .imagePlaceholder{width:2rem;height:2rem;border-radius:50%}.placeholder{background:#DDDBDD;position:relative}.placeholder:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 100%);animation:shine 2s infinite;content:""}\n');const t=function(e={}){return{...cs,...e,renderer:e.renderer||new Jr,recentsProvider:e.recentsProvider||new as}}(e),n=((null==t?void 0:t.custom)||[]).map((e=>({...e,custom:!0,tags:["custom",...e.tags||[]]}))),o=new gs,i=function(e){return _r(e.locale,e.dataStore,e.messages,e.emojiData)}(t),r=new wa(t.i18n);i.then((e=>{o.emit("data:ready",e)})).catch((e=>{o.emit("error",e)}));const s=new va({events:o,i18n:r,customEmojis:n,renderer:t.renderer,options:t,emojiData:i,pickerId:`picmo-${Date.now()}-${ba++}`}).create(ga);return s.renderSync(),s},window.darkTheme=Ar,qi.start(),window.isInViewport=function(e){var t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)},window.lazyLoadImages=function(){for(var e=document.getElementsByClassName("lazyload"),t=0;t1024&&(e.classList.contains("pinned")?(e.classList.remove("pt-10"),e.classList.remove("pt-1")):window.scrollY>50?(console.log("entered"+window.scrollY),e.classList.remove("pt-10"),e.classList.add("pt-1")):(e.classList.remove("pt-1"),e.classList.add("pt-10")))},window.notificationOpen=!1,window.notificationTimeout=null,window.notficationRemove=null,window.notification={show:function(e,t){clearTimeout(notificationTimeout),clearTimeout(notficationRemove),document.getElementById("notification")&&document.getElementById("notification").remove();var n="text-blue-400",o="Notice";switch(e){case"success":n="text-green-400",o="Success";break;case"warning":n="text-orange-400",o="Warning";break;case"error":n="text-red-400",o="Error"}var i='

\n \n

'+o+'

'+t+"

",r=document.createElement("div");r.className="fixed bottom-0 md:top-0 right-0 z-50 md:mt-3 md:mr-3 transition-all duration-300 ease-out transform translate-y-2 md:translate-y-0 md:translate-x-2 opacity-0",r.id="notification",r.innerHTML=i,document.getElementById("app").appendChild(r);for(var s=document.getElementsByClassName("close-notification"),a=0;a11){n=e.target.value.replace(/\D/g,"").match(/(\d{2})(\d{5})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+"-"+n[3]}}else if(3==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})/);e.target.value="("+n[1]+") "}else if(6==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})/);e.target.value="("+n[1]+") "+n[2]+" "}else if(10==t.length){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+" "+n[3]}else if(t.length>10){n=e.target.value.replace(/\D/g,"").match(/(\d{3})(\d{3})(\d{4})/);e.target.value="("+n[1]+") "+n[2]+" "+n[3]}})),window.checkoutComplete=function(e){var t=e.checkout.id;Paddle.Order.details(t,(function(e){console.log(e),document.getElementById("loadMsg").innerText="Finishing Up Your Order",document.getElementById("loading").classList.remove("invisible");var t=null;e&&void 0!==e.order&&void 0!==e.order.customer&&void 0!==e.order.customer.email&&(t=e.order.customer.email),axios.post("/paddle/checkout",{_token:document.querySelector("meta[name='csrf-token']").getAttribute("content"),email:t,checkout_id:e.checkout.checkout_id}).then((function(e){console.log(e.data),1==parseInt(e.data.status)&&("/tails/beta"==window.location.pathname?window.location="/tails/beta":"undefined"!=typeof redirectAfterPurchase?window.location=redirectAfterPurchase:window.location="/welcome")}))}))},window.cancelComplete=function(e){console.log("callback"),console.log(e);var t=e.checkout.id;axios.post("/paddle/cancel",{_token:document.querySelector("meta[name='csrf-token']").getAttribute("content"),id:t}).then((function(e){console.log(e.data),1==parseInt(e.data.status)&&(window.location="/settings/subscription")}))},document.getElementById("post_id")&&axios.post("/api/views/posts/"+document.getElementById("post_id").value).then((function(e){console.log(e)})),window.addEventListener("notification",(function(e){notification.show(e.detail.type,e.detail.message)})),window.addEventListener("show-notification",(function(e){showNotification(e.detail.amount,e.detail.message)})),window.contentModalOpen=!1,window.menuLoaded=!1,document.onkeydown=function(e){27==(e=e||window.event).keyCode&&(document.getElementById("content-modal").dispatchEvent(new CustomEvent("close-modal",{detail:{}})),document.getElementsByClassName("search-input")[0].blur())},window.returnBack=function(){window.history.back()},window.setMenuItemActive=function(e){var t,n,o=document.querySelector(".menu-item-active"),i=e.dataset.active;(i=(i=i.split(" ")).filter((function(e){return e})),console.log("adding: "),console.log(i),o)&&(n=o.classList).remove.apply(n,Ca(i));(t=e.classList).add.apply(t,Ca(i));var r=e.getElementsByTagName("svg")[0];r.classList.remove("group-hover:translate-x-0","-translate-x-1"),r.classList.add("translate-x-1","opacity-0")},window.appReady=function(){window.renderResponsiveFunctionality()},window.renderResponsiveFunctionality=function(){window.innerWidth<1024&&(window.app.leftMenuPinned=!1);for(var e=document.querySelectorAll(".main-dropdown-menu"),t=0;t{document.addEventListener("DOMContentLoaded",(function(e){checkForFloatingSushiAvailability()})),window.checkForFloatingSushiAvailability=function(){fetch("/points/floating_sp_eligibility").then((function(e){return e.json()})).then((function(e){if(1==parseInt(e)){var t=Math.floor(3*Math.random()+1);if(1==parseInt(t)){var n=Math.round(60*Math.random())+10;setTimeout((function(){window.showSushi()}),n*=1e3)}}}))},window.showSushi=function(){var e=Math.floor(9*Math.random())+1;floating({content:'

',number:1,duration:9,repeat:1,size:5})},window.sushiClick=function(e){e.classList.add("scale-110"),setTimeout((function(){e.classList.remove("scale-110"),e.classList.add("scale-0"),setTimeout((function(){e.remove()}),200)}),200),fetch("/points/floating_sp_eligibility",{headers:{"Content-Type":"application/json",Accept:"application/json","X-Requested-With":"XMLHttpRequest","X-CSRF-Token":document.querySelector("meta[name='csrf-token']").getAttribute("content")},method:"post",credentials:"same-origin"}).then((function(e){return e.json()})).then((function(e){1==parseInt(e)?showNotification(1,"Floating Sushi"):ahahah()}))},window.ahahah=function(){var e=document.createElement("div");e.id="ahahah",e.className="z-30 bottom-0 left-1/2 -translate-x-1/2 translate-y-full flex max-w-sm w-full justify-between fixed transition duration-200 ease-out transform bg-white rounded-t-lg shadow-2xl bg-white",e.innerHTML='

',document.body.appendChild(e),setTimeout((function(){document.getElementById("ahahah").classList.remove("translate-y-full"),document.getElementById("ahahah-video").play()})),setTimeout((function(){document.getElementById("ahahah").classList.add("translate-y-full"),setTimeout((function(){document.getElementById("ahahah").remove()}),200)}),3e3)},window.showNotification=function(e,t){var n=1==e?"":"s",o=document.createElement("div");o.id="sushi_points",o.className="bottom-0 left-1/2 flex justify-between transition -translate-x-1/2 duration-300 ease-out transform translate-y-64 theme-bg rounded-t-lg shadow-2xl",o.innerHTML='

+'+e+" Sushi Point"+n+'!

Nice Job! You\'ve just earned '+e+" Sushi Point"+n+' for accomplishing

',document.body.appendChild(o),new Audio("https://cdn.devdojo.com/assets/audio/coin.mp3").play(),t&&(document.getElementById("points_reason").innerHTML=t),setTimeout((function(){document.getElementById("sushi_points").classList.remove("translate-y-64")})),setTimeout((function(){document.getElementById("sushi_points").classList.add("translate-y-64"),setTimeout((function(){document.getElementById("sushi_points").remove()}),1e3)}),4e3)}},779:()=>{window.history.scrollRestoration="manual";var e=new Event("ajax-link-clicked");document.addEventListener("DOMContentLoaded",(function(t){var n=document.getElementById("content"),o=(document.getElementById("leftMenu"),document.getElementById("loading")),i=document.getElementById("footerjs"),r=!0,s=!1,a=["/tails","/wave","/saasadventure","/learn","/markdownx","/markdownx/docs","/wordsmith","/pro","/featured/info","/devblog","/sponsorship","/featured/info","/pricing","/halloween"];window.initializeSpa=function(){setTimeout((function(){for(var e=document.querySelectorAll("[data-href]"),t=document.querySelectorAll("a"),n=0;n{function e(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var o,i,r=[],s=!0,a=!1;try{for(n=n.call(e);!(s=(o=n.next()).done)&&(r.push(o.value),!t||r.length!==t);s=!0);}catch(e){a=!0,i=e}finally{try{s||null==n.return||n.return()}finally{if(a)throw i}}return r}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return t(e,n);var o=Object.prototype.toString.call(e).slice(8,-1);"Object"===o&&e.constructor&&(o=e.constructor.name);if("Map"===o||"Set"===o)return Array.from(e);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return t(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);nt.offsetTop&&(o.target.classList.toggle("is-pinned",o.intersectionRatio<1&&0!=o.intersectionRatio),o.target.classList.contains("is-pinned")&&window.innerWidth<1024?(document.getElementById("tocButtonMobile").classList.remove("translate-y-20"),document.getElementById("tocButtonMobile").classList.remove("opacity-0"),document.getElementById("backToTopButton").classList.remove("opacity-0"),document.getElementById("backToTopButton").classList.remove("translate-y-20")):(document.getElementById("tocButtonMobile").classList.add("translate-y-20"),document.getElementById("tocButtonMobile").classList.add("opacity-0"),document.getElementById("backToTopButton").classList.add("opacity-0"),document.getElementById("backToTopButton").classList.add("translate-y-20")))}),{threshold:[0,1]}).observe(t)},window.tocScrollFunctionality=function(){var e=-50;document.getElementById("header")&&(e=15),document.getElementById("post")&&(e+=document.getElementById("post").offsetTop);var t=windowContainer.pageYOffset;if(r&&(t=windowContainer.scrollTop),t=n[n.length-1].elementTop+e)s(n[n.length-1].list_item);else for(var o=0;o=n[o].elementTop+e&&t<=n[o+1].elementTop+e&&(n[o].list_item.classList.contains("active")||s(n[o].list_item))};window.anchorLinkClick=function(e){e.preventDefault();var t=window.innerWidth<1024?0:50;if(document.getElementById("header")&&(t=115,window.innerWidth<1024&&(t=115)),e.target.getAttribute("href")){var n=document.querySelector(e.target.getAttribute("href")).offsetTop+(document.getElementById("post").offsetTop+t);"#comments"==e.target.getAttribute("href")&&(n=function(e){for(var t=0;e;)t+=e.offsetTop,e=e.offsetParent;return t}(document.querySelector(this.getAttribute("href")))+t),window.scroll({top:n,left:0,behavior:"smooth"}),history.replaceState(void 0,void 0,this.getAttribute("href"))}},window.removeAnchorLinkListeners=function(){for(var e=0;e{"use strict";n.d(t,{Z:()=>r});var o=n(645),i=n.n(o)()((function(e){return e[1]}));i.push([e.id,".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}",""]);const r=i},95:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var o=n(645),i=n.n(o)()((function(e){return e[1]}));i.push([e.id,'.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity;white-space:normal}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}',""]);const r=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,o){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(o)for(var r=0;r{"use strict";n.d(t,{Z:()=>o});const o=function(){var e=0

FAQs

How hard is it to learn Threejs? ›

Three. js is a powerful library that many web developers are including in their projects to give their website that three-dimensional edge. It's incredibly easy to use, and we're sure that you'll find somewhere on your site to throw in a 3D model or two, so make sure to look more into Three.

Learn More ›

How long does it take to learn Threejs? ›

In 71 hours of video, this course will teach you the secrets to create the coolest WebGL websites with Three.js whether you are a beginner or an advanced developer. Joining Three.js Journey will give you lifetime access to a complete and easy to access course with 53 lessons.

Is it worth to learn three JS? ›

Its potential applications in various industries make it a technology worth exploring. If you are a web developer looking to create stunning 3D graphics on the web, Three. js is definitely worth considering.

Keep Reading ›

Is 1 year enough to learn JavaScript? ›

Here's the short answer: most programmers agree that it takes six to nine months to develop a working proficiency in JavaScript. And even then, you'll spend years learning new skills and developing your understanding of it.

Get More Info Here ›

Can I learn js in 3 days? ›

JavaScript basics

If you are coming from another programming language background, You will complete JS basics within 2 – 3 Days if you are busy. You might take one week to understand the basics if you are a beginner.

Find Out More ›

How much does a 3js developer earn? ›

₹5L - ₹9L (Employer Est.)

Learn More ›

Is three js complicated? ›

Three. js makes it relatively straightforward for us, as developers, to draw 3D objects and models to the screen. Without it, we would need to interface directly with WebGL, which, while not impossible, can make even the smallest game development project take an incredible amount of time.

Learn More ›

Is there anything better than Threejs? ›

WebGL, BabylonJS, Unity, D3. js, and PlayCanvas are the most popular alternatives and competitors to three.

What should I know before learning three JS? ›

As a three. js developer, you need to know some basic HTML and CSS, and some slightly less basic JavaScript. However, you don't need to be an expert in any of these things. If you are new to web development, don't worry because we'll cover everything you need to know as we go along, and in more depth in the Appendices.

Get More Info Here ›

What is the Python equivalent of three JS? ›

pythreejs is a Jupyter widgets based notebook extension that allows Jupyter to leverage the WebGL capabilities of modern browsers by creating bindings to the javascript library three. js.

Discover More ›

Why is js harder than Python? ›

Because of its flexibility, Javascript does not provide easy code readability or maintainability. To run Python code, you'll almost always need an interpreter. The ability to run Javascript code is built-in to most web browsers. It's a dynamically typed language as well.

Discover More ›

How to make three js fast? ›

General Tips

Object creation in JavaScript is expensive, so don't create objects in a loop. ...
The same goes for your render loop. ...
Always use BufferGeometry instead of Geometry , it's faster.
The same goes for the pre-built objects, always use the buffer geometry version ( BoxBufferGeometry rather than BoxGeometry ).

More items...

Read The Full Story ›

Can I use react with three JS? ›

react-three-fiber is an open-source react-renderer for three. js. It makes it easier to use three. js in React by exposing reusable and self-contained components from three.

Know More ›

How many hours a day should I study JavaScript? ›

Most successful coders agree you'll need to spend 2-3 hours a day for 6-9 months learning JavaScript and putting what you learn into practice to code at a hireable level. You can dedicate less time and still be successful but remember to adjust your expectations accordingly.

Know More ›

Which is the hardest programming language? ›

Malbolge. This language is so hard that it has to be set aside in its own paragraph. Malbolge is by far the hardest programming language to learn, which can be seen from the fact that it took no less than two years to finish writing the first Malbolge code.

View Details ›

Is JS easier than Python? ›

The answer: JavaScript is more difficult to master than Python. Python is usually the beginners-choice, especially for those who do not have any prior programming experience. Python code is notorious for being more readable, meaning that it is easier to understand (and write).

See Details ›

Is it worth learning JavaScript in 2023? ›

1. High Demand in the Job Market. One of the most significant benefits of learning Java and JavaScript is the high demand for these skills in the job market. Many companies still use these languages for their software development projects, and they will likely continue to do so in the future.

Know More ›

Is JavaScript enough to get a job? ›

It's not impossible to get a job as a web or mobile app developer if you know only Javascript. You may have even come across such developer stories occasionally on the internet. But it's not the norm. The majority of such job opportunities are offered as internships or training programs.

Read The Full Story ›

How much JavaScript do I need to know to get a job? ›

I'd say 60% core JS is enough to get a hired as a frontend dev but there's actually no exact value you can append to knowledge of a progamming language. My advice would be to know how JS interacts with web applications and how that interaction is consumed by users.

Find Out More ›

Are Web3 developers in demand? ›

Web3 Developers Are In High Demand

They are often hosted and managed by a single cloud provider. Instead, web3 developers build and deploy apps on blockchain networks or a decentralized network involving a variety of peer-to-peer nodes – or a combination of the two, referred to as decentralized applications or dapps.

What is the highest salary of JavaScript? ›

Javascript Developer salary in India ranges between ₹ 1.8 Lakhs to ₹ 12.0 Lakhs with an average annual salary of ₹ 4.2 Lakhs.

Discover More Details ›

Why tech salary is so high? ›

While tech careers have a relatively low barrier to entry in that you don't need a college degree or a high level of math and science skills to get started, the complexity of the roles do require an innate curiosity and an aptitude for problem solving. This is why tech salaries are higher – the jobs are often complex.

Tell Me More ›

What is the hardest topic in JavaScript? ›

The Hardest Concept in JavaScript: Asynchronous Programming

Yet, accurately understanding and using asynchronous programming can be difficult. Callbacks, promises, and async/await are just a few of the asynchronous programming constructs that JavaScript offers.

Discover More Details ›

What is harder than JavaScript? ›

Learning Java vs. JavaScript. Java is easier to learn than C and C++ as a point of interest, but JavaScript usually wins out as the most straightforward. Javascript is easy to learn because it is interpreted at runtime and does not require a lot of technology running behind the scenes.

Discover More Details ›

Which JavaScript frontend is easiest? ›

Vue. js is one of the simplest and most straightforward frontend frameworks. It is relatively small in size but does have a virtual DOM, a component-based architecture, and two-way data binding. All of these elements lead to great performance and ease the work associated with updating components and tracking changes.

Get More Info ›

What is the difference between Pixi and Threejs? ›

The biggest difference was with the Canvas renderer, where pixi's autodetect gives the same results as the WebGL (if slower) for the same code, but three. js's Canvas renderer doesn't support the Sprite type meaning to achieve portable code you have to use Particles.

Show Me More ›

What companies use Threejs? ›

Companies Currently Using Three. js

Company Name	Website	HQ Address
Planner 5D	planner5d.com	Meškeriotojų 33
NVIDIA	nvidia.com	2788 San Tomas Expy
KAYAC Inc.	kayac.com	Kamakura Syunjyu Sq. 2F 2-14-7 Komachi
CADdetails.com LTD	caddetails.com	368 Dufferin Ave

2 more rows

Learn More Now ›

What websites use three js? ›

Best selection of Three. js Website examples for your inspiration.

WEBSITE. Elynxir NFT. EVR. HM. Honorable Mention.
WEBSITE. Junni is... Junni. DEV. Award. ...
WEBSITE. Outpost. Outpost. ^PRO ...
WEBSITE. Rose Island. También. ^PRO ...
PROMOTED.
WEBSITE. Pixelynx Musicverse. EVR. HM. ...
WEBSITE. Zes Nullen. ARVIN LEEUWIS. DEV. ...
WEBSITE. Stillwater® Drexler. ^PRO

More items...

Explore More ›

Am I too old to learn JavaScript? ›

It's never too late to learn a programming language. Some job seekers who are older may initially doubt their ability to learn coding because of a lack of experience or fear of employment bias. But, the reality is that learning a new skill takes time and dedication, no matter your age.

View Details ›

Can you learn JavaScript in 3 weeks? ›

Generally, it takes around six to 12 weeks to learn the basics of JavaScript. This includes understanding its syntax, data types, operators, and programming concepts. Becoming an expert in the language often requires two to four years of experience.

Get More Info Here ›

What is the best age to learn JavaScript? ›

The early elementary years are the best age for a child to be introduced to coding. At this time, kids will use the ideal cognitive stage of development to sow seeds for more complex knowledge as they age and grow. The best of the best in coding often started taking an interest and learning to code around age 5 or 6.

Get More Info Here ›

Will Python replace JavaScript? ›

Your browser's rendering engine needs to have a JavaScript engine to execute JavaScript code. Fortunately, all modern web browsers are equipped with a JavaScript engine to execute JavaScript code natively on the client's device. This is not the case for other programming languages including Python.

Get More Info Here ›

What is the js equivalent to Numpy? ›

jsnumpy. It provides equivalent of Numpy in JavaScript. All functions works on ndArray also.

Find Out More ›

When to use three js? ›

Three. js uses WebGL which is JavaScript API used for rendering interactive 3D and 2D graphics in web browsers without using any plugins. With the use of WebGL, Three. js enables your browser to render smooth 3D animation and being cross-browser it provides immense leverage of multi-dimensional objects across the web.

Should I learn Python or JavaScript in 2023? ›

Yes, Python is a programming language worth learning in 2023. Python is an easy-to-learn and versatile language that boosts the coding skills of developers. As per a Statista survey, 48.2 percent of developers worldwide use Python.

Discover More Details ›

Should I learn Python or JavaScript first? ›

That's right—if you are setting out to learn your first programming language after handling HTML and CSS basics, you should start with JavaScript before Python, Ruby, PHP or other similar languages.

Tell Me More ›

What's the easiest programming language to learn? ›

The 5 Easiest Programming Languages

HTML and CSS. HTML, which stands for HyperText Markup Language, is one of the most common programming languages for beginners, as it's often seen as the most straightforward programming language to learn. ...
JavaScript. ...
Python. ...
C, C++, and C# ...
Java.

Get More Info ›

What can I do with three JS? ›

Three. js is a 3D JavaScript library that enables developers to create 3D experiences for the web. It works with WebGL, but you can make it work with SVG and CSS as well.

See Details ›

How to get hour in 24 hour format in JavaScript? ›

if (hrs < 10) hours = "0" + hours; if (mnts < 10) minutes = "0" + minutes; var times = hours + ":" + minutes + ":00"; And we will get the time in 24-hour format.

See Details ›

What is FPS in three JS? ›

Executing a 3D rendering at 60 Frames per Second (FPS) in our Three. js application is a guarantee for a fluid and enjoyable experience.

Find Out More ›

Can you self teach JavaScript? ›

There are countless ways to learn JavaScript easily — and no, you don't need to enroll in an undergraduate computer science program to do it. Online courses and self-led tutorials abound.

Discover More Details ›

Can you learn JavaScript in a month? ›

While JavaScript is a step up from the most fundamental web development skills (languages like HTML and CSS, which can be learned in under a month), you can still expect to learn JS basics in a matter of months, not years—and that's whether you learn through online classes or teach yourself through book study.

Get More Info ›

How long does it take to learn JavaScript on your own? ›

‌If you're learning on your own, it can take six to nine months to become proficient in JavaScript. Some of that time is spent learning how to think like a programmer — helpful for when you move on to learning other programming languages.

Tell Me More ›

Is three js popular? ›

js is the world's most popular JavaScript framework for displaying 3D content on the web. With three. js, you no longer need a fancy gaming PC or console to display photorealistic 3D graphics.

Find Out More ›

What language does three JS use? ›

JavaScript

Discover More Details ›

Can you use Blender with three JS? ›

To send the object to our Three. js project, we'll first need to point Blender to the Khronos glTF Blender Exporter script. To do this, go to File > User Preferences to open the User Preferences window. Under the File tab, click the “Scripts” folder icon.

Know More ›

What is the hardest 3D program to learn? ›

3ds Max is likely the most difficult software to learn on this list. Its UI is rather obtuse, so it may have the largest learning curve for users yet unfamiliar with 3D modeling.

View Details ›

How long does it take to learn 3 coding languages? ›

It typically takes 6-12 months to get a firm grasp on 3-4 programming languages. Traditional Degree: It takes about four years to complete a bachelor's degree in computer programming or computer science in a traditional college or university setting.

Read On ›

How long does it take to learn Unity 3D? ›

How Long Does it Take to Learn Unity? It can take around three to six months to master Unity. It could be less if you already have significant programming experience and game development skills. You can speed up the process by learning C# and Javascript before you get started with Unity.

Discover More ›

How long does it take to get good at 3D sculpting? ›

And if you are a beginner and only thinking about learning 3D Sculpting, you have to get down on a mission for at least 2-3 years to become a master. However, you will learn the basic sculpting process within 6 to 12 months, but mastering the art will require a couple of years.

See Details ›

Which is harder 2D or 3D? ›

Regarding 2D animation, the level of difficulty also depends on your skill level. If you can draw quickly and efficiently (getting the form right immediately), it will probably be easier for you. 3D animation is quicker because you don't need to animate every frame as you do with 2D animation.

Read The Full Story ›

What is the easiest language for 3D games? ›

The Top programming languages for gaming that a 3D graphic artist can rely on are mentioned

C++ ...
Java. ...
HTML5 and CSS3. ...
Javascript. ...
Python. ...
Unreal Script. ...
C# ...
Lua.

More items...

Nov 27, 2022

Explore More ›

How rare is it to be fluent in 3 languages? ›

What Is Means to Be Trilingual. Being trilingual means that you speak three languages with general fluency. Some estimates put the total of the world's trilingual speakers at just over 1 billion people. That's 13% of everyone on Earth!

Can I learn coding at 36? ›

Coding is a skill that can be learned at any age. Many people who learn to code later in life go on to have successful tech careers.

Read On ›

Can I become a coder in 3 months? ›

Most coders agree that it takes three to six months to be comfortable with the basics of coding. But you can learn coding faster or slower depending on your preferred pace.

See Details ›

What is the salary of Unity 3D game developer? ›

Unity Developer salary in India ranges between ₹ 1.5 Lakhs to ₹ 10.0 Lakhs with an average annual salary of ₹ 4.2 Lakhs. Salary estimates are based on 528 latest salaries received from Unity Developers.

Learn More ›

Is Unity 3D good for beginners? ›

In Conclusion. If you are a beginner, Unity 3D is a good choice to learn how to code and create a wide range of games. On the other hand, if you want better and better graphics, Unreal is better suited to your needs.

Videos

1. D3.js in 100 Seconds

(Fireship)

2. Getting Started with 3D in Javascript | three.js

(Mike Smith)

3. Three.js Crash Course for Absolute Beginners - 3D in the Browser

(DesignCourse)

4. Getting Started With Three.js! (2023)

(CodeWithMasood)

5. #3 Get Started with Three.js: A Beginner's Guide to Installing and Creating Your First Project

(Int Experiment)

6. D3.js - A Practical Introduction

(Academind)

Getting Started with Three JS (2023)

Tails

Wave

Devblog

MarkdownX

SAAS Adventure

Learn

Join78,322 other developers as we learn, build, and grow together.

Community

Rewards

Resources

Meet the Team

Help & Support

Sponsorships

Terms of Service

📦 Rendering a rotating Cube

💾 Loading a simple 3D model

🪐 Finding 3D Models

💡 Learning More

Comments (1)

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

\n \n ${r.get(`categories.${n.key}`,n.message||n.key)}\n

\n \n ${i.get(`categories.${t.key}`,t.message||t.key)}\n

${o}

${i}

'+o+'

+'+e+" Sushi Point"+n+'!

FAQs

How hard is it to learn Threejs? ›

Why is js harder than Python? ›

What is the highest salary of JavaScript? ›

What is the best age to learn JavaScript? ›

Can you self teach JavaScript? ›

Which is harder 2D or 3D? ›

Videos

References