draw_line.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DrawLine</title>
</head>

<body>
    <script src="./three.js"></script>
    <script>
        //----------- 准备工作start -----------
        // 创建场景
        var scene = new THREE.Scene()

        // 设置相机 参数列表（视口大小，视野宽高比，视野最近距离，视野最远距离）
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
      
        // 移动相机的位置
        camera.position.set(0, 0, 100)
      
        // 设置相机朝向
        camera.lookAt(new THREE.Vector3(0, 0, 0))

        // 创建渲染器  {开启抗锯齿}
        var renderer = new THREE.WebGLRenderer({antialias: true})

        // 设置渲染区域尺寸
        renderer.setSize(window.innerWidth, window.innerHeight,false)

        //设置背景颜色
        renderer.setClearColor(0xffffff, 1)

        // 将渲染器的添加到html中
        document.body.appendChild(renderer.domElement)
        
        //----------- 准备工作end -----------

        // 创建一个线的基本材质
        var material = new THREE.LineBasicMaterial({color: 0xabcdef})
        var material2 = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors}) //使用顶点颜色渲染模型

        // 创建空的几何体容器
        var geometry = new THREE.Geometry()
        var geometry2 = new THREE.Geometry()

        // 添加顶点
        geometry.vertices.push(new THREE.Vector3(-50, 0, 0))
        geometry.vertices.push(new THREE.Vector3(50, 0, 0))
        geometry2.vertices.push(new THREE.Vector3(-50, 20, 0))
        geometry2.vertices.push(new THREE.Vector3(50, 20, 0))
        geometry2.colors.push(new THREE.Color(0x0000ff))
        geometry2.colors.push(new THREE.Color(0xff0000))

        // 初始化线模型
        var line = new THREE.Line(geometry, material)
        var line2 = new THREE.Line(geometry2, material2)

        // 将线添加到场景中
        scene.add(line)
        scene.add(line2)

        // 渲染
        renderer.render(scene, camera)


    </script>
</body>

</html>