如何使用three.js在xz平面上绘制直线

使用three.js在xz平面上绘制直线，可以按照以下步骤进行：

导入three.js库：在HTML文件中引入three.js库，可以通过以下方式导入：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

创建场景和相机：使用Three.js创建一个场景和一个透视相机，代码示例如下：

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

创建渲染器：创建一个WebGL渲染器，并将其添加到HTML页面中的一个容器中，代码示例如下：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建直线对象：使用Three.js的Line类创建一个直线对象，代码示例如下：

var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
var points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(10, 0, 0));
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var line = new THREE.Line(geometry, material);
scene.add(line);

渲染场景：使用渲染器将场景和相机渲染到页面上，代码示例如下：

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

完整的代码示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three.js Line Example</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
        <script>
            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 material = new THREE.LineBasicMaterial({ color: 0x0000ff });
            var points = [];
            points.push(new THREE.Vector3(-10, 0, 0));
            points.push(new THREE.Vector3(10, 0, 0));
            var geometry = new THREE.BufferGeometry().setFromPoints(points);
            var line = new THREE.Line(geometry, material);
            scene.add(line);

            camera.position.z = 5;

            function animate() {
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
            }
            animate();
        </script>
    </body>
</html>

这段代码使用了Three.js库创建了一个场景、相机和渲染器，并在xz平面上绘制了一条直线。可以通过修改直线的起点和终点坐标来绘制不同的直线。