vue中使用three.js导入外部3D模型

最近公司有一个需要用到3D模型的项目，所以就学习了一下，在这里小小的记录一下

下载依赖

npm i three -D
npm i three-obj-mtl-loader -D
npm i three-orbit-controls

导入依赖

import * as THREE from “three”;
import { OBJLoader, MTLLoader } from “three-obj-mtl-loader”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import {DDSLoader} from “three/examples/jsm/loaders/DDSLoader”;
import { CSS2DRenderer, CSS2DObject } from “three-css2drender”;
import { AmbientLight, LightShadow } from “three”;
const OrbitControls = require(“three-orbit-controls”)(THREE);

项目结构

依赖的版本

案例代码

这个地方有一个需要注意的位置就是在加载模型的时候的依赖 three-obj-mtl-loader 有所更新需要在node_modules文件夹下找到这个依赖修改index.js文件 修改为这样

还有一个点需要注意，就是材质包的导入路径问题

还有一个就是模型需要放到项目的根目录下和public下

<template>
  <div id="container"></div>
</template>
<script>
import * as THREE from "three";
import {
      OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import {
      GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {
     DDSLoader} from "three/examples/jsm/loaders/DDSLoader";
import {
      CSS2DRenderer, CSS2DObject } from "three-css2drender";
import {
      AmbientLight, LightShadow } from "three";
const OrbitControls = require("three-orbit-controls")(THREE);
export default {
     
  name: "vue-three",
  data() {
     
    return {
     
      scene: null,
      camera: null,
      renderer: null,
    };
  },
  methods: {
     
    // 初始化场景
    init() {
     
      let container = document.getElementById("container");
      /* 
        场景
      */
      this.scene = new THREE.Scene();
      /* 
        相机
      */
      this.camera = new THREE.PerspectiveCamera(
        30,
        container.clientWidth / container.clientHeight,
        1,
        1000
      );
      this.camera.position.z = 50;
      /* 
          渲染器
        */
      this.renderer = new THREE.WebGLRenderer({
      antialias: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setClearColor(0xb9d3ff, 1);
      container.appendChild(this.renderer.domElement);
      new OrbitControls(this.camera, this.renderer.domElement);
    },
    // 加载模型
    loadObj() {
     
      let manager = new THREE.LoadingManager();
      manager.addHandler( /\.dds$/i, new DDSLoader());
      new MTLLoader(manager)
      .setPath("/model/male02/")
        .load("male02.mtl", (materials) => {
     
          console.log(manager);
          materials.preload();
          new OBJLoader(manager)
            .setMaterials(materials)
            .load("/model/male02/male02.obj", (obj) => {
     
              console.log(obj.children[0].material);
              obj.scale.set(0.09, 0.09, 0.09);
               obj.position.set(0, -7, 0);
              this.scene.add(obj);
            });
        });
      // new GLTFLoader().load("/model/Duck/Duck.gltf", (obj) => {
     
      //   console.log(obj);
      //   this.scene.add(obj.scene);
      //   obj.scene.scale.set(5, 5, 5);
      // });
    },
    // 灯光效果
    light() {
     
      //添加聚光灯光源
      /*       let light = new THREE.SpotLight(0xffffff);
      light.position.set(-40, 60, -10);
      light.castShadow = true;
      light.shadow.mapSize.width = 2048;
      light.shadow.mapSize.height = 2048; */
      let light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      light.position.set(50, 200, 100);
      light.position.multiplyScalar(0.3);
      this.scene.add(light);
      //添加环境光
      let ambientLight = new THREE.AmbientLight("#ffffff");
      this.scene.add(ambientLight);
    },
    // 动画效果
    animate() {
     
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
  mounted() {
     
    this.init();
    this.loadObj();
    this.light();
    this.animate();
  },
};
</script>

<style scoped>
#container {
     
  width: 800px;
  margin: 0 auto;
  height: 500px;
  overflow: hidden;
}
</style>

可能出现的问题

1、模型是加载出来是黑色的
问题可能是没有加光源，可以尝试加一下环境光
2、材质包加载不出来
检测一下文件的路径，可以F12一下看看材质包有没有加载出来，文件的加载路径是不是写错了加载出来的话是这个效果

3、如果没有报错的话，材质包也加载出来了可以试试调整模型的大小和位置

还有一种比较简单的是使用vue-3d-model这个我下一篇文章会说，但是有一个缺点就是有比较严重的阴影问题

three的效果

vue-3d-model的效果

我自己写的Demo的地址可以自己下下来看看借鉴一下使用的是vue3.0

项目地址