three-example/demo/load-3d.html at master · winterZhao/three-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>基于单例模式的基础three.js模板——加载3d模型</title>
  <style>
      #root {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 600px;
        background-color: #eee;
      }
  </style>
</head>
<body>
  <p>three.js与OBJLoader.js 最好对应上,否则会有版本不一致导致功能不可用现象</p>
  <div id="root"></div>
  <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
  <script src="../loaders/OBJLoader.js"></script>
  <script src="../loaders//VTKLoader.js"></script>
  <script>
      const obj = {
        renderer: null,
        camera: null,
        width: null,
        height: null,
        scene: null,
        light: null,
        mesh: null,
        group: null,
        group2: null,
        isExpand: true,  // true表示放大,false表示缩小;
        init() {
          this.initThree();   // 初始化three
          this.initScene();   // 初始化场景
          this.initCamera();  // 初始化相机
          this.initLight();   // 初始化灯光
          this.initAxios();   // 初始化轴线：
          this.initObject();  // 初始化物体

          this.render();      // 渲染
        },
        initThree() {
          let width = this.width = document.getElementById('root').clientWidth;
          let height = this.height = document.getElementById('root').clientHeight;
          let renderer = this.renderer = new THREE.WebGLRenderer({
            antialias: true
          });
          renderer.setSize(width, height);
          document.getElementById('root').appendChild(renderer.domElement);
          renderer.setClearColor(0xFFFFFF, 1);
        },
        // 初始化场景
        initScene() {
          this.scene = new THREE.Scene();
        },
        // 初始化照相机
        initCamera() {
          // 初始化照相机
          let camera = this.camera = new THREE.PerspectiveCamera(45, this.width/this.height, 1, 10000);
          // 照相机的位置
          camera.position.x = 100;
          camera.position.y = 300;
          camera.position.z = 600;
          // 相机的头部在坐标轴的方向(相机以哪个方向为上方，默认y轴为上方)
          camera.up.x = 0;
          camera.up.y = 1;
          camera.up.z = 0;
          // 照相机的朝向,照相机默认朝向是z轴负半轴,当照相机的位置改变后,继续朝向z轴负半轴的话很有可能看不到物体，这时候需要改变照相机的朝向。
          camera.lookAt({
            x: 0,
            y: 0,
            z: 0,
          })
        },
        initAxios() {
          let helper = new THREE.AxisHelper( 200 );
          this.scene.add(helper);
        },
        // 初始化灯光
        initLight() {
          // 灯光类型: 平行光
          let light = this.light = new THREE.DirectionalLight(0xFF0000, 1, 0);
          // 灯光的位置
          light.position.set(100,100,200);
          // 把灯光添加到场景上;
          this.scene.add(light);
        },
        // 初始化物体
        initObject() {
          let manager = new THREE.LoadingManager();
          // objLoader;
          let objLoader = new THREE.OBJLoader(manager);
          objLoader.load('/models/model.obj', (object) => {
            let group = this.group =  new THREE.Group();
            group.add(object);
            group.position.set(0,10,-100)
            this.scene.add(group);
          });

          // vtkLoader
          let vtkLoader = new THREE.VTKLoader();
          vtkLoader.load('/models/model.vtk');
        },
        // 渲染器渲染
        render() {

          if (this.group) this.group.rotation.y += .01;
          this.renderer.clear();
          this.renderer.render(this.scene, this.camera);
          // requestAnimationFrame允许不停的调用传入的参数方法，一般用来渲染动画;
          // requestAnimationFrame,它告诉浏览器在合适的时候调用指定函数，通常可能达到60FPS
          requestAnimationFrame(this.render.bind(this));
        }
      }
      obj.init();

  </script>
</body>
</html>