3

我正在尝试将 3D 立方体添加到 Kinetic JS 画布以显示 x、y、z 旋转。我发现这篇文章http://www.toncodes.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 画布集成。

4

1 回答 1

4

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

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

动力学初始化现在以不同的方式完成：

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

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

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

我还修复了您的 jsFiddle：http: //jsfiddle.net/hXw6D/3/，请查看。您忘记添加另一个id 为containerdiv的元素。

于 2013-03-31T13:46:11.197 回答