three.js 2 画线

import * as THREE from 'three';
import WebGL from "three/examples/jsm/capabilities/WebGL";

/**
 * 3d 根据文档学习 2 - 画线
 * https://threejs.org/docs/index.html#manual/zh/introduction/Drawing-lines
 */
export class ThreeDoc2DrawLine {
    constructor(canvasId) {
        this.work(canvasId);
    }

    work(canvasId) {
        // 创建 3d 场景
        const scene = new THREE.Scene();

        /**
         * 创建渲染器
         * WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器。当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。
         * @type {number}
         */
        const renderer = new THREE.WebGLRenderer();
        /**
         * 渲染器尺寸：设置渲染器的宽高使渲染出的场景充满应用程序
         * 对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2
         * 如果想以较低的分辨率来渲染，可以在调用setSize时，将updateStyle（第三个参数）设为false
         */
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。
        document.body.appendChild(renderer.domElement);


        /**
         * 照相机常用的有两种
         * 正投影相机：THREE.OrthographicCamera(left,right,top,bottom,near,far)；
         * 透视照相机：THREE.PerspectiveCamera( fov, aspect, near, far ) ;
         * fov - 视野角度。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)
         * aspect ratio - 长宽比。也就是你用一个物体的宽除以它的高的值。当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的
         * near，far - 近截面和远截面。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中
         */
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
        camera.position.set(0, 0, 100);
        camera.lookAt(0, 0, 0);

        /**
         * 定义一个材质
         * 对于线条来说，我们能使用的材质只有LineBasicMaterial 或者 LineDashedMaterial。
         */
        const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
        /**
         * 定义好材质之后，我们需要一个带有一些顶点的geometry（几何体）。
         * 注意，线是画在每一对连续的顶点之间的，而不是在第一个顶点和最后一个顶点之间绘制线条（线条并未闭合）。
         * @type {Mesh}
         */
        const points = [];
        points.push( new THREE.Vector3( - 10, 0, 0 ) );
        points.push( new THREE.Vector3( 0, 10, 0 ) );
        points.push( new THREE.Vector3( 10, 0, 0 ) );

        const geometry = new THREE.BufferGeometry().setFromPoints( points );
        const line = new THREE.Line( geometry, material );

        // 把它添加到场景中，并调用render（渲染）函数。
        scene.add(line);
        renderer.render(scene, camera);
    }
}