Сочетание kinetic.js и three.js af kinetic.js v 5?

Question

Читать статью:. http://architects.dzone.com/articles/combining-threejs-and

Кажется, однако после того, как Тэй kinetic.js против 5-> это решение больше не работает. Кто-нибудь смог найти обходной путь?

С наилучшими пожеланиями и поблагодарить вас

Jens

Answer 1

Three.js использовал холст элемент так использовал 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> 

Здесь холст = $ ("# контейнер холст") получить (0). используется для получения холста контейнера kinetic.js.