Question

阅读文章： http://architects.dzone.com/articles/combining-threejs-and

然而，似乎在kinetic.js v.5->之后。这个解决方案不再起作用了。有没有人能够找到解决方法？

致以最诚挚的问候，谢谢

延

Answer 1

Three.js使用了canvas元素所以使用jquery来获取kineti.js阶段使用的画布，如下面的代码所示。

    <script>
        var camera, scene, renderer, geometry, material, mesh;
        var stage, layer3D, layerGUI;
        var animating = true;

        function init() {
            stage = new Kinetic.Stage({container: "container", width: 700, height: 700});
            layer3D = new Kinetic.Layer();
            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(75, 600 / 600, 1, 10000);
            camera.position.z = 1000;
            scene.add(camera);

            geometry = new THREE.CubeGeometry(200, 200, 200);
            material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);

            stage.add(layer3D);

            var canvas= layer3D.getCanvas();
            canvas = $("#container canvas").get(0);
            console.log( canvas );
            console.log( layer3D );
            renderer = new THREE.CanvasRenderer({ canvas: canvas });


            renderer.setSize(700, 700);

            var group = new Kinetic.Group({ draggable: true });
            layerGUI = new Kinetic.Layer();

            layerGUI.add(group);


            stage.add(layerGUI);
            render();
        }

        function animate() {
            // note: three.js includes requestAnimationFrame shim
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            if (animating) {
                mesh.rotation.x += 0.01;
                mesh.rotation.y += 0.02;
            }

            renderer.render(scene, camera);
            layerGUI.draw();
        }

        $(function () {
            init();
            animate();
        });
    </script>

这里canvas = $（＆＃34; #container canvas＆＃34;）。get（0）;用于获取kinetic.js容器的画布。

结合kinetic.js和three.js af kinetic.js v 5？

1 个答案: