Three.js 画布上不增加其他物体，触摸滑动显示线条，触摸结束线条消失

你可以使用 Three.js 的 Raycaster 来检测触摸事件，并在触摸滑动时创建一个线条对象，触摸结束时将其删除。下面是一个简单的示例代码：

// 创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建线条材质
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 创建空的线条几何体
var geometry = new THREE.Geometry();
var line = new THREE.Line(geometry, material);

// 添加线条到场景中
scene.add(line);

// 监听触摸事件
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
document.addEventListener('touchend', onDocumentTouchEnd, false);

// 创建射线检测器
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onDocumentTouchStart(event) {
  event.preventDefault();

  // 设置鼠标坐标
  mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;

  // 从相机位置发射一条射线，检测是否与场景中的物体相交
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 如果相交了，将线条的起点设置为相交点的位置
    var point = intersects[0].point;
    geometry.vertices.push(point);
  }
}

function onDocumentTouchMove(event) {
  event.preventDefault();

  // 设置鼠标坐标
  mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;

  // 从相机位置发射一条射线，检测是否与场景中的物体相交
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 如果相交了，将线条的终点设置为相交点的位置
    var point = intersects[0].point;
    geometry.vertices.push(point);
    geometry.verticesNeedUpdate = true;
  }
}

function onDocumentTouchEnd(event) {
  event.preventDefault();

  // 清空线条几何体
  geometry.vertices = [];
  geometry.verticesNeedUpdate = true;
}

这段代码会在 Three.js 的渲染器上创建一个空的线条，然后监听触摸事件，并使用 Raycaster 检测触摸点是否与场景中的物体相交。如果相交了，就将线条的顶点设置为相交点的位置，并在触摸滑动时更新线条的终点。当触摸结束时，清空线条的顶点，从而使线条消失。