结合 THREE.WebGLRenderer 和 Kinetic.js 层答案

【问题标题】：Combine THREE.WebGLRenderer and Kinetic.js Layers结合 THREE.WebGLRenderer 和 Kinetic.js 层
【发布时间】：2014-01-30 07:45:49
【问题描述】：

伙计们，

我正在尝试在我的网络应用程序中结合 THREE.js 和 Kinetic.js。我在使用 THREE.WebGLRenderer 时遇到问题。如何设置我的视图，即我有一个由 THREE.WebGLRenderer 渲染的 3D 层，以及一个用于 2D 元素的单独层，例如标签等，使用 Kinetic.js？

我尝试为 WebGLRenderer 提供 Kinetic.Layer 元素实例的画布元素。但它不起作用。

this.renderer = new THREE.WebGLRenderer({ 抗锯齿：真，保留绘图缓冲区：真，画布：this.layer3D.getCanvas()._canvas });

到目前为止，我只找到了使用 THREE.CanvasRenderer 执行此操作的示例。

有什么想法吗？非常感谢。

【问题讨论】：

标签： three.js webgl kineticjs layer renderer

【解决方案1】：

画布可以有任一 2D 上下文或 3D 上下文，但不能同时具有两者，因为它们被认为是不兼容的。当您从动力学层传递 Canvas 时，它已经绑定了一个 2D 上下文。

但是，您可以在 GL 呈现的画布上添加另一个 HTML 元素（例如，DIV）。

【讨论】：

【解决方案2】：

您好，我只想说这可能是不可能的。据我所知 KineticJS 是基于 Canvas 的。所以你想做的只有使用 Canvas Renderer 才能实现。

我能想到的解决方法是，如果浏览器支持 WebGL，您也许可以将 webGL 元素放在 KineticJS 元素之上。

【讨论】：