案例:Three 几何体建模1一个圆     状态:可编辑再运行    进入竖版
 运行结果 
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
    var geometry = new THREE.BufferGeometry(); //声明一个几何体对象
23
//参数:0, 0圆弧坐标原点x,y  100:圆弧半径    0, 2 * Math.PI:圆弧起始角度
24
var arc = new THREE.ArcCurve(0, 0, 100, 0, 2 * Math.PI);
25
//getPoints是基类Curve的方法,返回一个vector2对象作为元素组成的数组
26
var points = arc.getPoints(50);//分段数50,返回51个顶点
27
// setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
28
geometry.setFromPoints(points);
29
//材质对象
30
var material = new THREE.LineBasicMaterial({
31
  color: 0x000000
32
});
33
//线条模型对象
34
var line = new THREE.Line(geometry, material);
35
scene.add(line); //线条对象添加到场景中
36
37
      
38
    /**
39
     * 光源设置
40
     */
41
    //点光源
42
    var point = new THREE.PointLight(0xffffff);
43
    point.position.set(400, 200, 300); //点光源位置
44
    scene.add(point); //点光源添加到场景中
45
    //环境光
46
    var ambient = new THREE.AmbientLight(0x444444);
47
    scene.add(ambient);
48