Блог

Я пытаюсь совершить тур на 360 градусов, используя ThreeJS, и пытаюсь добавить кнопки, которые заставят вас перейти к следующей сцене.
Кнопки сделаны с использованием спрайта и значка png в качестве карты текстуры.
Я также пытаюсь создать анимацию перехода по мере изменения сцены, установив непрозрачность на 0, а затем на 1 для следующей сцены.
Но при включении прозрачности материала сцены спрайт получает черный фон.
Черный фон исчезает, когда прозрачность материала сцены установлена на значение false.
Я также попытался создать круглую форму с помощью html-холста, но получил тот же результат.
Изображения для описания проблемы:
Спрайт с прозрачностью материала сцены = истинный
Спрайт с прозрачностью материала сцены = ложь
Вот соответствующий фрагмент кода:

 //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();