问题描述
我想一个3D魔方添加到动力学JS画布上显示的X，Y，Z轴旋转。我发现这篇文章 HTTP：//www.toni$c $ cs.net /博客/组合三-JS-和-kineticjs 。我曾与版本3.8，当我试图效仿采用动力学JS的我得到这个错误版本4，
I am trying to add a 3D cube to Kinetic JS canvas to show the x,y,z rotation. I found this article http://www.tonicodes.net/blog/combining-three-js-and-kineticjs. I worked with version 3.8, When I tried to follow the example using the version 4 of Kinetic JS I got this error,
Unable to get property 'appendChild'
任何建议，要解决它，或者更好的方法，包括3D魔方在画布上
Any suggestions, to solve it or a better method to include 3D cube in the canvas.
完整的项目 http://jsfiddle.net/user373721/hXw6D/1/
我发现这个完美的例子的http：// html5example.net/entry/html5-canvas/html5-canvas-$p$p3d-rotating-cube ，遗憾的是它是基于pre3d.js，我不知道如何与动力学JS帆布整合。
I found this perfect example http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube, unfortunately it is based on pre3d.js and I have no clue how to integrate with Kinetic JS canvas.
推荐答案
所以，我已成功地从链接的博客文章解决我的样本中，看到的结果是在这里：的
So I have managed to fix my sample from the linked blog post, see the result here: http://tonicodes.net/sandbox/html5/kthree/index.htm.
几件事情从我的最后一个职位变化：
Several things have changed from my last post.:
动力学初始化完成现在不同：
stage = new Kinetic.Stage({
container: "container",
width: 700,
height: 700
});
此外，你应该提供画布通过HTML5提供的元素，而不是一个动力学包围着它：
Also, you should supply canvas element provided by HTML5, not the one Kinetic wraps around it:
renderer = new THREE.CanvasRenderer({canvas: layer3D.getCanvas().getElement()});
我也固定你的jsfiddle： http://jsfiddle.net/hXw6D/3/ ，一探究竟。你忘了添加ID为另一个 DIV 元素的容器的。
I also fixed your jsFiddle: http://jsfiddle.net/hXw6D/3/, check it out. You forgot to add another div element with id container.
这篇关于结合three.js和KineticJS - 3D魔方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！