We are delighted to announce support for a new set of green, NFT/metaverse, infrastructure, stablecoin, and payments tokens.

Axie Infinity __(AXS)__, Smooth Love Potion __(SLP)__, Terra __(LUNA)__, Moss Carbon Credit __(MCO2)__, and TerraUSD __(UST)__* are now available for custody and trading on our API/FIX and ActiveTrader applications for USD trading pairs, and on our mobile application and website for USD, GBP, EUR, CAD, AUD, HKD, and SGD pairs.

Wrapped TON Crystal __(WTON)__, Alchemy Pay __(ACH)__, Illuvium __(ILV)__, and USD Coin __(USDC)__ remain available for custody.

With the addition of these new tokens, we now offer trading and custody for more than __50 cryptos__, with an additional __18 cryptos__ available for custody. Learn more about all the cryptos we support, and more, [here](https://www.gemini.com/prices).

We are proud to be the __first regulated exchange to support MCO2 and SLP for trading in the U.S.__ and the __first to support AXS, SLP, LUNA, MCO2, and UST for trading in the UK__! 

The crypto industry continues to grow dynamically and our listing of MCO2 reinforces Gemini’s commitment, jump-started by our [Gemini Green initiative](https://www.gemini.com/blog/introducing-gemini-green-offsetting-bitcoin-carbon-emissions), to raise the bar for environmental stewardship across the entire crypto industry. We are also excited to add new NFT/metaverse, infrastructure, stablecoin, and payments tokens as blockchain and crypto continue to expand on a global scale.

We look forward to supporting new crypto projects on our mission to empower you, the individual, through crypto. 

Onward and Upward!

Team Gemini

*Note: DeFi presents unique risks. The listing of a DeFi token on Gemini does not indicate that Gemini or any regulatory authority has endorsed the underlying project or protocol. While some of our customers may choose to participate in the DeFi ecosystem, Gemini makes no recommendation that they do so.*

*We support the Ethereum (ERC-20) version of LUNA and UST. LUNA and UST purchased on Gemini can be withdrawn to Ethereum compatible wallets and swapped to the native version of LUNA and UST using a bridge.

*Updated: September 16, 2021*

Learn more about these new tokens below:

### Green Tokens

![Blog Inline MCO2](//images.ctfassets.net/jg6lo9a2ukvr/2YDNf9alKy79yLcEsaS0aj/d3b8cfe1331936abae09069c9b3ef73a/Blog_Inline_MCO2.png)
__MOSS Carbon Credit (MCO2)__

MCO2 is an ERC-20 utility token compliant with the Ethereum network. MCO2 holders can burn (or retire) their tokens on the moss.earth platform and receive a certificate that proves they have offset one tonne of carbon emissions. One MCO2 token is equal to one carbon credit (one metric tonne of carbon not released into the atmosphere) from a Verified Carbon Standard (VCS)-certified environmental project. VCS is the world’s most widely used carbon offset program, which uses a rigorous certification framework to verify carbon offsets. The proceeds from MCO2 tokenization have helped protect over 17 million hectares of the Amazon rainforest from deforestation, as of mid-2021. MOSS has directly contributed to avoiding 2 million tons of greenhouse gases from entering the atmosphere, as of mid-2021. You can see the [MCO2 price](http://www.gemini.com/prices/moss-carbon-credit) and more information by following the link.

### Metaverse Tokens

![Blog Inline AXS](//images.ctfassets.net/jg6lo9a2ukvr/3T26zPPUvkRNc345H3law2/eacc184f285cc827618f56780909a779/Blog_Inline_AXS.png)
__Axie Infinity (AXS)__

AXS is an ERC-20 utility token compliant with the Ethereum network. Players can earn AXS when they play various games within the Axie Infinity Universe and rank high on leadership boards. Axie Infinity is a Pokémon-inspired universe built on Ethereum where anyone can earn tokens through skilled gameplay and contributions to the ecosystem. Players build a land-based kingdom for their pets, or Axies, and can enter the game by purchasing Axies from other players on the Axie Infinity Marketplace. All in-game assets and Axie-related data can be accessed by 3rd parties, allowing community developers to build their tools and experiences in the Axie Infinity universe. You can see the [AXS price](http://www.gemini.com/prices/axie-infinity) and more information by following the link.

![Blog Inline SLP](//images.ctfassets.net/jg6lo9a2ukvr/BUuKCi31Q6l8eeJy4yLRC/ccb1ee61099b282a9f3d4b068eadfdaa/Blog_Inline_SLP.png)
__Smooth Love Potion (SLP)__

SLP is an ERC-20 utility token compliant with the Ethereum network and used on the Axie Infinity ecosystem. SLP can be earned as rewards by Axie Infinity players through battle or adventure mode. SLP can be used to breed new digital pets, known as Axies. Axie Infinity is a Pokémon-inspired universe built on Ethereum where anyone can earn tokens through skilled gameplay and contributions to the ecosystem. On Axie Infinity, players build a land-based kingdom for their pets, or Axies, and can enter the game by purchasing Axies from other players on the Axie Infinity Marketplace. All in-game assets and Axie-related data can be accessed by 3rd parties, allowing community developers to build their tools and experiences in the Axie Infinity universe. You can see the [SLP price](http://www.gemini.com/prices/smooth-love-potion) and more information by following the link.

![Blog Inline ILV](//images.ctfassets.net/jg6lo9a2ukvr/6rqhVC4t74MGLIzkZiN9RV/81df2aa8e5e694cd731dd941ffdcf32c/Blog_Inline_ILV.png)
__Illuvium (ILV)__

ILV is an ERC-20 governance token compliant with the Ethereum network that is used to govern the Illuvium DAO. The token also sees revenue streams from in-game purchases on IlluviDEX, Illuvium’s decentralized marketplace. ILV is further used as a reward token for locking liquidity within partnering DeFi platforms to incentivize token liquidity. Illuvium is a decentralized Role Playing Game (“RPG”) powered by blockchain technology and non-fungible tokens (NFTs). Its open world allows for users to search for in-game items and creatures (Illuvials) in the form of NFTs that can be used for in-game activities like battling, collecting, and trading. You can see the [ILV price](http://www.gemini.com/prices/illuvium) and more information by following the link.

### Infrastructure Tokens

![Blog Inline LUNA](//images.ctfassets.net/jg6lo9a2ukvr/7uuMSlApEyXGg0UGaLx3kL/3425b49fc906d94fdaad5a504eaa68c3/Blog_Inline_LUNA.png)
__Terra (LUNA)__

LUNA is the native staking token of the Terra protocol. We support the Ethereum (ERC-20) version of LUNA, which is a multi-chain asset. LUNA purchased on Gemini can be withdrawn to Ethereum compatible wallets and swapped to the native version of LUNA using a bridge. Terra is a blockchain protocol built on the Tendermint — Cosmos SDK that supports stable programmable payments and open financial infrastructure development. It is supported by a basket of fiat-pegged coins that are stabilized by LUNA. The Terra network aims to create a suite of stablecoins for decentralized finance (DeFi) and traditional finance (TraFi) platforms. Terra achieves price stability by algorithmically adjusting its supply according to fluctuations in demand for LUNA and its stablecoins (TerraUSD, TerraSDR, etc.). In Terra's consensus model, LUNA holders do not need to stake their tokens directly but can delegate them to a validator. This allows most LUNA holders who don't want to set up a validator node to participate in staking rewards. You can see the [LUNA price](http://www.gemini.com/prices/terra-ethereum) and more information by following the link.

![Blog Inline WTON](//images.ctfassets.net/jg6lo9a2ukvr/5UUDCj9ViCYAfEPAXAngMc/b1deed0923ff35c9f072072d1b2e7ea5/Blog_Inline_WTON.png)
__Wrapped TON Crystal (WTON)__

The TON Crystal (TON) token is the native asset for the Free TON blockchain, and WTON is the Ethereum-wrapped (ERC-20) version of TON. WTON holders can exchange their assets 1:1 with the native TON token via the ton bridge. TON can be used to pay fees to TON validators and by validators to stake and become eligible to generate blocks on the Free TON blockchain. TON also serves as a governance token to vote on proposals for the Free TON blockchain. Free TON is a smart-contract platform based on Telegram's now-defunct TON blockchain project. Its network uses a scaling technique called sharding that partitions storage and processing responsibilities to smaller validator groups, resulting in a chain with lower transaction latency and higher throughput than blockchains operating as a single state layer. You can see the [WTON price](http://www.gemini.com/prices/wrapped-ton-crystal) and more information by following the link. 

### Stablecoins

![Blog Inline UST](//images.ctfassets.net/jg6lo9a2ukvr/3xjn9ZP2KcUv5l1oJ6wKTv/b88b6bc075e2a9165ff045ee944ccc4e/Blog_Inline_UST.png)
__TerraUSD (UST)__

TerraUSD (UST) is the decentralized and algorithmic stablecoin of the Terra blockchain. Its value is pegged 1:1 to the US dollar, making it an ideal medium of exchange on DeFi and TraFi platforms. We support the Ethereum (ERC-20) version of UST, which is a multi-chain asset. UST purchased on Gemini can be withdrawn to Ethereum compatible wallets and swapped to the native version of UST using a bridge. Terra is a blockchain protocol built on the Tendermint — Cosmos SDK that supports stable programmable payments and open financial infrastructure development. It is supported by a basket of fiat-pegged coins that are stabilized by its native crypto-asset, LUNA. Gemini does not support or guarantee UST’s 1:1 peg to the US dollar. You can see the [UST price](http://www.gemini.com/prices/terrausd-ethereum) and more information by following the link. 

![Blog Inline USDC](//images.ctfassets.net/jg6lo9a2ukvr/60GhsTH5iZxa7VnUlDL5Za/f18db652ab0b42e98fe5122e28fd4039/Blog_Inline_USDC.png)
__USD Coin (USDC)__

Launched in October 2018, USD Coin (USDC) is a fiat-collateralized stablecoin built by the Centre consortium, a partnership between Circle and Coinbase created to develop price-stable crypto assets and network protocols. It offers the advantages of transacting with blockchain-based assets while mitigating price risk. USDC is an ERC-20 utility token compliant with the Ethereum network that is pegged 1:1 to the US dollar. It serves as an onramp to DeFi and as a means of digital payment. USDC can be transacted over the Ethereum blockchain in the same manner as Ether or any other ERC-20 asset. If a user wishes to redeem USDC they can send tokens to an address controlled by Centre members who will destroy the tokens and transfer fiat currency to the user's bank account. USDC’s existence on public blockchains allows traders and exchanges to use USDC as an alternative to fiat currencies. Gemini does not support or guarantee USDC’s 1:1 peg to the US dollar. You can see the [USDC price](http://www.gemini.com/prices/usd-coin) and more information by following the link. 

### Payments Tokens

![Blog Inline ACH](//images.ctfassets.net/jg6lo9a2ukvr/5Xyguj9A7vhsudoxvXFUTI/e8b3799da09f8a5c1f9600207b357de6/Blog_Inline_ACH.png)
__Alchemy Pay (ACH)__

ACH is an ERC-20 utility token compliant with the Ethereum network and powers the Alchemy Pay platform. ACH is used to incentivize and reward network participants, and uses of the ACH token include pledging, staking, and fee discounts. Alchemy Pay is a hybrid crypto-fiat payment infrastructure powered by the ACH token. Alchemy provides merchants and customers with multiple options for settlement of both fiat and crypto. Alchemy Pay is building products to help reduce the friction of the legacy financial system through its hybrid crypto-fiat model. Primary product features include Smart POS for crypto, a Crypto Payment Gateway and an in-app Payment SDK (for merchants). You can see the [ACH price](http://www.gemini.com/prices/alchemy-pay) and more information by following the link.

Gemini Now Supports Moss Carbon and Terra, in Addition to New Metaverse, Infrastructure, and Stablecoin Tokens

Today, we are delighted to announce the launch of Wrapped Filecoin __(EFIL)__. You can now easily convert [Filecoin (FIL)](https://www.gemini.com/prices/filecoin) into EFIL and move it seamlessly onto the Ethereum network, providing more opportunities to create value across the burgeoning DeFi ecosystem. 

All Gemini users who hold FIL can __convert their assets 1:1 into EFIL__ through the Gemini Mobile App and Website using the __wrap__ button on the FIL price page. You can also purchase FIL and immediately wrap it by toggling “Wrap Your Filecoin Purchase” before completing your order. You can unwrap your EFIL to receive FIL by visiting the [EFIL price page](https://exchange.gemini.com/buy/EFIL).*

Once you hold EFIL in your Gemini wallet, you can withdraw it to any Ethereum address you specify. You’ll be able to use EFIL across various Ethereum-based protocols, including DeFi platforms.

All minted __EFIL will be backed 1:1 by FIL held in Gemini Custody__, our institutional-grade storage system. As a qualified custodian regulated in New York, the safety of our clients’ assets is our top priority, and we employ top-of-the-line security, compliance, and operational protocols across our custody product — ensuring your assets remain secure.

We are also __excited to extend our collaboration with CoinList__, which will also offer EFIL wrapping for their customers, providing another avenue to interact with the EFIL smart contract while creating more opportunities for users across the Filecoin and Ethereum ecosystems. CoinList already supports [wBTC and tBTC](https://www.gemini.com/cryptopedia/wtbtc-vs-tbtc) minting on its platform, and will now allow users to instantly convert FIL for EFIL, and vice versa, via the CoinList Wallet.

To develop this wrapping functionality, we built our own open-source Ethereum smart contract that wraps FIL and converts it into an ERC-20 token — EFIL. The EFIL smart contract mints and burns EFIL, and ensures that the amount of available EFIL is equal to the amount of FIL held in Gemini Custody.

[Filecoin](https://gemini.com/blog/upcoming-support-for-filecoin) is the native token of the Filecoin Network, a decentralized data-sharing platform. FIL is used to purchase storage space on, and retrieve files (i.e., data) from, the [Filecoin Network](https://www.gemini.com/cryptopedia/filecoin-fil-democratizing-cloud-storage). Miners receive FIL for storing your files and verify their services via cryptographic proofs. This decentralized model offers a compelling alternative to existing centralized cloud storage offerings.

At Gemini, we offer trading for more than __45 cryptos__, with a further __14 cryptos__ available for custody. Learn about all the cryptos we support, and more, [here](https://www.gemini.com/prices).

As DeFi continues to show its far-reaching potential to redefine financial services, we are dedicated to empowering you, the individual, with more opportunities to engage across Ethereum’s DeFi ecosystem. __EFIL is just our first act__.

Onward and Upward!

Team Gemini

**[Fees apply](https://www.gemini.com/fees/mobile-fee-schedule)*

Gemini Launches Wrapped Filecoin (EFIL), Building a Bridge to DeFi

Today, we are thrilled to announce that [Brave Rewards users](http://www.gemini.com/brave) can __have their Basic Attention Tokens (BAT) seamlessly deposited into a Gemini account through the new Gemini User Wallet.__

One year ago we launched our [partnership with Brave](https://www.gemini.com/blog/gemini-integrates-with-brave-for-trading-and-wallet-support), providing crypto wallets for Brave Creators and adding the Gemini Trading Widget to the Brave browser. Brave is an internet browser with over 34 million monthly users, and compensates users with BAT if they opt in to view privacy-preserving Brave Ads. Our expanded integration now __allows Brave users to do much more with the BAT they’ve earned__ with just a few clicks. 

Once you connect your Brave Rewards wallet to Gemini, __you can spend your BAT with__ [__Gemini Pay__](https://www.gemini.com/pay) at participating retailers. Customers in the U.S. and Singapore can also __move BAT into__ [__Gemini Earn__](https://www.gemini.com/earn) __and earn up to 3.49% APY* on their holdings__. You’ll also benefit from our industry-leading security and compliance protocols, ensuring your crypto remains secure. 

From the Brave Rewards page, users can link their Brave Rewards wallet to an existing Gemini account, or easily create one, and up to four Brave Rewards wallets (in different user profiles, or on different devices) can be connected to a Gemini account. BAT payouts are sent as direct deposits to your Gemini account, simplifying the BAT earnings and redemption process.

Your Brave Rewards account balance will reflect the BAT balance in your Gemini account, including BAT purchased via the Gemini exchange, and all your BAT can be used within the Brave Rewards ecosystem.

The Gemini User Wallet for Brave Rewards is available in today’s Brave desktop update (version 1.29), and support for Gemini User Wallets in the Brave Android app is coming soon.

We are delighted to continue building our partnership with Brave as we provide you with more ways to build your crypto portfolio while ensuring you remain secure online.

Onward and Upward!

Team Gemini

**Gemini Earn rates are subject to change*

Gemini Now Provides an Integrated Crypto Experience for Brave Users

More From Team Gemini

We are thrilled to announce the launch of Gemini Earn. You can now __earn up to 7.4% APY on your crypto held at Gemini__. Interest is earned and compounded daily, and you can redeem your crypto at any time. Please note that interest rates will vary by crypto.

Start earning interest on your crypto in 3 easy steps:

1. Access [Gemini Earn](https://www.gemini.com/earn?utm_source=communications&utm_medium=blog&utm_campaign=gemini_earn) through the Mobile app icon or website tab. If you don’t already have a Gemini account, you can [create an account here](https://exchange.gemini.com/register).
![Gemini Earn Launch-Blog-Image 1](//images.ctfassets.net/jg6lo9a2ukvr/1P1oXKfE2YPxkMMrNhAo2Q/58ff0a1f5af43dd3ec5e5a4f7484606a/Gemini_Earn_Launch-Blog-Image_1.png)

2. Click or tap “Earn” and then select any amount of any crypto from your Gemini account to earn interest on.
![Gemini Earn Launch-Blog-Image 2-New (1) (final)](//images.ctfassets.net/jg6lo9a2ukvr/61RiHanlivEfPfqO3DZiJa/af93cc98d34dab76cf970ca6342cf364/Gemini_Earn_Launch-Blog-Image_2-New__1_.png)

3. Now, just sit back and watch your crypto earn up to 7.4% APY compounded daily!
![Gemini Earn Launch-Blog-Image 3](//images.ctfassets.net/jg6lo9a2ukvr/1lOzNddew5LHvsk3mCnhAN/e2bedb284c027b193054d3f5e55a4ade/Gemini_Earn_Launch-Blog-Image_3.png)

There is __no minimum balance__ required to get started and there are __no fees__ to transfer into or redeem from Gemini Earn.

Gemini Earn is now available to all Gemini customers in the United States and Singapore, and is available for 28 of the cryptos we support. Earn for the Gemini dollar, our USD stablecoin, will be coming soon.

We are excited to launch [Gemini Earn](https://www.gemini.com/earn?utm_source=communications&utm_medium=blog&utm_campaign=gemini_earn) and offer more opportunities for you to grow your portfolio and earn yield. A smart, diverse portfolio includes crypto — it’s an investment in your future self. Happy earning!

Onward and Upward!

Team Gemini

*Updated: April 12, 2021*

Today, we are proud to announce that Gemini has [joined the Take Five Charter](https://getstarted.gemini.com/take5/) in the UK alongside other leading financial institutions, banks, and fintechs. Led by UK Finance and backed by Her Majesty's Government, the campaign offers straightforward and impartial advice to help protect UK customers from financial fraud and scams. 

[Take Five](https://takefive-stopfraud.org.uk/) encourages customers to take several steps to consider if a certain situation is genuine or feels like a scam, including:

- __STOP__: Taking a moment to stop and think before parting with your money or information could keep you safe.
- __CHALLENGE__: Could it be fake? It’s ok to reject, refuse, or ignore any requests. Only criminals will try to rush or panic you.
- __PROTECT__: Contact your bank or financial institution immediately if you think you’ve fallen for a scam and report it to Action Fraud.

As one of the very few UK companies approved as a cryptoasset firm under the Money Laundering Regulations, Gemini’s Financial Crime program is subject to oversight and enforcement by the Financial Conduct Authority (FCA). 

To help identify potentially fraudulent situations, we recommend you visit the [Take Five website](https://takefive-stopfraud.org.uk/) to familiarise yourself with the most common types of online criminal activity and practical advice to protect yourself, your family, and your friends against online fraud. The site includes useful tips on how to spot a cryptocurrency scam, which can range from online advertisements to incentive marketing techniques via email and social media where consumers are pressured to buy crypto before a deadline. 

At Gemini, customer safety is our priority and we are committed to providing education, understanding, and robust internal controls to facilitate a safe and trusted trading environment for our customers.

Onward and Upward.

Blair Halliday  
Head of Gemini UK

Gemini Supports the UK’s Take Five to Stop Fraud Campaign

The Gemini Research & Development team recently redesigned Gemini’s security onboarding process from the ground up. As part of that redesign, Gemini now mints a unique non-fungible token (NFT) for every new employee.

The designers we worked with, [Lucas Hearl](https://lucasallendesigns.com/ "Lucas Hearl's website") and [Frank J. Guzzone](https://www.frankjguzzone.com/ "Frank J. Guzzone's website"), provided 1) design parameters for how to randomly generate a 2D image, and 2) a 3D render of a badge to embed in the onboarding page. While originally the plan was to provide the 2D badge image as the NFT, I thought it would be cooler to dynamically generate a GIF/WEBM of the 3D badge and put the 2D badge image on it.

This post will walk you through how I used [three.js](https://threejs.org/ "three.js") to do just that! The code we'll write here isn't _exactly_ the same as the code used in production because I'll be using CodePen to run the examples, but the process is the same.

## Preface: Slightly Above Beginner
While I will be explaining my entire thought process, I won't be going into detail about every feature of three.js that I'm using. If you've never used three.js before, their documentation is comprehensive and they have [a great tutorial series](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene "three.js tutorial") to get you started.

## Step 0: Show Me What You're Workin' With
We're going to take this static prerender of a badge provided to us by the designers,

<video autoplay muted loop>
  <source src="//videos.contentful.com/jg6lo9a2ukvr/32WdJ65g1Xs7dfB5mQanN7/59e6b6c1f4d8476d346b4a5a59892481/GEMINI_NFT_CARD_SPIN__1_.mp4" type="video/mp4">
  Unable to load video.
</video>

recreate the badge in three.js,

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 2.2" src="https://codepen.io/baron-gemini/embed/dyWBjoE?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/dyWBjoE">
  Step 2.2</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

and put this image on it,

![example NFT badge image](//images.ctfassets.net/jg6lo9a2ukvr/1126KO3Cfz566AcA0T6kz5/32b21d802c111c2de0fea97a3d070526/emblem__1_.png)

to make our final product:

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 4.2" src="https://codepen.io/baron-gemini/embed/VwbJdON?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/VwbJdON">
  Step 4.2</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Step 1: We Need a Box
The first thing we need is a project structure to work in and a basic badge to manipulate. I started with the structure of the three.js tutorial I linked to earlier and changed the z-dimension of the box to make it more badgelike.

```js
let geometry = new THREE.BoxGeometry(10, 10, 1);
```

I then added an [AmbientLight](https://threejs.org/docs/#api/en/lights/AmbientLight "three.js AmbientLight documentation") and switched the [MeshBasicMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMateria "three.js MeshBashMaterial documentation") (which doesn't interact with three.js lighting) to a [MeshStandardMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshStandardMaterial "three.js MeshStandardMaterial documentation") (which does):

```js
let light = new THREE.AmbientLight(0x414141, 10);

let material = new THREE.MeshStandardMaterial();
```

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 1" src="https://codepen.io/baron-gemini/embed/MWmMBwr?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/MWmMBwr">
  Step 1</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

I also chose a [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera "three.js PerspectiveCamera documentation") for the dynamic badge instead of the [OrthographicCamera](https://threejs.org/docs/#api/en/cameras/OrthographicCamera "three.js OrthographicCamera documentation") that the designers used.

## Step 2: Make the Box Shiny
Now that we have the beginnings of a badge, we need to make it look metallic instead of a boring flat white. We can do this by adding some parameters to the [MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial "three.js MeshStandardMaterial documentation") we're using for the box. While we're here, let's also tweak the depth of the box.

```js
let metal = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.2,
  metalness: 1
});
let geometry = new THREE.BoxGeometry(10, 10, 0.1);
let badge = new THREE.Mesh(geometry, metal);
```

We won't be able to see how reflective it is unless we add some point lights, so let's add placeholders for the softboxes from the render.

```js
let pointLight1 =
    new THREE.PointLight(0xffffff, 1, 100);
pointLight1.position.set(5,5,10);
let pointLight2 =
    new THREE.PointLight(0xffffff, 1, 100);
pointLight2.position.set(-5,-5,10);
let pointLight3 =
    new THREE.PointLight(0xffffff, 1, 100);
pointLight3.position.set(5,-5,10);
let pointLight4 =
    new THREE.PointLight(0xffffff, 1, 100);
pointLight4.position.set(-5,5,10);

...

scene.add(pointLight1);
scene.add(pointLight2);
scene.add(pointLight3);
scene.add(pointLight4);
```

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 2.1" src="https://codepen.io/baron-gemini/embed/yLbdqNP?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/yLbdqNP">
  Step 2.1</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

That's getting closer, but the render has a different kind of metal on the front than the sides, which we can approximate with some changes to our material parameters.

```js
let metal = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.2,
  metalness: 1
});
let roughMetal = new THREE.MeshStandardMaterial({
  color: 0xc0c0c0,
  roughness: 0.3,
  metalness: 0.99
});
let geometry = new THREE.BoxGeometry(10, 10, 0.1);
let badge = new THREE.Mesh(geometry,
    [metal, metal, metal, metal, roughMetal, metal]);
```

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 2.2" src="https://codepen.io/baron-gemini/embed/dyWBjoE?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/dyWBjoE">
  Step 2.2</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Step 3: What's on the Box?
Now we just have to put the randomly generated unique badge image on the front of the badge! For the purposes of this article we aren't going to generate the image on the fly, but in production the front of the badge is unique to each employee.

First, we need to load the image using a [TextureLoader](https://threejs.org/docs/#api/en/loaders/TextureLoader "three.js TextureLoader documentation") and put it into a [MeshPhongMaterial](https://threejs.org/docs/#api/en/materials/MeshPhongMaterial "three.js MeshPhongMaterial documentation"):

```js
let loader = new THREE.TextureLoader();
let badgeFront =
    loader.load('https://i.imgur.com/Dq3ypnq.png');
let badgeFrontMaterial =
    new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0x111111,
  shininess: 200,
  map: badgeFront,
  transparent: true
});
```

Putting it on the face of the badge in place of the rough metal means that _only_ the badge material we just made out of the image will reflect the light.

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 3.1" src="https://codepen.io/baron-gemini/embed/QWvXBjv?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/QWvXBjv">
  Step 3.1</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

To get this to work the way we want, we're going to have to do something tricky. First, we're going to make a separate [Mesh](https://threejs.org/docs/#api/en/objects/Mesh "three.js Mesh documentation") with the same [BoxGeometry](https://threejs.org/docs/#api/en/geometries/BoxGeometry "three.js BoxGeometry documentation"). Then we put the badge image on the same face as the rough metal (with no textures for the other surfaces), put it in the same location as the badge, and spin it at the same rate.

```js
let badge = new THREE.Mesh(geometry,
    [roughMetal, metal, metal, metal, metal, metal]);
let nifty = new THREE.Mesh(geometry,
    [badgeFrontMaterial]);

let badgeGroup = new THREE.Group();
badgeGroup.add(badge);
badgeGroup.add(nifty);

...

scene.add(badgeGroup);

...

badgeGroup.rotation.y += 0.015;
```

Now we do the same thing with the Gemini logo and put it on the back of our transparent badge.

```js
let badgeBack =
    loader.load('https://i.imgur.com/8McfMzg.png');
let badgeBackMaterial =
    new THREE.MeshPhongMaterial({
	color: 0xffffff,
  specular: 0x111111,
  shininess: 200,
  map: badgeBack,
  transparent: true
});

...

let nifty = new THREE.Mesh(geometry,
    [badgeFrontMaterial, badgeBackMaterial]);
```

When you pass an array of materials to a [Mesh](https://threejs.org/docs/#api/en/objects/Mesh "three.js Mesh documentation") created with a [BoxGeometry](https://threejs.org/docs/#api/en/geometries/BoxGeometry "three.js BoxGeometry documentation"), three.js assigns those materials to the faces of the box in a specific order. The current orientation of the badge, camera, and lights means that if we pass the `badgeFrontMaterial` as the first array element, three.js will place the "front" of the badge on the current bottom of the badge. 

There are a couple of ways to deal with this, but I chose to change the dimensions of the badge (which changes which side is the "front") and move the camera and lights around to face the new badge front. The net effect is that nothing changes visually, but it's easier for us to work with.

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 3.2" src="https://codepen.io/baron-gemini/embed/ZEKdjbx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/ZEKdjbx">
  Step 3.2</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Step 4: Softboxes or: How I Learned to Stop Worrying and Love RectAreaLightHelper
To get the softbox effect, we're going to replace our [PointLight](https://threejs.org/docs/#api/en/lights/PointLight "three.js PointLight documentation")s with [RectAreaLight](https://threejs.org/docs/#api/en/lights/RectAreaLight "three.js RectAreaLight documentation")s. While it might be possible for someone to picture in their head where the softboxes are relative to the badge and how they're being angled, I'm not that person. 

Thankfully three.js provides a [RectAreaLightHelper](https://threejs.org/docs/#examples/en/helpers/RectAreaLightHelper "three.js RectAreaLightHelper documentation") that shows where the light is positioned and what direction it's facing. I added one helper per light, added [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls "three.js OrbitControls documentation") to the scene, and commented out the rotation in animate() so I could navigate around the scene to see precisely where I was putting the lights and how they were angled.

To replicate the softboxes we take a still image of the back of the badge from the static render.

![still image of the back of the prerendered spinning badge](//images.contentful.com/jg6lo9a2ukvr/6mykQPNr4u4SzDFEsOhJCk/8f4a65007d7a3f79a9231f88fad93822/Screen_Shot_2021-04-23_at_3.49.11_PM.png)

Then we go softbox by softbox: pick a softbox from the still image, put a [RectAreaLight](https://threejs.org/docs/#api/en/lights/RectAreaLight "three.js RectAreaLight documentation") in with its [RectAreaLightHelper](https://threejs.org/docs/#examples/en/helpers/RectAreaLightHelper "three.js RectAreaLightHelper documentation"), and move it around and change its color and brightness until it looks right. 

This part is easier if you recognize that the designers are trying to make a virtual replica of a photography softbox setup and you [do some research about what softbox setups look like](https://www.google.com/search?tbm=isch&q=softbox%20setup&tbs=imgo:1 "Google Image search for "softbox setup""). Getting these in the right place and at the right brightness is really fiddly so I'll just show the OrbitControls and RectAreaLightHelpers enabled (click and drag your mouse to move around, scroll in and out to zoom).

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 4.1" src="https://codepen.io/baron-gemini/embed/RwVzBrN?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/RwVzBrN">
  Step 4.1</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

The final product!

<iframe height="500" style="width: 100%;" scrolling="no" title="Step 4.2" src="https://codepen.io/baron-gemini/embed/VwbJdON?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/baron-gemini/pen/VwbJdON">
  Step 4.2</a> by baron-gemini (<a href="https://codepen.io/baron-gemini">@baron-gemini</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

And, there we've done it! We took a static prerendered spinning badge and turned it into a dynamically generated three.js scene that puts the employee's unique NFT badge image on the face.

Onward and Upward!

Baron Oldenburg  
Principal Security Research Engineer

*Decentralization and transparency are central to crypto's ethos. At Gemini, we want to contribute to greater understanding and knowledge around fast-paced technical developments in crypto and help further drive innovation in our industry. We are proud to publish technical content developed by our engineers as we build the future of crypto.*

The Making of an NFT

Latest News

Earn Interest on Your Crypto with Gemini Earn

Earn up to 7.4% APY on your crypto held at Gemini!

Get Started

Gemini Exchange

Gemini Earn

US and SG

Gemini Credit Card

ActiveTrader

Gemini dollar

Gemini Custody

Gemini Clearing

Gemini Pay

Gemini Wallet

View all products

About

Careers

Support

Blog

Newsroom

Videos

Email Us

Feb 02, 2021

Earn Interest on Your Crypto with Gemini Earn

Gemini Now Supports Moss Carbon and Terra, in Addition to New Metaverse, Infrastructure, and Stablecoin Tokens

Gemini Launches Wrapped Filecoin (EFIL), Building a Bridge to DeFi

The most trusted crypto-native finance platform

Create a free Gemini account in minutes