案例:Three 几何体建模10 足球场形状     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <style>
6
    body {
7
      margin: 0;
8
      overflow: hidden;
9
      /* 隐藏body窗口区域滚动条 */
10
    }
11
  </style>
12
  <!--引入three.js三维引擎-->
13
  <script src="/js/threejs/threer92.js"></script>
14
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
15
</head>
16
17
<body>
18
  <script>
19
    //创建场景
20
    var scene = new THREE.Scene();
21
22
// 圆弧与直线连接
23
var shape = new THREE.Shape(); //Shape对象
24
var R = 50;
25
// 绘制一个半径为R、圆心坐标(0, 0)的半圆弧
26
shape.absarc(0, 0, R, 0, Math.PI);
27
//从圆弧的一个端点(-R, 0)到(-R, -200)绘制一条直线
28
shape.lineTo(-R, -200);
29
// 绘制一个半径为R、圆心坐标(0, -200)的半圆弧
30
shape.absarc(0, -200, R, Math.PI, 2 * Math.PI);
31
//从圆弧的一个端点(R, -200)到(-R, -200)绘制一条直线
32
shape.lineTo(R, 0);
33
var geometry = new THREE.ShapeGeometry(shape, 30);
34
35
      
36
// 通过顶点定义轮廓
37
//var shape = new THREE.Shape(points);
38
// shape可以理解为一个需要填充轮廓
39
// 所谓填充:ShapeGeometry算法利用顶点计算出三角面face3数据填充轮廓
40
//var geometry = new THREE.ShapeGeometry(shape, 25);
41
      
42
var material=new THREE.MeshPhongMaterial({
43
    color:0x0000ff,//三角面颜色
44
    side:THREE.DoubleSide//两面可见
45
});//材质对象
46
material.wireframe = false;//线条模式渲染设置为false(查看细分数)
47
var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象
48
scene.add(mesh);//旋转网格模型添加到场景中