threejs 键盘控制运动 前进 后退 左转 右转

输出效果

代码

import {
  PlaneGeometry,
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Object3D,
  Clock,
  AnimationMixer,
  Color,
  AmbientLight,
  DirectionalLight,
  GridHelper,
  AxesHelper,
  Material,
  Vector3,
  BoxGeometry,
  MeshBasicMaterial,
  CylinderGeometry,
  MeshLambertMaterial,
  Mesh,
  Vector2,
  TextureLoader,
  CircleGeometry,
  cloneUniformsGroups,
  ArrowHelper,
  CurvePath,
  BufferGeometry,
  LineBasicMaterial,
  Line,
  SplineCurve,
  PointLightShadow,
  Matrix4,
  Matrix3,
} from "three";
import * as THREE from "three";
import * as TWEEN from "@tweenjs/tween.js";

type IPoint = {
  x: number;
  y: number;
};

export class Car {
  public car: Mesh;
  private carArrow: Vector2;
  constructor() {
    this.car = this.createCar();
    this.carArrow = new Vector2(1, 0);
  }

  private createCar() {
    const carParam = {
      width: 0.1,
      height: 0.05,
      depth: 0.05,
    };

    const geometry = new BoxGeometry(
      carParam.width,
      carParam.height,
      carParam.depth
    );

    const car = new Mesh(
      geometry,
      new MeshLambertMaterial({
        color: 0xffffff,
      })
    );

    car.position.z = carParam.depth * 0.5;

    const arrow = new THREE.Vector3(1, 0, 0);
    arrow.normalize();
    const origin = new Vector3(0, 0, 0);
    const arrowHelper = new ArrowHelper(arrow, origin, 0.3, 0xffff00);

    car.add(arrowHelper);

    return car;
  }

  public forward() {
    const carArrowNormal = this.carArrow.normalize();
    const matrix = new Matrix4();
    //   1    0     0    carArrowNormal.x*0.01
    //   0    1     0    carArrowNormal.y * 0.01
    //   0    0     1    0
    //   0    0     0    1
    matrix.set(
      1,
      0,
      0,
      carArrowNormal.x * 0.01,

      0,
      1,
      0,
      carArrowNormal.y * 0.01,

      0,
      0,
      1,
      0,

      0,
      0,
      0,
      1
    );
    this.car.applyMatrix4(matrix);
  }

  public backward() {
    const carArrowNormal = this.carArrow.normalize();
    const matrix = new Matrix4();
    matrix.set(
      1,
      0,
      0,
      -carArrowNormal.x * 0.01,

      0,
      1,
      0,
      -carArrowNormal.y * 0.01,

      0,
      0,
      1,
      0,

      0,
      0,
      0,
      1
    );
    this.car.applyMatrix4(matrix);
  }

  public turnleft() {
    const matrix = new Matrix3();
    const angle = Math.PI * 0.01;
    const sinValue = Math.sin(angle);
    const cosValue = Math.cos(angle);
    matrix.set(
      cosValue,
      -sinValue,
      0,

      sinValue,
      cosValue,
      0,

      0,
      0,
      1
    );
    this.carArrow.applyMatrix3(matrix);
    this.car.rotateZ(angle);
  }

  public turnright() {
    const matrix = new Matrix3();

    const angle = Math.PI * 0.01;
    const sinValue = Math.sin(angle);
    const cosValue = Math.cos(angle);

    matrix.set(
      cosValue,
      sinValue,
      0,

      -sinValue,
      cosValue,
      0,

      0,
      0,
      1
    );
    this.carArrow.applyMatrix3(matrix);
    this.car.rotateZ(-angle);
  }
}