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

Question

我正在尝试将一个3D立方体添加到Kinetic JS画布中，以显示x、y、z旋转。我找到了这篇文章http://www.tonicodes.net/blog/combining-three-js-and-kineticjs。我使用版本3.8进行了操作，当我尝试使用版本4的Kinetic JS跟随示例时，出现了以下错误：

 Unable to get property 'appendChild' 

任何建议，解决它或在canvas中包含3D立方体的更好方法。

完整项目http://jsfiddle.net/user373721/hXw6D/1/。

我找到了这个完美的例子http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube，不幸的是它是基于pre3d.js编写的，而我不知道如何与Kinetic JS canvas集成。

- hncl

---

也许我应该自己回答它 :) 我会研究一下的 ;) - Toni Petrina

如果你有时间，完成这个项目会非常棒。 - hncl

一个 jsfiddle 总是很好的 ;)。 - Kenneth Ito

Answer 1

我已经成功修复了来自博客文章的示例，请在此处查看结果：http://tonicodes.net/sandbox/html5/kthree/index.htm。

与我上一篇帖子相比，有几件事情发生了变化：

Kinetic 初始化现在是不同的：

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

此外，您应该使用HTML5提供的canvas元素，而不是Kinetic包装的元素。

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

我还修复了你的jsFiddle：http://jsfiddle.net/hXw6D/3/，可以看一下。你忘记添加另一个带有id为“container”的div元素。

- Toni Petrina

---

非常感谢你，托尼。你的解决方案将简单的3D对象集成到2D画布中，这是一个很好的替代WebGL的选择，因为当前浏览器的支持有限。如果动画可以像这个例子http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube一样由鼠标控制，那就太棒了。另外，是否可能将立方体的6个面板更改为图像？再次感谢。 - hncl

3D立方体是在3D环境还是2D环境中进行渲染的？ - olanod

在这种情况下，使用2D上下文。这是因为我正在使用CanvasRenderer。 - Toni Petrina