AngularJS指令中的Three.JS對象渲染

Question

我目前正在嘗試將Three.JS集成到AngularJS指令中。 目前，我實際上只是在尋找概念驗證的執行方式，以后可以將其用作更復雜指令的樣板。

目前，我正在使用指令的link功能來設置Three.JS場景並啟動動畫。

場景渲染良好，動畫被稱為精細，但是我添加到場景中的對象沒有渲染。

我試過了：

1. 調整相機POV，位置，寬高比
2. 增加物體的尺寸
3. 調整對象的顏色

我不確定這是由於某種原因該對象只是出於視野/不可見而引起的，還是該對象不在場景中。 在render函數中，我確實使用console.log並確認在scene.traversal函數調用中找到了該對象，並且按預期調整了它的旋轉。

我已經確認相同的代碼可以渲染並為外部對象設置動畫

以下是完整的指令， 這是JSBin中的指令鏈接。

angular.module('nxGeometry', [])
  .directive('nxGeometry', function(){

    return {

      restrict: 'A',
      link: function(scope, element, attrs){

        // Scene variables

        var camera, scene, geometry, renderer, material, object, container;


        // Element dimensions

        scope.width           = element[0].offsetWidth;
        scope.height          = element[0].offsetHeight;
        scope.objectColor     = '#ffaa44';
        scope.backgroundColor = '#333333';

        // Initialization function

        scope.init = function(){


          container = angular.element('<div>')[0];

          element[0].appendChild(container);

          camera   = new THREE.PerspectiveCamera(20, scope.width / scope.height, 1, 1000);

              camera.position.x = 5;
              camera.position.y = 0;
              camera.position.z = 0;


          scene    = new THREE.Scene();

          geometry = new THREE.BoxGeometry(1,1,1);

          material = new THREE.MeshBasicMaterial({color: "#ffffff"});

          object   = new THREE.Mesh(geometry, material);

              object.position.x = 0;
              object.position.y = 0;
              object.position.z = 0;

              scene.add(object);

          renderer = new THREE.WebGLRenderer();

              renderer.setSize(scope.width, scope.height);
              renderer.setClearColor(scope.backgroundColor);

          container.appendChild(renderer.domElement);

        }; // @end scope.init

        scope.render = function(){

          camera.lookAt(scene);

          // Traverse the scene, rotate the Mesh object(s)
          scene.traverse(function(element){

            if(element instanceof  THREE.Mesh){

              element.rotation.x += 0.0065;
              element.rotation.y += 0.0065;
            }

          renderer.render(scene, camera);

          });

        }; // @end scope.render


        scope.animate = function(){

          requestAnimationFrame(scope.animate);
          scope.render();

        };

        scope.init();
        scope.animate();

      }

    };

  });

Answer 1

您的相機未對准物體。 只需將z增加到5，您的對象就會可見。

camera.lookAt(scene); 無法使用，因為您必須添加場景的位置。 像這個camera.lookAt(scene.position); 。

請在此處找到更新的代碼。

這些事情我已經改變了：

camera   = new THREE.PerspectiveCamera(50, scope.width / scope.height, 1, 1000);

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;

....
camera.lookAt(scene.position);