结合THREE.WebGLRenderer和Kinetic.js图层

Question

He Guys，

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

我试图给WebGLRenderer一个Kinetic.Layer元素实例的canvas元素。但它不起作用。

   this.renderer = new THREE.WebGLRenderer（{         antialias：是的，         preserveDrawingBuffer：true，         canvas：this.layer3D.getCanvas（）._ canvas       }）; 的

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

想法有人吗？非常感谢。

Answer 1

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

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

Answer 2

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

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