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();