Estoy tratando de hacer un recorrido 360 usando ThreeJS, y estoy tratando de agregar botones que lo hagan pasar a la siguiente escena.
Los botones están hechos usando sprite y un ícono png como mapa de textura.
También estoy tratando de crear una animación de transición a medida que cambia la escena al establecer la opacidad en 0 y luego en 1 para la siguiente escena.
Pero cuando se habilita la transparencia del material de la escena, el sprite obtiene un fondo negro.
Los fondos negros desaparecen cuando la transparencia del material de la escena se establece en falso.
También he intentado crear una forma circular con lienzo html pero obtengo el mismo resultado.
Imágenes para describir el problema:
Sprite con material de escena transparencia = verdadero
Sprite con material de escena transparencia = falso
Aquí está la pieza de código relevante:

 //Scene and camera const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 200 ); //Scene material const geometry = new THREE.SphereGeometry( 15, 32, 16 ); const texture = new THREE.TextureLoader().load("src/360.jpg"); texture.wrapS = THREE.RepeatWrapping; texture.repeat.x = -1; const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide, transparent : false } ); material.opacity = 1; const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); //Renderer const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //Control const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.rotateSpeed = 0.2; controls.enableZoom = false; camera.position.set(0.1,0,0); controls.update(); //tooltip const SpriteMap = new THREE.TextureLoader().load( 'src/sprite.png' ); const SpriteMaterial = new THREE.SpriteMaterial( { map: SpriteMap } ); const sprite = new THREE.Sprite( SpriteMaterial ); const position = new THREE.Vector3(3,0,0); sprite.position.copy(position); scene.add( sprite ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();