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

问题描述

我想一个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.

推荐答案

所以，我已成功地从链接的博客文章解决我的样本中，看到的结果是在这里：的 HTTP：//toni$c$cs.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提供的元素，而不是一个动力学包围着它：

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