Three.js 触摸滑动显示线条，触摸结束线条消失

要实现这个效果，需要用到 Three.js 的鼠标/触摸事件和线条材质。以下是一个简单的实现方式：

1. 创建一个 Three.js 场景和相机。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;

2. 创建一个网格平面作为背景。

var geometry = new THREE.PlaneGeometry( 10, 10, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0x888888 } );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );

3. 创建一个线条材质，并将其应用于一个 Three.js 线条对象。

var material = new THREE.LineBasicMaterial( { color: 0xffffff } );
var geometry = new THREE.Geometry();
var line = new THREE.Line( geometry, material );
scene.add( line );

4. 监听触摸事件，并在触摸开始时清空线条的顶点数组，设置第一个顶点的位置，并将线条对象加入场景。

var isDrawing = false;

document.addEventListener('touchstart', function(event) {
    isDrawing = true;
    line.geometry.vertices = [];
    var x = event.touches[0].clientX / window.innerWidth * 2 - 1;
    var y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;
    var z = 0.5;
    var vertex = new THREE.Vector3(x, y, z);
    line.geometry.vertices.push(vertex);
    scene.add(line);
});

5. 监听触摸移动事件，并根据触摸位置添加新的线条顶点。

document.addEventListener('touchmove', function(event) {
    if (isDrawing) {
        var x = event.touches[0].clientX / window.innerWidth * 2 - 1;
        var y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;
        var z = 0.5;
        var vertex = new THREE.Vector3(x, y, z);
        line.geometry.vertices.push(vertex);
        line.geometry.verticesNeedUpdate = true;
    }
});

6. 监听触摸结束事件，并在结束时将 isDrawing 标志设置为 false，使线条消失。

document.addEventListener('touchend', function(event) {
    isDrawing = false;
});

这就是一个简单的 Three.js 触摸滑动显示线条，触摸结束线条消失的实现方式。你可以根据自己的需求对其进行调整和优化。