Threejs之用Shape对象和轮廓填充画一个地图座标点的样子

使用的相关方法：Shape对象和轮廓填充ShapeGeometry

// 一个外轮廓圆弧嵌套三个内圆弧轮廓
var shape = new THREE.Shape(); //Shape对象
//外轮廓
shape.arc(0, 0, 100, 0, 2 * Math.PI);
// 内轮廓1
var path1 = new THREE.Path();
path1.arc(0, 0, 40, 0, 2 * Math.PI);

//三个内轮廓分别插入到holes属性中
shape.holes.push(path1);
var geometry = new THREE.ShapeGeometry(shape, 30);

var material=new THREE.MeshPhongMaterial({
    color:0x00ff00,//三角面颜色
    side:THREE.DoubleSide//两面可见
});//材质对象
//material.wireframe = true;//线条模式渲染(查看细分数)
var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象

// 一个外轮廓圆弧嵌套三个内圆弧轮廓
var shape = new THREE.Shape(); //Shape对象
shape.moveTo(-85,-50);
shape.lineTo(0,-200);
shape.lineTo(85,-50);
var geometry2 = new THREE.ShapeGeometry(shape, 30);
var mesh2=new THREE.Mesh(geometry2,material);//旋转网格模型对象

var group = new THREE.Group();
group.add(mesh,mesh2);
group.scale.set(0.2,0.2,0.2)
group.position.y=40;
my3d.scene.add(group); //线条对象添加到场景中
	
	var animate = function () {
		requestAnimationFrame( animate );
		controls.update();
		renderer.render( my3d.scene, my3d.camera );
		animate();
		group.rotateY(0.1)
	};
	animate();