Vue2使用Three.js并导入外部obj模型

准备工作

引入 Three

npm install --save three

我的Vue与Three版本

"vue": "^2.6.11",
"three": "^0.154.0",

寻找OBJ格式素材

1. 去GitHub下载Three.js项目 Three.js项目
2. OBJ素材模板 项目名: webgl_loader_obj_mtl
3. 在刚下载的Three.js项目找到这个模型文件
   

将该male02文件夹导入我们的Vue项目

存放于 public/static/obj/male02

写代码

基础配置

<template>
  <div id="three-canvas"></div>
</template>

<style scoped>
#three-canvas {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /*background-color: #88B9DD;*/
}
</style>

<script>
import {Color, MOUSE, PerspectiveCamera, Scene, WebGLRenderer} from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";

export default {
  name: "index",
  data() {
    return {
      camera: null,  //相机对象
      scene: null,  //场景对象
      renderer: null,  //渲染器对象
      mesh: null,  //网格模型对象Mesh
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      let container = document.getElementById('three-canvas')
      this.renderer = new WebGLRenderer({
        //开启抗锯齿
        antialias: true
      })
      //将渲染器挂载到dom
      container.appendChild(this.renderer.domElement)
      this.renderer.setSize(container.offsetWidth, container.offsetHeight, true)
      //实例化场景
      this.scene = new Scene()
      this.scene.background = new Color('#88B9DD')
      //实例化相机
      this.camera = new PerspectiveCamera(45,container.offsetWidth / container.offsetHeight, 1, 1000)
      //设置相机位置
      this.camera.position.set(50,50,50)
      //设置相机看先中心点
      this.camera.lookAt(new Vector3(0,0,0))
      //设置相机自身方向
      this.camera.up = new Vector3(0,1,0)
      //初始化轨道控制器
      let orbitControls = new OrbitControls(this.camera,this.renderer.domElement)
      //设置鼠标功能键
      orbitControls.mouseButtons = {
        //左键无功能
        LEFT: null,
        //中键缩放
        MIDDLE: MOUSE.DOLLY,
        //右键旋转
        RIGHT: MOUSE.ROTATE
      }
      //添加环境光
      const ambientLight = new AmbientLight('rgb(255,255,255)', 0.8)
      this.scene.add(ambientLight)
      let animate = () => {
        this.renderer.render(this.scene,this.camera)
        requestAnimationFrame(animate)
      }
      animate()
    },
  }
}
</script>

写完进行编译 有背景颜色出来则没有问题

导入OBJ模型

在 methods 中新建一个方法

createModel(){
      let tht = this
      const onProgress = function (xhr) {
        if(xhr.lengthComputable){
          const percentComplete = xhr.loaded / xhr.total * 100
          console.log( Math.round( percentComplete, 2 ) + '% downloaded' )
        }
      }
      new MTLLoader().setPath('/static/obj/male02/').load('male02.mtl', function (materials) {
        console.log("MTLLoader",materials)
        materials.preload()
        new OBJLoader().setMaterials(materials).setPath('/static/obj/male02/').load('male02.obj', function (obj) {
          obj.position.set(5, 5, 5)
          obj.scale.set(0.1, 0.1, 0.1)
          tht.scene.add(obj)
        },onProgress)
      })
    },

新引入的方法

import {AmbientLight, Color, MOUSE, PerspectiveCamera, Scene, Vector3, WebGLRenderer} from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
import {MTLLoader} from "three/examples/jsm/loaders/MTLLoader.js";
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader.js";

在 mounted 中

mounted() {
    this.init()
	this.$nextTick(() => {
	    this.createModel()
	})
},

案例效果

常见问题

1. 引入OBJ模型路径报错
   目前测试 在 public/static/ 引入时不会发生此错误并渲染成功
   如果没有此报错且模型没渲染出来, 可以尝试刷新标签页或者异步请求模型方法
   

参考文献

https://blog.csdn.net/weixin_42776111/article/details/127511552
https://blog.csdn.net/qq_44787943/article/details/115672140
https://www.jb51.net/article/235316.htm