Threejs入门，拖拽，缩放，三维

ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ（仅有把抱怨环境的心境，化为上进的力量，才是成功的保证。——罗曼·罗兰）
ㅤㅤㅤ
ㅤㅤㅤ
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
官方文档

效果预览

源码

使用vue-cli脚手架完成搭建

核心代码

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <!-- 作为Three.js渲染器输出元素 -->
    <div id="WebGLwxp" align="center"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import * as _ from "lodash";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const result = [
  [
    [
      [
        19.656729325252545,
        -9.796301440500137,
        -1
      ],
      [
        19.656729325252545,
        -9.796301440500137,
        1
      ],
      [
        18.684060725252547,
        -11.543847040500136,
        -1
      ],
      [
        18.684060725252547,
        -11.543847040500136,
        1
      ],
      [
        89.52300108102305,
        -48.683257372239396,
        -1
      ],
      [
        89.52300108102305,
        -48.683257372239396,
        1
      ],
      [
        88.55033248102306,
        -50.43080297223939,
        -1
      ],
      [
        88.55033248102306,
        -50.43080297223939,
        1
      ]
    ],
    [
      [
        115.05974848102305,
        -48.7572704722394,
        -1
      ],
      [
        115.05974848102305,
        -48.7572704722394,
        1
      ],
      [
        116.08982468102305,
        -50.4716050722394,
        -1
      ],
      [
        116.08982468102305,
        -50.4716050722394,
        1
      ],
      [
        184.69242654313845,
        -6.917734354816808,
        -1
      ],
      [
        184.69242654313845,
        -6.917734354816808,
        1
      ],
      [
        185.72250274313845,
        -8.632068954816809,
        -1
      ],
      [
        185.72250274313845,
        -8.632068954816809,
        1
      ]
    ],
    [
      79.95931179795309,
      81.23580783134797
    ],
    [
      30.09993135686745,
      30
    ]
  ],
  [
    [
      [
        1149.0676867151885,
        -9.8578618,
        -1
      ],
      [
        1149.0676867151885,
        -9.8578618,
        1
      ],
      [
        1150.3781866151885,
        -11.1683617,
        -1
      ],
      [
        1150.3781866151885,
        -11.1683617,
        1
      ],
      [
        1212.1896159446271,
        16.832533157395066,
        -1
      ],
      [
        1212.1896159446271,
        16.832533157395066,
        1
      ],
      [
        1213.500115844627,
        15.522033257395067,
        -1
      ],
      [
        1213.500115844627,
        15.522033257395067,
        1
      ]
    ],
    [
      [
        1402.3928979558505,
        0.6702108,
        -1
      ],
      [
        1402.3928979558505,
        0.6702108,
        1
      ],
      [
        1401.2469813558503,
        -0.4757058,
        -1
      ],
      [
        1401.2469813558503,
        -0.4757058,
        1
      ],
      [
        1273.9109426972825,
        21.30447933613293,
        -1
      ],
      [
        1273.9109426972825,
        21.30447933613293,
        1
      ],
      [
        1272.7650260972823,
        20.15856273613293,
        -1
      ],
      [
        1272.7650260972823,
        20.15856273613293,
        1
      ]
    ],
    [
      68.53287374293868,
      130.12833900364214
    ]
  ]
];
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    method() {
      //创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
      var scene = new THREE.Scene();

      //创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
      camera.position.x = 0;
      camera.position.y = 1000;
      camera.position.z = 0;
      camera.up.x = 0;
      camera.up.y = 0;
      camera.up.z = 0;
      //设置摄像机的位置，并让其指向场景的中心（0,0,0）
      camera.position.set(10.0, -20, 10);
      camera.up.set(0, 0, 1);
      // camera.lookAt(scene.position);
      camera.lookAt(new THREE.Vector3(0, 0, 0));

      //创建一个WebGL渲染器并设置其大小,设置抗锯齿设置
      var renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setClearColor(new THREE.Color(0x7696f1));
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置

      //系统坐标系绘制-----------------------------------------
      var axesHelper = new THREE.AxesHelper(100);
      scene.add(axesHelper);

      //网格线绘制
      var grid = new THREE.GridHelper(600, 5, 'red', 'white');
      grid.material.opacity = 0.4;
      grid.material.transparent = true;
      grid.rotation.x = Math.PI / 2.0;
      scene.add(grid);

      // 使用挤压形成立体
      // const list3 = [
      //   [-5, 5],
      //   [-5, 10],

      //   [-10, 10],
      //   [-10, 5],

      // ];
      // const pts2 = [];
      // for (let i = 0; i < list3.length; i++) {
      //   pts2.push(new THREE.Vector2(list3[i][0], list3[i][1]));
      // }
      // const shape2 = new THREE.Shape(pts2);
      // const material2 = new THREE.MeshLambertMaterial({ color: 0xff8000 });
      // const material1 = new THREE.MeshLambertMaterial({ color: 0xb00000 });
      // const materials = [material1, material2];
      // const extrudeSettings3 = {
      //   depth: 10,
      //   steps: 4,
      //   bevelEnabled: false,
      //   bevelThickness: 2,
      //   bevelSize: 4,
      //   bevelSegments: 3
      // };
      // const geometry3 = new THREE.ExtrudeGeometry(shape2, extrudeSettings3);
      // const mesh3 = new THREE.Mesh(geometry3, materials);
      // // mesh3.rotation.x = Math.PI / 2 + (15 * Math.PI) / 180;
      // scene.add(mesh3);
      const func = (front1, front2) => {
        const list1 = front1;
        const t1 = () => {
          const material = new THREE.LineBasicMaterial({
            color: 0x0000ff
          });
          const points = this.getIndex3(list1)
          new THREE.Shape().setFromPoints(points);
          const geometry = new THREE.BufferGeometry().setFromPoints(points);
          const line = new THREE.Line(geometry, material);
          line.position.set(0, -10, 0);
          scene.add(line);
        };
        t1();
        const list2 = front2;
        const t2 = () => {
          const material = new THREE.LineBasicMaterial({
            color: 0x0000ff
          });
          const points = this.getIndex3(list2)
          new THREE.Shape().setFromPoints(points);
          const geometry = new THREE.BufferGeometry().setFromPoints(points);
          const line = new THREE.Line(geometry, material);
          line.position.set(0, -10, 0);
          scene.add(line);
        }
        t2();
        console.log(list1, list2);
        const t3 = (list3) => {
          const material = new THREE.LineBasicMaterial({
            color: 0x0000ff
          });
          const points = this.getIndex3(list3)
          new THREE.Shape().setFromPoints(points);
          const geometry = new THREE.BufferGeometry().setFromPoints(points);
          const line = new THREE.Line(geometry, material);
          line.position.set(0, -10, 0);
          scene.add(line);
        }
        list1.map((v, i) => {
          if (i > 3) {
            return;
          }
          const list3 = [
            v,
            list2[i]
          ];
          t3(list3);
        })
      };
      for (const item of result) {
        const front = item[0];
        const back = item[1];
        const front1 = [..._.cloneDeep(front).splice(0, 4), front[0]];
        const front2 = [..._.cloneDeep(front).splice(4, 4), front[4]];
        console.log('front', front2);
        const back1 = [..._.cloneDeep(back).splice(0, 4), back[0]];
        const back2 = [..._.cloneDeep(back).splice(4, 4), back[4]];
        func(front1, front2);
        func(back1, back2);
      }

      //创建点光源 正上面
      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(0, 0, 50);
      spotLight.castShadow = true;
      // scene.add(spotLight);

      //右上角
      var spotLight2 = new THREE.SpotLight(0xffffff);
      spotLight2.position.set(10, 10, 5);
      spotLight.castShadow = true;
      scene.add(spotLight2);

      //右下角
      var spotLight3 = new THREE.SpotLight(0xffffff);
      spotLight3.position.set(10, -10, 0);
      spotLight3.castShadow = true;
      scene.add(spotLight3);

      //左下角
      var spotLight4 = new THREE.SpotLight(0xffffff);
      spotLight4.position.set(-10, -10, -5);
      spotLight4.castShadow = true;
      scene.add(spotLight4);

      //将渲染的结果输出到指定页面元素中
      document.getElementById("WebGLwxp").appendChild(renderer.domElement);

      //存放有所有需要改变的属性的对象

      var objects = [];
      for (let i = 0; i < scene.children.length; i++) {
        if (scene.children[i].isMesh) {
          objects.push(scene.children[i]);
        }
      }
      const controls2 = new OrbitControls(camera, renderer.domElement);
      controls2.addEventListener('change', render);

      //渲染场景
      render();

      //渲染场景
      function render() {



        //通过requestAnimationFrame方法在特定时间间隔重新渲染场景
        // requestAnimationFrame(render);
        //渲染场景
        renderer.render(scene, camera);
      }
    },
    getIndex3(list) {
      return list.map((v) => new THREE.Vector3(v[0], v[2], v[1]))
    }
  },
  mounted() {
    this.method();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

// package.json
{
  "name": "testindex",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "lodash": "^4.17.21",
    "three": "^0.144.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/three": "^0.144.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}