three.js学习笔记–画线

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 );
复制代码

官方演示代码地址：

http://www.webgl3d.cn/threejs/docs/#manual/zh/introduction/Drawing-lines
复制代码

按照官方的代码进行演示，发现会报错：

TypeError: three__WEBPACK_IMPORTED_MODULE_0__.Geometry is not a constructor
复制代码

报错内容大概是 Geometry 类没有找到。

最后发现npm引入three.js的方式里面没有Geometry类，通过搜索发现一个有Geometry类的js文件，通过本地js资源加载的方式解决了这个问题。