Threejs_材料_Shape对象_轮廓填充ShapeGeometry

最新推荐文章于 2024-10-08 12:30:00 发布

风雨飘摇中的石头

最新推荐文章于 2024-10-08 12:30:00 发布

阅读量1.2k

点赞数

分类专栏： weggl 文章标签： mesh 云原生 cloud native

本文链接：https://blog.csdn.net/ydk001001/article/details/122678836

版权

weggl 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

var material = new THREE.MeshPhongMaterial({
	  color: 0x0000ff,
	  side: THREE.DoubleSide //两面可见
	}); //材质对象

在这里插入图片描述

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

var material = new THREE.MeshPhongMaterial({
	  color: 0x0000ff,
	  side: THREE.DoubleSide //两面可见
	}); //材质对象
	var mesh = new THREE.Mesh(geometry, material); //网格模型对象

在这里插入图片描述

//4  圆弧与直线连接
	// 一个外轮廓圆弧嵌套三个内圆弧轮廓
	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);
	// 内轮廓2
	var path2 = new THREE.Path();
	path2.arc(80, 0, 10, 0, 2 * Math.PI);
	// 内轮廓3
	var path3 = new THREE.Path();
	path3.arc(-80, 0, 10, 0, 2 * Math.PI);
	//三个内轮廓分别插入到holes属性中
	shape.holes.push(path1, path2, path3);
	var geometry = new THREE.ShapeGeometry(shape, 30);
	//
	var material=new THREE.MeshPhongMaterial({
		color:0x0000ff,//三角面颜色
		side:THREE.DoubleSide//两面可见
	});//材质对象
	material.wireframe = true;//线条模式渲染(查看细分数)
	var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象
	scene.add(mesh);//旋转网格模型添加到场景中

在这里插入图片描述

// 矩形嵌套矩形或圆弧
	var shape=new THREE.Shape();//Shape对象
	//外轮廓
	shape.moveTo(0,0);//起点
	shape.lineTo(0,100);//第2点
	shape.lineTo(100,100);//第3点
	shape.lineTo(100,0);//第4点
	shape.lineTo(0,0);//第5点

	//内轮廓
	var path=new THREE.Path();//path对象
	// path.arc(50,50,40,0,2*Math.PI);//圆弧
	path.moveTo(20,20);//起点
	path.lineTo(20,80);//第2点
	path.lineTo(80,80);//第3点
	path.lineTo(80,20);//第4点
	path.lineTo(20,20);//第5点
	shape.holes.push(path);//设置内轮廓
	var geometry = new THREE.ShapeGeometry(shape, 30);
	//
	var material=new THREE.MeshPhongMaterial({
		color:0x0000ff,//三角面颜色
		side:THREE.DoubleSide//两面可见
	});//材质对象
	material.wireframe = true;//线条模式渲染(查看细分数)
	var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象
	scene.add(mesh);//旋转网格模型添加到场景中

在这里插入图片描述

//多个轮廓同时填充
	// 轮廓对象1
	 var shape=new THREE.Shape();
	 shape.arc(-50,0,30,0,2*Math.PI);
	 // 轮廓对象2
	 var shape2=new THREE.Shape();
	 shape2.arc(50,0,30,0,2*Math.PI);
	 // 轮廓对象3
	 var shape3=new THREE.Shape();
	 shape3.arc(0,50,30,0,2*Math.PI);
	// 多个shape作为元素组成数组,每一个shpae可以理解为一个要填充的轮廓
	var geometry = new THREE.ShapeGeometry([shape,shape2,shape3], 30);
	var geometry = new THREE.ShapeGeometry(shape, 30);
	//
	var material=new THREE.MeshPhongMaterial({
		color:0x0000ff,//三角面颜色
		side:THREE.DoubleSide//两面可见
	});//材质对象
	material.wireframe = true;//线条模式渲染(查看细分数)
	var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象
	scene.add(mesh);//旋转网格模型添加到场景中

在这里插入图片描述

//多个轮廓同时填充
	// 边界轮廓坐标
	let arr = [
	  [110.3906, 34.585],
	  [110.8301, 34.6289],
	  [110.6543, 34.1455],
	  [110.6543, 34.2455],
	  [110.6543, 34.3455],
	  [110.6543, 34.3555],
	  [110.6543, 34.3655],
	  [110.6543, 34.4155],
	  [110.4785, 34.4334],
	  [110.4785, 35.4334],
	  [110.3906, 34.585]
	]
	var points = [];
	// 转化为Vector2构成的顶点数组
	arr.forEach(elem => {
	  points.push(new THREE.Vector2(elem[0],elem[1]))
	});
	// 样条曲线生成更多的点
	var SplineCurve = new THREE.SplineCurve(points)
	var shape = new THREE.Shape(SplineCurve.getPoints(300));
	// var shape = new THREE.Shape(points);
	var geometry = new THREE.ShapeGeometry(shape);
	geometry.center();//几何体居中
	geometry.scale(30,30,30);//几何体缩放
	var material = new THREE.MeshPhongMaterial({
	  color: 0x0000ff,
	  side: THREE.DoubleSide //两面可见
	}); //材质对象
	var mesh = new THREE.Mesh(geometry, material); //网格模型对象
	
	scene.add(mesh);//旋转网格模型添加到场景中