Three.js / web VR: alpha делает черный цвет. как сделать его прозрачным?

Я использую стартовый комплект WebVR (упрощенный API - это оболочка для three.js) для имитации VR-тура. Проблема в том, что Renderer отображает альфа-черный цвет:

имитация виртуальной реальности

Я считаю, что Renderers - это VR.renderer, и я пытаюсь использовать renderer.setClearColor (0x000000, 0), чтобы сделать черный цвет прозрачным. это не сработало. Теперь я понятия не имею и полностью застрял.

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
<script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"></script>
</body>

</html>

JavaScript

var renderer = VR.renderer;
renderer.setClearColor( 0x000000, 0 );

var mark1 = VR.image('http://i.imgur.com/6Pae8y7.png').setScale(0.2);

mark1.text({text:"Focus"}).moveTo(0,0.8,0);

var focus = VR.camera.torus({radius:0.02,
           tube:0.01,
           color:"white",
           }).moveTo(0,0,-4);

var img1 = "http://i.imgur.com/7Wc2FZh.jpg";
var img2 = "http://i.imgur.com/hkf4fvk.jpg"
var img3 = "http://i.imgur.com/4nMNbYY.png";
var imgs = [img1, img2, img3];
var i = 0;

VR.panorama(imgs[i]);

VR.on('lookat', function(target){
    if (target === mark1.object)
        VR.vibrate(250);
        i=(i+1)%3;
        VR.panorama(imgs[i]);
    });

Вы можете поиграть с кодом здесь


three.js webvr
person Di Wang    schedule 14.06.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Из того, что я вижу, mark1.text () возвращает THREE.Object3D. Вам необходимо установить следующие свойства материала (после его вызова):

mark1.material.transparent=true;
mark1.material.alphaTest=0.5;

Обязательно измените значение alphaTest в соответствии с вашими потребностями.

person c0r3D    schedule 14.06.2017