three、vue中使用three、three怎么加载obj模型和mtl文件、three自定义800*800大小怎么拾取/点击_const elementwidth = this.$refs.container.clientwi

以上都是这一个星期碰到的坑，找了很多很多资料，总结归纳一下，希望对你的项目有一点点帮助

先说说需求

1.加载3D模型

2.点击模型的子模型会显示对于子模型名称

3.不全屏展示，还要点击子模型

4.创建控制器的时候注意传入dom

我并没有很全面的学习three，虽然有课程，但是项目进度并不允许，只能踩着石头过河，查找前辈们总结的经验，在这里归纳总结一下

效果图

我这个项目替换自己的obj时可能会报错，因为每个obj文件的子模型的name不一样，解决方法

项目太丑，扎眼了，刚写好，不立刻记下笔记就忘了，自己优化 npm run serve

链接：https://pan.baidu.com/s/1fVZLTfuALxi4Gmpc6hGNfg 
提取码：ee0e 
复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V3的分享
1
2
3

记录这几天挣扎的崩溃的内心

1.vue引入three 不用在main中做配置

import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import { CSS2DRenderer, CSS2DObject } from "three-css2drender";
const OrbitControls = require("three-orbit-controls")(THREE);
1
2
3
4

或者直接在package.json中dependencies和devDependencies对象中加入下面的
然后 npm install

 "dependencies": {
    "three-css2drender": "^1.0.0",
    "three-obj-mtl-loader": "^1.0.3"
  },
  "devDependencies": {
    "three": "^0.123.0",
    "three-obj-mtl-loader": "^1.0.3"
  },
1
2
3
4
5
6
7
8

2.在return中定义若干变量

听说不能直接赋值，vue会监听，也没研究那么深，人家竟然这么说，也就没定义值

data() {
    return {
      axes: "",
      group: "",
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: "",
      directionalLight: "",
      ambient: "",
      loader: "", //地板
      glass_material: "",
      publicPath: process.env.BASE_URL,
      m1: "",
      m2: "",
      m3: "",
      mouse: "",
      objects: [],
      raycaster: "",
      getBoundingClientRect: {},
      offsetWidth: "",
      offsetHeight: "",
      theta: 0, //相机旋转角度
      cord1: {},
      cord2: {},
      cord3: {},
      cord4: {},
      selectObject: {}, //被点击的第一个元素
    };
  },
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

2.看mounted的钩子有三个方法要执行

mounted() {
    this.init();
    this.loadObj();
    this.animate();
  },
1
2
3
4
5

先看第一个方法 this.init();

就是给return中没赋值的变量赋值成new出来的three实例

这里是：因为我加载的obj模型是有四个子模块组成的打印的时候它的child有四个，才定义四个的

      this.cord1 = new THREE.Object3D();
      this.cord2 = new THREE.Object3D();
      this.cord3 = new THREE.Object3D();
      this.cord4 = new THREE.Object3D();
1
2
3
4

接下来：创建一个场景

this.scene = new THREE.Scene();
1

接下来：在three.js，可以利用THREE.Raycaster来达到点击与交互，即选择物体的操作。点击事件少不了的东西

   this.raycaster = new THREE.Raycaster();
1

接下来：因为是小白，就给自己加载的模型放了个长500的坐标轴方便观看

   this.scene.add(new THREE.AxesHelper(500));
1

接下来：得创建相机了，因为不想弄全屏的模型展示，做个800x800的，要是想做全屏的就用window.innerWidth/window.innnerHeight,因为800/800为1，担心不知道是哪个一，第二个参数

	 /**
       * @param {
       * 初始化相机
       * }
       */
      this.camera = new THREE.PerspectiveCamera(
        1,
        // window.innerWidth / window.innerHeight,
        800/800,
        1,
        10000
      );
1
2
3
4
5
6
7
8
9
10
11
12

接下来设置相机的位置还是什么东西，自己查查这个api就会有介绍，反正我不懂，瞎设置呗，然后就把相机add到scene(场景)中

    this.camera.position.set(0, 1000, 1000);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      // this.camera.lookAt(0, 0, 0);
      this.scene.add(this.camera);
1
2
3
4

接下来：既然有点击获取当前的obj模型模块，当然得获取下鼠标的位置吧

   //鼠标的位置
   this.mouse = new THREE.Vector2();
