3

x、y、z 回転を表示するために、3D キューブを Kinetic JS キャンバスに追加しようとしています。この記事http://www.tonicodes.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://tonicodes.net/sandbox/html5/kthree/index.htm .

前回の投稿からいくつかの点が変更されました。:

キネティック初期化は別の方法で行われるようになりました:

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

また、canvasKinetic がラップする要素ではなく、HTML5 によって提供される要素を提供する必要があります。

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

jsFiddle も修正しました: http://jsfiddle.net/hXw6D/3/、チェックしてください。divIDが containerの別の要素を追加するのを忘れました。

于 2013-03-31T13:46:11.197 に答える