javascript - 三.AngularJS Directive中的JS对象渲染

Question

我目前正在尝试将 Three.JS 集成到 AngularJS 指令中。目前，我实际上只是在寻找一个概念验证执行，我可以将其用作稍后更复杂指令的样板。

目前，我正在使用指令的 link 函数来设置 Three.JS 场景并启动动画。

场景渲染得很好，动画也被调用得很好，但我添加到场景中的对象没有渲染。

我已经尝试过:

1. 调整相机 POV、位置、宽高比
2. 增加对象的大小
3. 调整对象的颜色

我不确定这是否是由于某种原因该对象只是在视野之外/不可见的问题，或者该对象是否只是不在场景中。 在 render 函数中，我确实使用了 console.log 并确认在 scene.traversal 函数调用中找到了该对象及其旋转正在按预期进行调整。

我已经确认相同的代码在外部渲染和动画对象

以下是完整指令，以及 here is a link to it in 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);。

请查找更新后的代码here .

我改变了这些事情:

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);