使用three.js创建3D曲面

1、使用PlaneGeometry创建平面几何体

	var width = 10, height = 6;
	var width_segments = 1, height_segments = 39; // 平面几何体长宽面分段数
	var plane = new THREE.PlaneGeometry(width, height, width_segments, height_segments); // 创建平面几何体

使用three.js创建3D曲面_第1张图片

使用three.js创建3D曲面_第2张图片
2、修改平面几何体顶点队列的Z轴坐标值
使用three.js创建3D曲面_第3张图片

		/*
		* 用vertices属性获取顶点队列,然后遍历
		*  Z轴坐标值可根据需要自行修改计算函数
		*/
		var m, n;
		for(var i=0; i

使用three.js创建3D曲面_第4张图片
3、创建mesh网格、添加材质

	var texture_plan = new THREE.TextureLoader().load('img/rect_3.png'); // 创建材质
	var mesh_plan = new THREE.Mesh(plane, new THREE.MeshLambertMaterial({ map:texture_plan, side: THREE.DoubleSide, transparent: true })); 
	scene.add(mesh_plan);

使用three.js创建3D曲面_第5张图片
注:为了展示效果,展示曲面进行坐标角度旋转

你可能感兴趣的:(three.js,曲面,three.js,3D)