结合three.js和KineticJS - 3D立方体

Question

我正在尝试将3D立方体添加到Kinetic JS画布以显示x，y，z旋转。我发现了这篇文章http://www.tonicodes.net/blog/combining-three-js-and-kineticjs。我使用的是3.8版，当我试图使用Kinetic JS的第4版时，我遇到了这个错误，

 Unable to get property 'appendChild' 

任何建议，解决它或在画布中包含3D立方体的更好方法。

完成项目http://jsfiddle.net/user373721/hXw6D/1/

我找到了这个完美的例子http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube，遗憾的是它基于pre3d.js，我不知道如何与Kinetic JS canvas集成。

Answer 1

所以我设法修改了链接博客文章中的示例，请在此处查看结果：http://tonicodes.net/sandbox/html5/kthree/index.htm。

我上一篇文章发生了一些变化：

现在动态初始化的方式不同了：

stage = new Kinetic.Stage({
    container: "container",
    width: 700,
    height: 700
});

此外，您应该提供HTML5提供的canvas元素，而不是围绕它的Kinetic包裹：

renderer = new THREE.CanvasRenderer({canvas: layer3D.getCanvas().getElement()});

我还修复了你的jsFiddle：http://jsfiddle.net/hXw6D/3/，检查一下。您忘记添加另一个{id>容器的div元素。