Three.js 学习记录

首先，你要引入three.js 插件，这里默认你已经安装好了该插件

three.js 使用时必要的模块有：渲染器，相机，光源，场景，以及你要的加载模型

在vue页面中引入

import * as THREE from "three";

import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

// 这里的loader是模型加载器，你需要找到对应模型的加载器，OrbitControls是必须要引入的

在methods方法里写

第一个，初始化渲染器

initRenderer() {
      // 获取盒子的宽度
      width = document.getElementById("box").clientWidth;
      // 获取盒子的高度
      height = document.getElementById("box").clientHeight;
      // 初始化渲染器
      renderer = new THREE.WebGLRenderer({
        // 开启抗锯齿
        antialias: true,
      });
      // 设置宽和高
      renderer.setSize(550, 600);
      // 开启渲染气阴影效果
      renderer.shadowMap.enabled = true;
      // 这个阴影类型看起来比较清晰
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      // 设置渲染器阴影
      renderer.setClearColor("#e2e8f6", 1.0);
      // 添加渲染器类名
      renderer.domElement.classList.add("Model3D");
      // 将渲染器添加到dom
      this.$refs.model.appendChild(renderer.domElement); // 添加到dom
},

第二个，初始化场景

initScene() {
      // 实例化场景
      scene = new THREE.Scene();
    // 场景中可以添加坐标轴，此处未添加
},

第三个，初始化相机

此处，应当了解正投影相机和透视投影相机的区别

initCamera() {
      // 实例化相机
      // 分别是正投影相机OrthographicCamera和透视投影相机PerspectiveCamera
      // 参数分别为fov，aspect，near，far
      // fov:垂直视野角度，一般默认为45
      // aspect表示摄像机视锥体长宽比，一般默认为1，实际用为项目的宽高比
      // near表示摄像机视锥体近端面，这个值默认为0.1
      // far表示摄像机视锥体远端面，默认为2000
      camera = new THREE.PerspectiveCamera(45, 550 / 600, 0.1, 1000000);
      // 摄像机位置设定
      camera.position.set(50, 25, 25);
      // lookAt表示相机拍摄时指向的中心点
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      // 通过OrbitControls.js可以对Threejs 的三维场景进行缩放，平移，旋转操作，其本质上改变的幷不是场景，而是相机的参数。
      controls = new OrbitControls(camera, renderer.domElement);
      // 垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0
      controls.minPolarAngle = 0;
      // 垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
      controls.maxPolarAngle = Math.PI / 2;
      // 自动围绕目标旋转。请注意，如果它被启用，你必须在你的动画循环里调用.update()。
      controls.autoRotate = true;
    },

第四个，初始化灯光

此处，应当了解平行光和环境光的区别

initLight() {
      // 场景里添加环境光
      scene.add(new THREE.AmbientLight(0xffffff));
      // 平行光
      var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
      directionalLight.position.set(50, 52, 100);
      // 平行光会产生动态阴影
      directionalLight.castShadow = true;
      // 方向光指向对象网格模型mesh2，可以不设置，默认的位置是0,0,0
      scene.add(directionalLight);
    },

第五个，加载模型

模型有很多类型，请选择对应类型的加载器

注意：fbx模型需要查看材质在three.js 中是否有，如果没有对应的材质，模型会加载不出来，需要单独设置材质

initModel() {
      // gltf加载器
      const loader = new GLTFLoader();
      // draco加载器
      const dracoLoader = new DRACOLoader();
      // 引入这个文件夹
      dracoLoader.setDecoderPath("/draco/");
      loader.setDRACOLoader(dracoLoader);
      // 加载地图模型
      // /model/16.02.glb
      loader.load(
        "https://file.channovers.com/488760-bladex/upload/20220816/be68c580e6ff3a34a0c2e7974193205e.glb",
        (gltf) => {
          // 启用阴影选项
          gltf.scene.castShadow = true;
          // 启用接受阴影选项
          gltf.scene.receiveShadow = true;
          // 场景对象
          // 此处可以不考虑
          gltf.scene.children = this.findName(gltf.scene.children);
          //将模型添加至场景
          scene.add(gltf.scene);
          //设置模型位置
          gltf.scene.position.set(-18, 0, -22);
          ogltf = gltf;
        },
        (load) => {
          // load加载
          this.load = ((load.loaded / load.total) * 100).toFixed(2);
        }
      );
    },

第六个，变动更新

animate() {
      // requestAnimationFrame() 是将要被调用函数的函数名
      // 一般默认保持60FPS
      requestAnimationFrame(this.animate);
      // 更新控制
      controls.update();
      // 渲染器更新
      renderer.render(scene, camera);
      if (mixer) {
        mixer.update(clock.getDelta());
      }
    },