JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
JavaScript
var camera, scene, renderer, mesh, mapBg;
init();
animate();
function init() {
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
//
scene = new THREE.Scene();
//
var x = document.createElement( "canvas" );
var xc = x.getContext( "2d" );
x.width = x.height = 128;
xc.fillStyle = "#ddd";
xc.fillRect( 0, 0, 128, 128 );
xc.fillStyle = "#555";
xc.fillRect( 0, 0, 64, 64 );
xc.fillStyle = "#999";
xc.fillRect( 32, 32, 32, 32 );
xc.fillStyle = "#555";
xc.fillRect( 64, 64, 64, 64 );
xc.fillStyle = "#777";
xc.fillRect( 96, 96, 32, 32 );
mapBg = new THREE.Texture( x );
mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
mapBg.repeat.set( 128, 64 );
mapBg.needsUpdate = true;
var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 200 ), materialBg );
meshBg.position.set( 0, 0, -1 );
scene.add( meshBg );
//
var canvas = document.createElement( "canvas" );
canvas.width = canvas.height = 128;
var context = canvas.getContext( "2d" );
var sprite = new THREE.ImageLoader().load( 'https://threejs.org/examples/textures/sprite0.jpg', function() {
context.drawImage( sprite, 0, 0 );
var texture = new THREE.CanvasTexture( canvas );
//texture.premultiplyAlpha = true;
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture, transparent: true, opacity: 0.8 })
// material.blending = THREE.CustomBlending;
// material.blendSrc = THREE.SrcAlphaFactor;
// material.blendDst = THREE.OneMinusSrcAlphaFactor;
// material.blendSrcAlpha = THREE.OneFactor;
// material.blendDstAlpha = THREE.OneMinusSrcAlphaFactor;
// material.blendEquation = THREE.AddEquation;
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
//
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(...