SOURCE

let camera, scene, renderer, controls, mesh;

const createWorld = () => {
const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array( [
	-1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0
] );

// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 mesh = new THREE.Mesh( geometry, material );
// scene.add(mesh)
};

const init = () => {
    camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000.0);

    camera.position.set(5, 0, 0);
    scene = new THREE.Scene({background: '#9c0'});


    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(innerWidth, innerHeight);

    document.body.appendChild(renderer.domElement);

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.target.set(0, 0, 0)

    createWorld();

    console.log(mesh)
    mesh.quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/4)
     mesh.quaternion.multiply(mesh.quaternion)
};

init();

const sphere = new THREE.SphereGeometry();
const object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
const box = new THREE.BoxHelper( object, 0xffff00 );
// scene.add( box );

const animate = () => {
    requestAnimationFrame(animate);
box.geometry.rotateX(0.01)
    controls.update();

    renderer.render(scene, camera);
};


animate();



var o = (function (e) {
  var t; var i; var n = '#02c973' // GIM.PATH_COLOR
  t = document.createElement('canvas')
  i = t.getContext('2d')
  t.width = 256
  t.height = 256
  i.clearRect(0, 0, t.width, t.height)
  i.fillStyle = 'rgba(255,255,255,+0.005)'
  i.fillRect(0, 0, t.width, t.height)
  i.fillStyle = n
  i.beginPath()
  i.moveTo(0, 30)
  i.lineTo(70, 30)
  i.lineTo(170, 128)
  i.lineTo(70, 226)
  i.lineTo(0, 226)
  i.lineTo(100, 128)
  i.closePath()
  i.fillStyle = '#FFFFFF'
  i.fill()
  return t
}())
let tex = new THREE.Texture(o)
tex.needsUpdate = true
tex.wrapS = tex.wrapT = THREE.RepeatWrapping
tex.repeat.set(0.08, 0.08)




let points = [
    {
        "x": 0.0066123027,
        "y": -0.3999999999999999,
        "z": -0.06543422
    },
    {
        "x": -4.248550076169964,
        "y": -0.3999999999999999,
        "z": -0.6556561812994454
    },
    {
        "x": -7.388492107877205,
        "y": -0.3999999999999999,
        "z": -0.8440955808540234
    },
    {
        "x": -9.414985671872625,
        "y": -0.3999999999999999,
        "z": -0.6991994549387868
    },
    {
        "x": -12.524922920267144,
        "y": -0.3999999999999999,
        "z": -0.706814788238242
    },
    {
        "x": -12.796500237022656,
        "y": -0.3999999999999999,
        "z": 3.484358486282334
    }
]


const material1 = new THREE.MeshBasicMaterial( { 
          side: THREE.DoubleSide,
    color: 0x00ff00 } );

const mesh1 = new THREE.Line2(  new THREE.LineGeometry(), material1 );

    const arr = points.reduce((preset, v3) => {
      preset.push(v3.x, v3.y, v3.z)
      return preset
    }, [])
    mesh1.geometry.setPositions(arr)
    mesh1.computeLineDistances()
scene.add( mesh1 );

<script src="https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/lines/LineGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/lines/LineSegments2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/lines/Line2.js"></script>