Three.js《踩坑日记1》

Three.js可以说是未来物联网无人工厂的网上实体店，很多线下的实体店都通通的搬到了线上。可是对于很多商家看着数据实不如看着 门店来的自然。有了需求自然就会有供给这两个兄弟，所以现在太多太多可视化数据了，加之5G的到来，可视化数据都来不及应付更高的体验，随之而然的自然是关于3D及其VR方面的技术红利，作为web端早已开放过WebGL学习成本又高，又难以理解，Three.js作为将器WebGl封装过的一个第三方库，自然成了我们的不二之选，先记录一下踩坑，

1. Faceless geometries are not supported.(不支持无面几何体)

            var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
			var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
			var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
			var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
			//顶点坐标添加到geometry对象
			geometry.vertices.push(p1, p2, p3);
			
			// Color对象表示顶点颜色数据
			var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
			var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
			var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
			//顶点颜色数据添加到geometry对象
			geometry.colors.push(color1, color2, color3);

            //材质对象
			var material = new THREE.MeshLambertMaterial({
			// color: 0xffff00,
			vertexColors: THREE.VertexColors, //以顶点颜色为准
			side: THREE.DoubleSide, //两面可见
			});
			
			var mesh = new THREE.Mesh(geometry, material)
            
            scene.add(mesh) // 将网格模型添加至场景中,

对于以上代码，我怎么都找不出问题所在，创建一个  几何，设置集合的顶点坐标，将其绑定在该几何体对象Geometry上，

Color并且设置几何对象的颜色，然后创建一个 网格模型，将其添加至场景当中，但是浏览器始终提示一个错误 就是

Faceless geometries are not supported，说是“不支持无面几何体”，我第一个想法就是我顶点坐标没添加进去，所以渲染错误，

但是后面发现问题不是如此，终于找找找，才找到问题所在。将其设置为点渲染模式就不会出现此错误，为什么会这样，俺也不

知道，后续找到的话再来更新吧，正确代码如下。

        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
			var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
			var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
			var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
			//顶点坐标添加到geometry对象
			geometry.vertices.push(p1, p2, p3);
			
			// Color对象表示顶点颜色数据
			var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
			var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
			var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
			//顶点颜色数据添加到geometry对象
			geometry.colors.push(color1, color2, color3);
			
			//材质对象
			var material = new THREE.MeshLambertMaterial({
			// color: 0xffff00,
			vertexColors: THREE.VertexColors, //以顶点颜色为准
			side: THREE.DoubleSide, //两面可见
			});
			
			var mesh = new THREE.Mesh(geometry, material)

			var AxesHelper = new THREE.AxesHelper(250)
			
			// 点渲染模式
			var material = new THREE.PointsMaterial({
			color: 0xff0000,
			size: 10.0 //点对象像素尺寸
			}); //材质对象
			var points = new THREE.Points(geometry, material); //点模型对象
			scene.add(points); //点对象添加到场景中

			scene.add(mesh)