案例:Three 透视投影相机PerspectiveCamera基础     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Three 透视投影相机PerspectiveCamera基础</title>
6
  <style>
7
    body {
8
      margin: 0;
9
      overflow: hidden;
10
      /* 隐藏body窗口区域滚动条 */
11
    }
12
  </style>
13
  <!--引入three.js三维引擎-->
14
  <script src="/js/threejs/threer92.js"></script>
15
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
16
</head>
17
18
<body>
19
  <script>
20
    /**
21
     * 创建场景对象Scene
22
     */
23
    var scene = new THREE.Scene();
24
    /**
25
     * 创建网格模型
26
     */
27
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
28
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
29
30
    //点材料球形
31
    var geometry1 = new THREE.SphereGeometry(70,25, 25);
32
    var material1 = new THREE.PointsMaterial({ //点材料
33
        color:0xff0000,  //颜色
34
        size:1, //点渲染尺寸
35
    });//材质对象
36
    var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
37
    scene.add(mesh1); //网格模型添加到场景中
38
      
39
    //线材料立方体
40
    var geometry2 = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
41
    var material2 = new THREE.LineDashedMaterial({
42
        color: 0x0000ff,
43
        dashSize: 10,//显示线段的大小。默认为3。
44
        gapSize: 5,//间隙的大小。默认为1
45
    });
46
    var line = new THREE.Line(geometry2, material2); //线模型对象
47
    line.computeLineDistances(); //该方法计算LineDashedMaterial所需的距离数组
48
    line.position.set(170,0,0);//设置mesh3模型对象的xyz坐标为120,0,0