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

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

var scene = new THREE.Scene();

//create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );

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

scene.add( line );
renderer.render( scene, camera );
Copy the code

Official demo code address:

http://www.webgl3d.cn/threejs/docs/#manual/zh/introduction/Drawing-lines
Copy the code

According to the official code to demo, found will be an error:

TypeError: three__WEBPACK_IMPORTED_MODULE_0__.Geometry is not a constructor
Copy the code

The error content is probably the Geometry class has not been found.

Finally, it is found that there is no Geometry class in the way NPM introduces three.js. A JS file with Geometry class is found through searching, and this problem is solved by loading local JS resources.