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 = 64;
var context = canvas.getContext( "2d" );
var sprite = new THREE.ImageLoader().load( 'https://threejs.org/examples/textures/sprite0.jpg', function() {
//context.drawImage( sprite, 0, 0 );
context.fillStyle="rgba(255, 0, 0, 0.1)"
context.arc(32,32,10,0,2*Math.PI);
context.fill();
var texture = new THREE.CanvasTexture( canvas );
// the canvas is pre-multiplied, so it should be set to true
//texture.premultiplyAlpha = true;
var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
var material = new THREE.MeshBasicMaterial( { map: texture, transparent: true})
//*
material.blending = THREE.CustomBlending;
// if it is pre-multipled, this should be set to OneFactor, but setting
// it to SrcAlphaFactor (the default) will hide the issue
//material.blendSrc = THREE.OneFactor;
material.blendSrc = THREE.SrcAlphaFactor;
material.blendDst =...