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

我正在尝试将一个3D立方体添加到Kinetic JS画布，以显示x、y、z旋转。我找到了这篇文章。我使用的是3.8版，当我尝试使用Kinetic JS的4版遵循示例时，我遇到了这个错误

 Unable to get property 'appendChild' 

任何建议，解决它或更好的方法，包括三维立方体在画布上

完整项目

---

我发现了这个完美的例子，不幸的是它基于pre3d.js，我不知道如何与Kinetic js canvas集成

因此，我已成功修复了链接博客文章中的示例，请参见此处的结果：

与我上一篇文章相比，有几件事发生了变化

现在动力学初始化的方式有所不同：

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

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

此外，您应该提供HTML5提供的

canvas

元素，而不是围绕它的元素：

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

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

---

我还修复了您的JSFIDLE:，请查看。您忘了添加另一个带有id容器的

div

元素。

也许我应该自己回答：）我会调查；）如果你有时间，那就太好了，去做一个项目吧。JSFIDLE总是不错的；）。非常感谢Toni，您通过将简单的3D对象集成到2D画布中的解决方案是WebGL的一个很好的替代方案，因为当前浏览器的支持有限。这将是伟大的，如果动画是由鼠标控制类似于这个例子，也将有可能改变立方体的6个面板的图像。再次感谢。三维立方体是在三维环境中渲染还是在二维环境中渲染？在本例中，是在二维环境中渲染。这是因为我正在使用画布渲染器。