javascript - threeJS 将对象从 A 点移动到 B 点

Question

我在 SO 上看到了一些问题，但我仍然不知道如何制作这样的简单动画。

基本上我只是想将对象从点 A 移动到点 b，我已经做了一些应用平移的工作，但对象不停地移动，我需要我的场景继续动画。

目前我有这段代码:

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import * as THREE from 'three';
import * as dama from "./dama.json";


const VIEW = {
  angle: 45,
  aspect: screen.width / screen.height,
  near: 0.1,
  far: 1000
}

const matrix = {
  numberPieces: 15,
  brownField: [
    // first row
    {x: -5.95, y: 10, z: 3.95},
    {x: -2.75, y: 10, z: 3.95},
    {x: 0.45, y: 10, z: 3.95},
    {x: 3.6, y: 10, z: 3.95},
    {x: 6.8, y: 10, z: 3.95},
    //second row
    {x: -7.5, y: 10, z: 5.55},
    {x: -4.35, y: 10, z: 5.55},
    {x: -1.15, y: 10, z: 5.55},
    {x: 2, y: 10, z: 5.55},
    {x: 5.15, y: 10, z: 5.55},
    //third row
    {x: -5.95, y: 10, z: 7.15},
    {x: -2.75, y: 10, z: 7.15},
    {x: 0.45, y: 10, z: 7.15},
    {x: 3.6, y: 10, z: 7.15},
    {x: 6.8, y: 10, z: 7.15}

  ],
  blackField: 
  [
    // first row
    {x: -5.95, y: 10, z: -7.2},
    {x: -2.75, y: 10, z: -7.2},
    {x: 0.45, y: 10, z: -7.2},
    {x: 3.6, y: 10, z: -7.2},
    {x: 6.8, y: 10, z: -7.2},
    //second row
    {x: -7.5, y: 10, z: -5.6},
    {x: -4.35, y: 10, z: -5.6},
    {x: -1.15, y: 10, z: -5.6},
    {x: 2, y: 10, z: -5.6},
    {x: 5.15, y: 10, z: -5.6},
    //third row
    {x: -5.95, y: 10, z: -4},
    {x: -2.75, y: 10, z: -4},
    {x: 0.45, y: 10, z: -4},
    {x: 3.6, y: 10, z: -4},
    {x: 6.8, y: 10, z: -4},
  ]
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private container: HTMLElement;

  @ViewChild('container') elementRef: ElementRef;
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private renderer: THREE.WebGLRenderer;

  private cube: THREE.Mesh;

  ngOnInit() {
    this.container = this.elementRef.nativeElement;

    this.init();
  }

  init() {
    let screen = {
      width: window.innerWidth,
      height: window.innerHeight,
      color: 0xffffff
    }

    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(0x000000, 1);

    this.renderer.setSize(screen.width, screen.height);
    this.container.appendChild(this.renderer.domElement);
    this.initCamera()
    this.initLights();
    var gameBoard = null;

    const sceneCtx = this.scene;
    const boardLoader = new THREE.JSONLoader();

    /**
     * Here we load the game board
     */
    boardLoader.load("assets/dama.json", (geometry, materials) => {
      gameBoard = new THREE.Mesh(geometry, materials);
      sceneCtx.add(gameBoard);
    });

    this.initPieces();

    this.render();
  }

  render() {

    let self: AppComponent = this;

    (function render() {
      requestAnimationFrame(render);
      self.renderer.render(self.scene, self.camera);
      self.renderer.setClearColor(0xffffff, 1);

      self.animate();
    }());

  }

  onResize(event) {
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }

  animate() {
    let piece = this.scene.getObjectByName("black-1");

    piece.translateZ(0.1);
  }

  initPieces() {
    const blackPieceLoader = new THREE.JSONLoader();
    const brownPieceLoader = new THREE.JSONLoader();

    const ctx = this;
    let brownPiece = null;
    let blackPiece = null;

    // we load here all the black pieces
    blackPieceLoader.load("assets/black.json", (geometry, materials) => {
      for(let i = 0; i < matrix.numberPieces;i++) {
        blackPiece = new THREE.Mesh(geometry, materials);
        blackPiece.position.set(matrix.blackField[i].x, matrix.blackField[i].y, matrix.blackField[i].z);
        blackPiece.name = "black" + "-" + i;
        ctx.scene.add(blackPiece);
      }
    });

    // we load here all the brown pieces
    brownPieceLoader.load("assets/brown.json", (geometry, materials) => {
      for(let i = 0; i < matrix.numberPieces;i++) {
        brownPiece = new THREE.Mesh(geometry, materials);
        brownPiece.position.set(matrix.brownField[i].x, matrix.brownField[i].y, matrix.brownField[i].z);
        brownPiece.name = "brown" + "-" + i;
        ctx.scene.add(brownPiece);
      }
    });
  }

  initLights() {
    var light = new THREE.AmbientLight(0xffffff);
    this.scene.add(light);
  }

  initCamera() {
    this.camera = new THREE.PerspectiveCamera(VIEW.angle, VIEW.aspect, VIEW.near, VIEW.far);    
    this.scene.add(this.camera);
    this.scene.add(new THREE.AxisHelper(20));
    this.camera.position.set(0, 35, 0);
    this.camera.lookAt(new THREE.Vector3(0, 0, 0));
  }

}

