Three.js / web VR.：alpha 渲染为黑色。如何设置为透明？答案

【问题标题】：Three.js / web VR.: alpha renders black. how to set it to transparent?Three.js / web VR.：alpha 渲染为黑色。如何设置为透明？
【发布时间】：2017-06-15 20:04:56
【问题描述】：

我正在使用WebVR starter kit（简化的API 是three.js 的包装器）来模拟VR 游览。问题是渲染器渲染 alpha black：

VR simulation

我相信渲染器是 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]);
    });

你可以玩here中的代码

【问题讨论】：

标签： three.js webvr

【解决方案1】：

据我所见，mark1.text() 返回一个 THREE.Object3D。您需要设置以下材料属性（调用后）：

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

确保更改 alphaTest 值以满足您的需要。

【讨论】：