1
2

接下来：渲染器，干什么的？依次的设置是，alpha: true, antialias: true,加了好像清楚一点，然后就是渲染大小当然我的是800x800的全屏就用window.innerWidth, window.innerHeight，渲染显示比例，渲染背景颜色，最后是追加到dom节点

      /**
       * @param {
       * 渲染器
       * }
       */
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
      });
      // this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setSize(800, 800);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearColor(0x87ceeb, 1.0);
      const container = document.getElementById("container");
      container.appendChild(this.renderer.domElement);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

接下来：控制器，不添加模型不能旋转，开始找了好多参数加里面，最后发现还是什么都不加效果控制的更舒坦一点

 /**
       * @param {
       * 控制器
       * }
       */
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      // this.controls.autoRotate=true;
      // this.controls.target.set(0, 0, 0);
      // this.controls.minDistance = 80;
      // this.controls.maxDistance = 400;
      // this.controls.maxPolarAngle = Math.PI / 3;
      this.controls.update();
1
2
3
4
5
6
7
8
9
10
11
12

接下来：定义光线，就是有点光打在引入的3d模型上，让模型能正常显示颜色，要不然就是黑白的，参数乱设置的，也没搞懂

  /**
       * @param {
       * 定义光线
       * }
       */
      this.directionalLight = new THREE.DirectionalLight(0xc1c1c1, 1);
      // 光线照射的方向
      this.directionalLight.position.set(0, 1000, 1000).normalize();
      this.scene.add(this.directionalLight);
      this.ambient = new THREE.AmbientLight(0xffffff, 1);
      this.ambient.position.set(0, 0, 0);
      this.scene.add(this.ambient);
1
2
3
4
5
6
7
8
9
10
11
12

接下来 外部obj，mtl 模型加载方法，碰的坑不亚于点击函数

1.设计人员给了obj mtl 我给放到项目的public/models文件夹下，路径怎么设置？，设置成/models/ssz.obj项目报错，找不到文件，经过查找总算找到了不报错的方法 在return中定义 publicPath: process.env.BASE_URL 在引用路径的时候 mtlLoader.load(${that.publicPath}models/zzs.mtl,function(){})

2.设计人员在做模型的时候用了图片做材质，可是没给我图片包–.--，都是第一次做，采坑

3.设计人员给我材质后还是找不到材质，打开mtl文件一看mtl文件下map_Ka D:\Windo\E\03����.fbm\1.jpg map_Kd D:\Windo\E\03����.fbm\1.jpg 可是在我的电脑完全没有D盘，全部手动修改map_Ka /models/1.jpg map_Kd /models/1.jpg

4.总算引入成功了，可能反正还有一个报错（反正我的报错了）Handlers.get() has been removed. Use LoadingManager.getHandler() instead 错误处理

需要在node_module > three-obj-mtl-loader > index.js中找到第543行并注释掉。在 545行重新定义loader

// var loader = THREE.Loader.Handlers.get( url );

var loader = manager.getHandler(url);
1
2
3

在methods中定义的loadObj（加载obj模型）函数代码

