用three.js实现点击按钮画线的功能

要用Three.js实现点击按钮画线的功能，需要以下步骤：

1. 创建场景、相机和渲染器：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

2. 创建一个空的几何体，用于存储线条的顶点：

var geometry = new THREE.Geometry();

3. 创建线条材质：

var material = new THREE.LineBasicMaterial( { color: 0xffffff } );

4. 创建线条对象：

var line = new THREE.Line( geometry, material );
scene.add( line );

5. 创建按钮元素：

var button = document.createElement( 'button' );
button.innerHTML = 'Draw Line';
document.body.appendChild( button );

6. 给按钮添加点击事件：

button.addEventListener( 'click', function() {
    // 添加一个顶点
    geometry.vertices.push( new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ) );
    // 更新线条
    geometry.verticesNeedUpdate = true;
});

7. 渲染场景：

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();

这样就可以实现点击按钮画线的功能了。完整的代码如下：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

var button = document.createElement( 'button' );
button.innerHTML = 'Draw Line';
document.body.appendChild( button );

button.addEventListener( 'click', function() {
    geometry.vertices.push( new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ) );
    geometry.verticesNeedUpdate = true;
});

camera.position.z = 5;

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();