案例:Three 几何体建模2直线     状态:可编辑再运行    进入竖版
 运行结果 
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(); //声明一个几何体对象Geometry
23
var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
24
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
25
// 三维直线LineCurve3
26
var LineCurve = new THREE.LineCurve3(p1, p2);
27
// 二维直线LineCurve
28
var LineCurve = new THREE.LineCurve(new THREE.Vector2(50, 0), new THREE.Vector2(0, 70));
29
var pointArr = LineCurve.getPoints(10);
30
geometry.setFromPoints(pointArr);
31
      
32
var material = new THREE.LineBasicMaterial({
33
  color: 0xffff00,
34
});//材质对象
35
//线条模型对象
36
var line = new THREE.Line(geometry, material);
37
scene.add(line); //线条对象添加到场景中
38
      
39
      var geometry2 = new THREE.BufferGeometry(); //声明一个几何体对象Geometry
40
var p1 = new THREE.Vector2(150, 0); //顶点1坐标
41
var p2 = new THREE.Vector2(0, 70); //顶点2坐标
42
// 二维直线LineCurve
43
var LineCurve = new THREE.LineCurve(p1, p2);
44
var pointArr = LineCurve.getPoints(10);
45
geometry2.setFromPoints(pointArr);
46
     var material2 = new THREE.LineBasicMaterial({
47
  color: 0xff0000,
48
});//材质对象