Question

是否存在任何材质可以使具有此材质的场景中的对象（无论在何处进行了可视化渲染）显示渲染器dom元素后面的dom元素中的任何内容？

换句话说，我需要对对象“做什么”？下方，这样只要“ B”没有阻止“？”，观看者就会看到“ D”而不是“ C”？

Rendered     |            Scene          | Lower DOM Element
             |                           |
             |                           |      D                                               
    B        |      B              C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                               
    B        |      B       ?      C     |      D                                                   
    B        |      B       ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    D        |              ?      C     |      D                                               
    C        |                     C     |      D         
    C        |                     C     |      D

在上面，应该将场景和下dom元素绝对定位，使其与顶部场景重叠。
该场景以鸟瞰图显示，用户从左侧看。

Answer 1

透明背景

有。您正在寻找WebGLRenderer alpha选项和setClearAlpha函数：

// Enables the canvas to be transparent
renderer = new THREE.WebGLRenderer({ alpha: true });

// Makes the backaground completely transparent
renderer.setClearAlpha(0);

您可以在此处的示例中看到：https://codepen.io/anon/pen/oQrPzO。

透明对象

听起来您有兴趣让渲染的对象充当画布后面dom中的“窗口”。这可以通过opacity材质设置来实现：

// Set up a renderer with a white background
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearAlpha(0);
renderer.setClearColor(0xffffff);

// ...
// Create a material to behave as a window
material = new THREE.MeshPhongMaterial({ opacity: 0.5, transparent: false });

将transparent选项设置为false是很重要的，这样就不会发生任何混合并将Alpha直接写入画布。这是另一个例子： https://codepen.io/anon/pen/oQrPzO。

希望有帮助！

当前div背后的三种JS资料

1 个答案: