案例:Three 几何体建模7网格管道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/three.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 p1 = new THREE.Vector3(-85.35, -35.36)
24
var p2 = new THREE.Vector3(-50, 0, 0);
25
var p3 = new THREE.Vector3(0, 50, 0);
26
var p4 = new THREE.Vector3(50, 0, 0);
27
var p5 = new THREE.Vector3(85.35, -35.36);
28
// 创建线条一:直线
29
let line1 = new THREE.LineCurve3(p1,p2);
30
// 重建线条2:三维样条曲线
31
var curve = new THREE.CatmullRomCurve3([p2, p3, p4]);
32
// 创建线条3:直线
33
let line2 = new THREE.LineCurve3(p4,p5);
34
var CurvePath = new THREE.CurvePath();// 创建CurvePath对象
35
CurvePath.curves.push(line1, curve, line2);// 插入多段线条
36
//通过多段曲线路径创建生成管道
37
//通过多段曲线路径创建生成管道,CCurvePath:管道路径
38
var geometry = new THREE.TubeGeometry(CurvePath, 100, 5, 25, false);
39
      
40
//材质对象
41
var material = new THREE.LineBasicMaterial({
42
  color: 0x000000
43
});
44
//线条模型对象
45
var line = new THREE.Line(geometry, material);
46
scene.add(line); //线条对象添加到场景中
47
      
48
    /**