小编W99*_*420的帖子

我正在尝试创建一个将在Angular 2中的动画结束时触发的函数(我正在使用最新的角度cli).

我一直在使用Angular Animations来了解如何通过在我的代码示例中为触发器分配触发器来实现这一点.我有一个动画到页面上的组件.代码如下:

//first.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/core';


@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css'],
  host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[style.position]': "'absolute'"
  },
  animations: [
    trigger('routeAnimation', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  myFunc() …

我试图在three.js中沿着路径动画一个立方体.

码

 // Ellipse class, which extends the virtual base class Curve
    var curve = new THREE.EllipseCurve(
        0,  0,            // ax, aY
        16, 21.28,           // xRadius, yRadius
        0,  2 * Math.PI,  // aStartAngle, aEndAngle
        false,            // aClockwise
        0                 // aRotation
    );

    //defines the amount of points the path will have
    var path = new THREE.Path( curve.getPoints( 100 ) );
    var geometrycirc = path.createPointsGeometry( 100 );
    var materialcirc = new THREE.LineBasicMaterial( {
        color : 0xff0000
    } );

    // Create the final …

我正在使用 Three.js 中的 Composer 创建复杂的场景。我想知道是否可以在具有不同作曲家效果的两个场景之间切换。为了获得某种视角，我创建了一个示例，它允许您在两个正常渲染的场景之间切换。

两个场景示例

根据我对作曲家如何工作的理解，您可以创建它的一个实例，然后像这样应用渲染通道：

    this.composer = new THREE.EffectComposer(this.renderer.default.init);
    this.renderPass = new THREE.RenderPass(this.stage,  this.camera);
    this.renderPass.renderToScreen = true;
    this.composer.addPass(this.renderPass); 

然后像这样应用作曲家渲染：

    this.composer.render();

所以我的问题是，如果我有一个作曲家实例的第二个场景，我该怎么做：

1. 使用相同的渲染器（如果可能）
2. 以与我的示例类似的方式在场景 1 和场景 2 之间切换。

我一直在尝试找到一种方法，可以在three.js 中的两个场景之间切换。我知道可以使用 sceneLoader / exportScene 组合加载场景。

取自josdirksen/learning-threejs 的代码 - 加载场景

var controls = new function () {
        this.exportScene = function () {
            var exporter = new THREE.SceneExporter();
            var sceneJson = JSON.stringify(exporter.parse(scene));
            localStorage.setItem('scene', sceneJson);
        };
        this.clearScene = function () {
            scene = new THREE.Scene();
        };
        this.importScene = function () {
            var json = (localStorage.getItem('scene'));
            var sceneLoader = new THREE.SceneLoader();
            sceneLoader.parse(JSON.parse(json), function (e) {
                scene = e.scene;
            }, '.');
        }
    };

根据我对上述代码的理解，您需要先加载场景，然后才能将其提取并保存到本地存储，然后才能将其放回场景中。我也知道 SceneLoader 现在已被弃用。

对于我的场景，我想要一个初始场景加载，然后通过单击“场景 2”按钮我只想显示场景 2，如果我单击“场景 1”按钮返回仅查看场景 1（请参见下面的小提琴）。

基本示例设置

我不确定从哪里开始，所以任何指针建议或建议都会有所帮助。