loadObj() {
      let that = this;
      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      let textureLoader = new THREE.TextureLoader();
      // mtlLoader.load(`${that.publicPath}models/zzs.mtl`, function (materials) {
      mtlLoader.load(
        `${that.publicPath}models/zzs.mtl`,
        // `${that.publicPath}models/object.mtl`,
        function (materials) {
          objLoader.setMaterials(materials);
          objLoader.load(
            // `${that.publicPath}models/object.obj`,
            `${that.publicPath}models/zzs.obj`,
            function (obj) {
              obj.scale.multiplyScalar(1);
              obj.traverse(function (child) {
                console.log(child.name, "ddddd");
                // 这里把匹配的模块单独提取出来，如果想让其中一个子模块动
                // 到时候直接可以在函数外面methed中写一个方法设置，比方说
                //就单独让m3这个子模块单独动了
                // that.m3.position.x -= 0.1;
                // that.m3.position.y -= 0.1;
                // that.m3.position.z -= 0.1;
                if (child instanceof THREE.Mesh) {
                  if (child.name == "Box001") {
                    that.m1 = child;
                  } else if (child.name == "Cylinder002") {
                    that.m2 = child;
                  } else if (child.name == "Cylinder003") {
                    //圆柱
                    that.m3 = child;
                  } else if (child.name == "Cylinder004") {
                    //圆柱
                    that.m4 = child;
                  }
                }
              });
              // 这里是做关联，比方说我要移动m4模块，整个模块都会跟着动
              // 我要移动m3模块，只有m3,m2,m1模块会动
              that.cord4.add(that.m4);
              that.cord3.add(that.m3, that.cord4);
              that.cord2.add(that.m2, that.cord3);
              that.cord1.add(that.m1, that.cord2);
              that.scene.add(that.cord1);
              that.render();
              return obj;
              /**
               * @param {
               * 将模型加入场景中
               * }
               */
              // that.scene.add(obj);
              /**
               * @param {
               * 将纹理加入模型中
               * }
               */
              // that.renderer.render(that.scene, that.camera);
            },
            function (xhr) {
              console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            function (error) {
              console.log("An error happened");
            }
          );
        }
      );
    },
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

接下来：添加窗口监听事件，固定宽高的就不用了了吧，800x800监听window窗口大小不还是800x800展示么，不过像是用window.innerWidth做长window.innerHeight做宽全屏展示的还是要监听的

window.addEventListener("resize", this.onWindowResize, false);
1

然后这是this.onWindowResize的方法，卸载methods中就行

 /**
     * @param {
     * 窗口监听函数
     * }
     */
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
1
2
3
4
5
6
7
8
9
10

接下来：点击总得有个点击事件，
一、这个是800x800固定宽高的点击函数写法，因为不需要监听点击全屏啊，监听当前的dom容器就行了

this.$refs.container.addEventListener("click", this.clickTest, false);
1

二、这个是设置长window.innerWidth宽window.innerHeight的写法

window.addEventListener("click", this.clickTest, false);
1

三、点击函数方法：在methods中定义clickTest方法
开始只知道全屏的点击可以点击到模型本身并不知道800x800这种自定义宽高的怎么点击到当前obj模型，总是匹配不到，全网都没找到这个方法，可能全网就我是最笨的，
window.innerWidth x window.innerHeight全屏大小的写法

this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
1
2

800x800写法：因为监听的是当前的dom元素的点击区域，发现event对象中有layerX 和layerY 两个参数非常可疑，正是鼠标点击dom元素上在dom元素自身上的坐标，参考上面全屏写法所以就懂了。
this.raycaster.intersectObjects(this.objects);是判断当前点击的位置与照相机的位置相链接成一条直线，哪些模型会在这条线上，返回一个数组，这个数组如果有值，第[0]位就是最上面的，也就是所谓点击的这么模型中的子模块

 	  this.mouse.x = (event.layerX / 800) * 2 - 1;
      this.mouse.y = -(event.layerY / 800) * 2 + 1;
1
2

    //点击事件
    clickTest(event) {
      console.log(event)
      event.preventDefault();
      this.objects = [];
      // this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.x = (event.layerX / 800) * 2 - 1;
      this.mouse.y = -(event.layerY / 800) * 2 + 1;
      // this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      this.raycaster.setFromCamera(this.mouse, this.camera);
      this.scene.children.forEach((child) => {
        //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
        if (
          !(child instanceof THREE.GridHelper) &&
          !(child instanceof THREE.DirectionalLight) &&
          !(child instanceof THREE.AmbientLight)
        ) {
          child.children.forEach((childv) => {
            if (childv instanceof THREE.Mesh) {
              //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
              this.objects.push(childv);
            } else if (childv instanceof THREE.Object3D) {
              this.meshDg(childv.children);
            }
          });
        }
      });
      console.log(this.objects, 6666666 + "obj");
      var intersects = this.raycaster.intersectObjects(this.objects);
      console.log(intersects, 8888 + "intersects");

      if (
        intersects.length != 0 &&
        intersects[0].object instanceof THREE.Mesh
      ) {
        this.selectObject = intersects[0].object;
        this.changeMaterial(this.selectObject);
        console.log(this.selectObject.name);
        // $("#alert_center").css({
        //   display: "block",
        // });
        // $("#alert_font").html(
        //   "当前点击的模块名字是：" + this.selectObject.name
        // );
        this.render();
      }
    },
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

点击事件，点击后改变当前对象的方法：在methods中定义，点击了给它变个颜色看看，纯属个人无聊

    /**
     * @param {
     * 改变当前对象属性
     * }
     */
    changeMaterial(object) {
      var material = new THREE.MeshLambertMaterial({
        color: 0xffffff * Math.random(),
      });
      object.material = material;
    },
1
2
3
4
5
6
7
8
9
10
11

动画：写完后面，就忘了前面，写着不报错无关痛痒，在methods中定义

    /**
     * @param {
     * 动画
     * }
     */
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
1
2
3
4
5
6
7
8
9

渲染：忘了具体干嘛的，应该少不了：在methos中定义

 /**
     * @param {
     * 渲染
     * }
     */
    render() {
      this.renderer.render(this.scene, this.camera);
    },
1
2
3
4
5
6
7
8

下面代码复制下来也跑不了的，模型什么的都需要更改

   <template>
  <div class="spring">
    <!-- <div class="box"></div> -->
    <div id="container" ref="container"></div>
  </div>
</template>
<script>
import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import { CSS2DRenderer, CSS2DObject } from "three-css2drender";
const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      axes: "",
      group: "",
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: "",
      directionalLight: "",
      ambient: "",
      loader: "", //地板
      glass_material: "",
      publicPath: process.env.BASE_URL,
      m1: "",
      m2: "",
      m3: "",
      mouse: "",
      objects: [],
      raycaster: "",
      getBoundingClientRect: {},
      offsetWidth: "",
      offsetHeight: "",
      theta: 0, //相机旋转角度
      cord1: {},
      cord2: {},
      cord3: {},
      cord4: {},
      selectObject: {}, //被点击的第一个元素
    };
  },
  created() {},
  mounted() {
    this.init();
    this.loadObj();
    this.animate();
  },
  methods: {
    /**
     * @param {
     * 初始化three.js相关内容}
     */
    init() {
      /**
       * @param {
       * 场景
       * }
       */
      this.cord1 = new THREE.Object3D();
      this.cord2 = new THREE.Object3D();
      this.cord3 = new THREE.Object3D();
      this.cord4 = new THREE.Object3D();
      this.scene = new THREE.Scene();
      this.raycaster = new THREE.Raycaster();
      /**
       * @param {
       * 世界坐标系
       * }
       */
      this.scene.add(new THREE.AxesHelper(500));
      // var helper = new THREE.GridHelper(3000, 50, 0xcd3700, 0x4a4a4a);
      // this.scene.add(helper);
      /**
       * @param {
       * 初始化相机
       * }
       */
      this.camera = new THREE.PerspectiveCamera(
        1,
        // window.innerWidth / window.innerHeight,
        1,
        1,
        10000
      );

      this.camera.position.set(0, 1000, 1000);
      this.camera.lookAt(new THREE.Vector3(0, 0, 0));
      // this.camera.lookAt(0, 0, 0);
      this.scene.add(this.camera);
      //鼠标的位置
      this.mouse = new THREE.Vector2();

      /**
       * @param {
       * 渲染器
       * }
       */
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
      });
      // this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setSize(800, 800);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearColor(0x87ceeb, 1.0);
      const container = document.getElementById("container");
      container.appendChild(this.renderer.domElement);

      /**
       * @param {
       * 获取当前dom元素坐标
       * }
       */
      this.getBoundingClientRect = this.$refs.container.getBoundingClientRect();
      this.offsetWidth = this.$refs.container.offsetWidth;
      this.offsetHeight = this.$refs.container.offsetHeight;

      /**
       * @param {
       * 控制器
       * }
       */
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.update();

      /**
       * @param {
       * 定义光线
       * }
       */
      this.directionalLight = new THREE.DirectionalLight(0xc1c1c1, 1);
      // 光线照射的方向
      this.directionalLight.position.set(0, 1000, 1000).normalize();
      this.scene.add(this.directionalLight);
      this.ambient = new THREE.AmbientLight(0xffffff, 1);
      this.ambient.position.set(0, 0, 0);
      this.scene.add(this.ambient);

      /**
       * @param {
       * 添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
       * }
       */
      this.$refs.container.addEventListener("click", this.clickTest, false);
        // window.addEventListener("resize", this.onWindowResize, false);
    },
    /**
     * @param {
     * 外部模型加载函数
     * }
     */
    loadObj() {
      let that = this;
      let objLoader = new OBJLoader();
      let mtlLoader = new MTLLoader();
      let textureLoader = new THREE.TextureLoader();
      // mtlLoader.load(`${that.publicPath}models/zzs.mtl`, function (materials) {
      mtlLoader.load(
        `${that.publicPath}models/zzs.mtl`,
        // `${that.publicPath}models/object.mtl`,
        function (materials) {
          objLoader.setMaterials(materials);
          objLoader.load(
            // `${that.publicPath}models/object.obj`,
            `${that.publicPath}models/zzs.obj`,
            function (obj) {
              obj.scale.multiplyScalar(1);
              obj.traverse(function (child) {
                console.log(child.name,'ddddd')
                if (child instanceof THREE.Mesh) {
                  if (child.name == "Box001") {
                    that.m1 = child;
                  } else if (child.name == "Cylinder002") {
                    that.m2 = child;
                  } else if (child.name == "Cylinder003") {
                    that.m3 = child;
                  }else if (child.name == "Cylinder004") {
                    that.m4 = child;
                  }
                }
              });
              that.cord4.add(that.m4);
              that.cord3.add(that.m3, that.cord4);
              // console.log(999);
              // that.cord3.add(that.m3);
              that.cord2.add(that.m2, that.cord3);
              that.cord1.add(that.m1, that.cord2);
              that.scene.add(that.cord1);
              that.render();
              return obj;
            },
            function (xhr) {
              console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            function (error) {
              console.log("An error happened");
            }
          );
        }
      );
    },
    //递归  收集  THREE.Mesh
    meshDg(child) {
      child.forEach((childv) => {
        if (childv instanceof THREE.Mesh) {
          //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
          this.objects.push(childv);
        } else if (childv instanceof THREE.Object3D) {
          this.meshDg(childv.children);
        }
      });
    },
    //点击事件
    clickTest(event) {
      console.log(event)
      event.preventDefault();
      this.objects = [];
      // this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.x = (event.layerX / 800) * 2 - 1;
      this.mouse.y = -(event.layerY / 800) * 2 + 1;
      // this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      this.raycaster.setFromCamera(this.mouse, this.camera);
      this.scene.children.forEach((child) => {
        //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
        if (
          !(child instanceof THREE.GridHelper) &&
          !(child instanceof THREE.DirectionalLight) &&
          !(child instanceof THREE.AmbientLight)
        ) {
          child.children.forEach((childv) => {
            if (childv instanceof THREE.Mesh) {
              //根据需求判断哪些加入objects,也可以在生成object的时候push进objects
              this.objects.push(childv);
            } else if (childv instanceof THREE.Object3D) {
              this.meshDg(childv.children);
            }
          });
        }
      });
      console.log(this.objects, 6666666 + "obj");
      var intersects = this.raycaster.intersectObjects(this.objects);
      console.log(intersects, 8888 + "intersects");

      if (
        intersects.length != 0 &&
        intersects[0].object instanceof THREE.Mesh
      ) {
        this.selectObject = intersects[0].object;
        this.changeMaterial(this.selectObject);
        console.log(this.selectObject.name);
        //这里找的代码，用到了jq，用vue就更简单了
        // $("#alert_center").css({
        //   display: "block",
        // });
        // $("#alert_font").html(
        //   "当前点击的模块名字是：" + this.selectObject.name
        // );
        this.render();
      }
    },
    /**
     * @param {
     * 改变当前对象属性
     * }
     */
    changeMaterial(object) {
      var material = new THREE.MeshLambertMaterial({
        color: 0xffffff * Math.random(),
      });
      object.material = material;
    },
    /**
     * @param {
     * 动画
     * }
     */
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },

    /**
     * @param {
     * 渲染
     * }
     */
    render() {
      this.renderer.render(this.scene, this.camera);
    },

    /**
     * @param {
     * 窗口监听函数
     * }
     */
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      // this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setSize(800, 800);
    },
  },
  computed: {},
};
</script>
<style lang='scss' scoped>
.spring {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  width: 100%;
  height: 100px;
}
</style>
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324