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

Question

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

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

场景渲染良好，动画调用正常，但我添加到场景中的对象没有渲染。

我试过：

调整相机视角、位置、纵横比
增加对象的大小
正在调整对象的颜色

我不确定是物体出于某种原因不在 view/invisible 中，还是物体不在场景中。在 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);

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

Three.JS object rendering in AngularJS Directive

javascript

three.js

angularjs