带有 Angular 的 Canvas (Three.js) 场景

Question

我正在 Angular SPA 中构建一系列 Web 应用程序。这些应用程序中的每一个都位于一个 Angular 模板中，它们之间的导航会剥离和替换适当的 DOM 元素并从控制器运行脚本。

我的问题更笼统：在离开 Three.js 场景并返回时，显然 DOM 元素和脚本本身会重新运行，从而导致场景从“scratch”开始。有没有办法让场景在后台运行，以便用户可以导航回应用程序并让它就在他们离开的地方？

这甚至是可取的吗？我知道当用户导航到另一个选项卡时 requestAnimationFrame 方法会停止动画，但这在 Angular 上下文中如何工作？

例如，here's the WIP web page。尝试离开 StarFinder 选项卡然后返回，您就会明白我的意思了。

编辑：Here's a JSFiddle 来说明我的意思（在这种情况下，它会在没有 Angular 的情况下修改 DOM）。

真的，有问题的是渲染器，它会在返回时重新启动：

function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
render();

Answer 1

重新编译模板时角度破坏 DOM，THREE.js 使用绑定到画布的 webGL 渲染器。

如果您一次只有一个用于 THREE.js 的画布渲染，我建议使用外部画布并在创建时将其移动到指令中，并在移除时移回静态容器（使用 $destroy）

试试这个：

创建一个指令来监听显示/隐藏事件的发射并创建一个功能性 3d 画布

然后将该指令选择器放置在更改模板之外的 DOM 中

喜欢这个

app.directive('threejsCanvas', function directive() {
  return {
    link: function(scope){
      var scene = new THREE.Scene();
      
      // create a temp holder to save the canvas outside of canvas
      var tempHolder = document.createElement('div');
      tempHolder.style.display = 'none';
      window.document.body.appendChild(tempHolder);
      
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      var renderer = new THREE.WebGLRenderer();
      document.body.appendChild( renderer.domElement );
      
      scope.$on('start:webgl', function(view, callback) {
        view.appendChild(renderer.domElement);
        
        // you may do somthing like ...
        // renderer.setSize( view.innerWidth, view.innerHeight );
        // and change camera ratio if it have to change
        
        // pass the arguments to the caller's callback so the script can interact with the canvas singleton
        callback({
          scene: scene,
          camera: camera,
          renderer: renderer
        });
      });  
      
      scope.$on('$destroy', function() {
        // move canvas away from template so it's not destroyed
        tempHolder.appendChild(renderer.domElement);
      });
    }
  };
});

<div class="container">
  <threejs-canvas></threejs-canvas>
  <div ng-view></div>
</div>

因此您只需从控制器发出您希望画布在其中呈现的元素并传递回调以获取 THREE.js 对象

Answer 2

如果您使用的是 ui-router，您可以在嵌套视图中加载站点的其余部分，然后只需在包含动画的父视图中隐藏 div，而无需实际卸载它。将requestAnimationFrame(render); 放在检查布尔标志的if 语句中。然后在您的路线更改时更新该标志。请参阅我的回答 here 以了解如何检测路由更改。如果您正在导航到您的场景，那么还请调用render() 以再次启动动画。

另一个选项可能是允许它卸载，但将您的动画的任何大型资产和/或设置保存在 localStorage 中，这样您的启动时间会更短。