Transparency problem with SpriteNodeMaterial

by herve3d

HTML

<script src="https://threejs.org/build/three.js"></script>

<script src='https://threejs.org/examples/js/geometries/TeapotBufferGeometry.js'></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

<!-- NodeLibrary -->
<script src="https://threejs.org/examples/js/nodes/GLNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/RawNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/TempNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/InputNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/ConstNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/VarNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/FunctionNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/FunctionCallNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/AttributeNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/NodeBuilder.js"></script>
<script src="https://threejs.org/examples/js/nodes/NodeLib.js"></script>
<script src="https://threejs.org/examples/js/nodes/NodeMaterial.js"></script>

<!-- Accessors -->
<script src="https://threejs.org/examples/js/nodes/accessors/PositionNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/NormalNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/UVNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/ScreenUVNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/ColorsNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/CameraNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/ReflectNode.js"></script>
<script src="https://threejs.org/examples/js/nodes/accessors/LightNode.js"></script>

<!-- Inputs -->
<script...

JavaScript

var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
var plane, sprite1, crate;
var controls;

init();

function init() {

	//
	// Renderer / Controls
	//
  
	renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.z = 100;
	camera.target = new THREE.Vector3();

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 50;
	controls.maxDistance = 200;

	//
	// SpriteNode
	//

	// use scale to adjuste the real sprite size
	plane = new THREE.PlaneBufferGeometry( 1, 1 );

	// https://openclipart.org/detail/239883/walking-man-sprite-sheet
  var loarder = new THREE.TextureLoader();
  loarder.setCrossOrigin(''); //To be able to load a texture hosted externally
  var walkingManTexture = loarder.load( "https://i.imgur.com/K9dIKMV.png" );
	walkingManTexture.wrapS = walkingManTexture.wrapT = THREE.RepeatWrapping;

	// horizontal sprite-sheet animator

	function createHorizontalSpriteSheetNode( hCount, speed ) {

		var speed = new THREE.Vector2Node( speed, 0 ); // frame per second
		var scale = new THREE.Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet

		var uvTimer = new THREE.OperatorNode(
			new THREE.TimerNode(),
			speed,
			THREE.OperatorNode.MUL
		);

		var uvIntegerTimer = new THREE.Math1Node(
			uvTimer,
			THREE.Math1Node.FLOOR
		);

		var uvFrameOffset = new THREE.OperatorNode(
			uvIntegerTimer,
			scale,
			THREE.OperatorNode.MUL
		);

		var uvScale = new THREE.OperatorNode(
			new THREE.UVNode(),
			scale,
			THREE.OperatorNode.MUL
		);

		var uvFrame = new THREE.OperatorNode(
			uvScale,
			uvFrameOffset,
			THREE.OperatorNode.ADD
		);

		return uvFrame;

	}

	// sprites

	var spriteWidth = 20, spriteHeight = 20;

	scene.add( sprite1 = new...