JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js"
}
}
</script>
JavaScript
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js';
// init
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x333333);
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true
// ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓
// Sprite
// ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓
const canvasLabel = getCanvasLabel({
text: "My Label",
color: "white",
bgGradient: [
[0, '#4776E6'],
[1, '#8E54E9']
],
width: 2000,
height: 600,
padding: 50,
borderRadius: 200
});
const spriteTexture = new THREE.CanvasTexture(canvasLabel);
const sprite = new THREE.Sprite()
sprite.material.map = spriteTexture;
scene.add(sprite)
sprite.scale.set(0.200, 0.060, 1);
sprite.position.set(0.2, 0.15, 0);
// ⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑⇑
// animation
function animation( time ) {
controls.update();
renderer.render( scene, camera );
}
//------------------
// Draw canvas label method
//----------------
function getCanvasLabel({
text= "Label",
color= "white",
bgGradient= [
[0, '#4776E6'],
[1, '#8E54E9']
],
width= 200,
height= 60,
padding= 10,
borderRadius= 20
} = {}) {
const canvas = document.createElement('canvas');
canvas.width = width + (2 * padding);
canvas.height = height + (2 * padding);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
bgGradient.forEach(function(colorStop) {
...