结合three.js和KineticJS——3D立方体 [英] Combining three.js and KineticJS - 3D cube

问题描述

我正在尝试向 Kinetic JS 画布添加一个 3D 立方体以显示 x、y、z 旋转.我发现这篇文章 http://www.tonicodes.net/blog/combining-three-js-and-kineticjs.我使用的是 3.8 版，当我尝试使用 Kinetic 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-pre3d-rotating-cube，不幸的是它基于 pre3d.js，我不知道如何与 Kinetic 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.

推荐答案

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

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 提供的 canvas 元素，而不是 Kinetic 包裹它的元素:

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 container 的 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立方体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！