请看一下this启用和禁用 WebGL 的演示。
当您在 WebGL 和 Canvas 渲染之间切换时(当 JavaScript 检测您是否有 WebGL 时,它会自动完成),仅线框球体(左侧第一个球体)会发生变化。
启用 WebGL 后,您还可以看到球体背面的线框(该部分隐藏在其他球体上,因为它们具有不透明 Material )。
由于 WebGL 被禁用,您无法再欣赏透明度。
我正在准备一个演示,我想为那些不支持 WebGL 的浏览器提供支持:保持透明度至关重要,因为我的想法完全基于它。我的演示只有一个 6 面立方体,我想即使是旧的 CPU 也应该可以毫无问题地以透明线框呈现它。
Three.js 支持这个吗?我有什么办法可以做到吗?我应该如何设置 Material ,使其即使在 Canvas 渲染下也能正常工作?
为了进一步证明我的观点,here's第二个演示。在 WebGL 和 canvas 之间切换时出现同样的问题。
当前线框 Material 是这样声明的:
new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } );
但仅在 WebGL 中按预期运行。
感谢您的阅读!
附:如果这不能满足我的需要,我愿意采用 Three.js 的任何替代方案。我必须准备这个演示,但我没有数学/几何知识来自己完成此操作,即使它像旋转 3d 立方体一样简单。
使用 webgl:
使用 Canvas 渲染:
最佳答案
注意:这个问题是关于 CanvasRenderer
的,它已从 Three.js 库中删除。
在使用 CanvasRenderer 时,适用于您的情况的技巧是在同一位置创建两个相同的立方体 - 第二个立方体是翻转的。为了方便起见,您可以将它们都添加到父对象中,但这不是必需的。
var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 } );
var wireframeMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide } );
var cube = new THREE.Mesh( geometry, wireframeMaterial );
parent.add( cube );
var cube2 = new THREE.Mesh( geometry, wireframeMaterial2 );
parent.add( cube2 );
三.js r.70
关于canvas - Three.js Canvas 渲染和透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15793040/