在动画中我想将单个对象从 a 点移动到 B 点，为了测试 b 点可以是任何东西，A 点是我在创建他时指定名称的对象的当前位置for循环:

重要部分

  animate() {
    let piece = this.scene.getObjectByName("black-1");

    piece.translateZ(0.1);
  }

Answer 1

您可以使用线性插值将某物从 A 移动到 B。通用公式为:

p = a + (b - a) * t

其中 t 在 [0.0, 1.0] 范围内。您可以将其应用于需要设置动画的每个轴(x、y、z)。

例如，

t 可以绑定(bind)到推荐的时间，因为在浏览器环境中不能保证恒定的帧速率，或者绑定(bind)到对非实时渲染有用的帧。

t 时间绑定(bind)

对于时间，您可以按以下方式计算 t:

var startTime;
var duration = 2000;              // milliseconds

function loop(currentTime) {
  if (!startTime) startTime = currentTime;
  var t = (currentTime - startTime) / duration;
  // use t here, optionally clamp and/or add conditions
  requestAnimationFrame(loop);    // provides current high-res time as argument
}

t 绑定(bind)到框架

对于每帧方法，您可以像这样计算 t:

var fps = 60;
var duration = 2.0;               // seconds
var step = 1 / (duration * fps);  // t-step per frame
var t = 0;

... loop here
t += step;

当然你也可以通过easing functions运行t在将其传递给 lerp 以进行更平滑的过渡之前。

lerp() 的基本示例

var scene, renderer, cam, mesh;

// linear interpolation function
function lerp(a, b, t) {return a + (b - a) * t}

var t = 0, dt = 0.02,                   // t (dt delta for demo)
    a = {x: -2, y: -1, z: -1},          // start position
    b = {x: 1.5, y: 0.5, z: 0.7};       // end position
    
function loop() {
  var newX = lerp(a.x, b.x, ease(t));   // interpolate between a and b where
  var newY = lerp(a.y, b.y, ease(t));   // t is first passed through a easing
  var newZ = lerp(a.z, b.z, ease(t));   // function in this example.
  mesh.position.set(newX, newY, newZ);  // set new position
  t += dt;
  if (t <= 0 || t >=1) dt = -dt;        // ping-pong for demo
  renderer.render(scene, cam);
  requestAnimationFrame(loop)
}

// example easing function (quadInOut, see link above)
function ease(t) { return t<0.5 ? 2*t*t : -1+(4-2*t)*t}

// setup scene
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
cam = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 1, 50);
mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshBasicMaterial());
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
cam.position.z = 5;
document.body.appendChild(renderer.domElement);
scene.add(mesh);
loop();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>