javascript - 在 Angular JS 应用程序上注入(inject) ThreeJs 模型

Question

这是一个非常普遍的问题。 我正在使用 Angular Js (v1.5/1.6) 构建一个 Web 应用程序，并且希望使用三个 Js 添加一些小型 3D 动画模型。

我已经尝试过设置一些小东西，但 Angular 拒绝所有三种 Js 方法...因此，如果你们中有人知道或已经看过该领域的任何教程、书籍、文章，请随时分享。

谢谢大家。

Answer 1

有很多关于如何集成 ThreeJS 和 Angular 1/2 的示例。

根据我的经验，实现这一目标的最佳方法是创建一个指令来初始化 ThreeJS(创建相机、场景等...)，并且像任何其他指令一样与 Controller 通信并抛出范围(使用 $watch) .

例如:

angular.module('nxGeometry', []).directive('nxGeometry', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
              var camera, scene, geometry, renderer, material, object, container;
              function init() {
                  scene = new THREE.Scene();
                  // continue init threejs stuff 
              }
        }
    }
});

您可以在此处查看完整的示例(不是我的):https://jsfiddle.net/awolf2904/y0dvo582/