threejs的几个常用组件

轨道控制器，OrbitControls

允许用户通过鼠标、触摸屏或键盘操作来旋转、缩放和平移相机，从而从不同角度观察场景。

import { OrbitControls } from "@lib/three-r173/jsm/controls/OrbitControls.js";

  // 创建控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  // // 禁止选中
  controls.enableRotate = false;
  // // 将平移从右键修改为左键
  controls.mouseButtons.LEFT = THREE.MOUSE.RIGHT;

  // 启用触摸控制
  controls.touches.ONE = THREE.TOUCH.PAN; // 单指触摸用于平移
  controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE; // 双指触摸用于缩

  // 最后，需要在动画循环中一直更新
  // controls.update();

线条

MeshLine 和 MeshLineMaterial 是用于在 three.js 中创建具有宽度和复杂效果的线条的工具，它们通常一起使用，以替代 three.js 内置的 THREE.Line，因为后者无法设置线条宽度

// 创建边框
function createThickLine(points, color, lineWidth) {
  var geometry = new THREE.BufferGeometry();
  geometry.setFromPoints(points.map((point) => new THREE.Vector3(point.x, point.y, 0)));

  var line = new MeshLine();
  line.setGeometry(geometry);

  var material = new MeshLineMaterial({
    color: color,
    lineWidth: lineWidth,
    transparent: true,
    opacity: 1.0,
    blending: THREE.NormalBlending,
    depthTest: false,
    depthWrite: false
  });

  var mesh = new THREE.Mesh(line.geometry, material);
  return mesh;
}



  // 绘制边框
  var line = createThickLine(points, 0x0099ff, 0.05);
  line.position.set(object.x * scale, -(object.y * scale), 0);
  line.renderOrder = 11;
  group.add(line);