three.js - 三个 JS Material 看当前 div 背后

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 元素应该是绝对定位的，以便它们与顶部的场景重叠。
• 该场景显示为鸟瞰图，用户从左侧观看。

标签： three.js

Answer 1

透明背景

有。您正在寻找WebGLRendereralpha 选项和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 。

希望有帮助！