相关疑难解决方法(0)

我正在使用一个案例构建器THREE.js,基础知识是我希望能够更改height/width/length盒子,旋转它,还可以更改盒子的背景颜色.

这是迄今为止:http: //design365hosting.co.uk/casebuilder3D/

尺寸更改的工作方式,以及框的拖动,现在我正在使用背景颜色更改.

我希望它的工作方式是使用透明的PNG作为框的面,并设置背景颜色,以便通过透明的PNG显示此背景颜色.

这就是我目前正在做的事情:

var texture = THREE.ImageUtils.loadTexture("images/crate.png");
materials.push(new THREE.MeshBasicMaterial({color:0xFF0000, map: texture}));

你可以看到我将材质设置为背景颜色为红色并覆盖透明PNG,问题是,three.js似乎忽略了背景颜色,只显示透明PNG,意味着没有透过颜色显示.

预期结果应该是带有重叠PNG的红色框.

希望有道理,任何人都可以帮忙吗？

请看看这个带有WebGL启用和禁用的演示.

当您在WebGL和画布渲染之间切换时(如果您有WebGL,它会在javascript检测时自动完成),只有线框的球体(左边的第一个)会发生变化.

启用WebGL后,您还可以看到球体背面的线框(由于它们具有非透明材质,因此隐藏在其他球体上的部分).

由于WebGL被禁用,您无法再欣赏透明度了.

我正在准备一个演示,我想为那些不支持WebGL的浏览器提供支持:提高透明度是至关重要的,因为我的想法完全基于它.我的演示文稿只有一个6面立方体,我想即使旧的CPU也应该没有问题在透明线框中呈现它.

three.js支持这个吗？有什么办法可以吗？我应该如何设置材料,以便即使使用画布渲染也能正常工作？

为了进一步证明我的观点,这是第二个演示.在WebGL和画布之间切换时的问题相同.

当前的线框材质以这种方式声明:

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } ); 

但只在WebGL中表现如预期.

Jsfiddle在这里

谢谢阅读!

ps我愿意采用任何替代Three.js,如果这不能做我需要的.我必须准备这个演示,但我没有自己的数学/几何知识,即使它像旋转三维立方体一样简单.

使用webgl:

用画布渲染: