vue-three.js导入外部模型(obj)及操作

简介：

本文主要展示three.js如果导入多个外部模型（obj），并增加控制器，从而达到缩放、旋转、拖拽、平移的效果。
先来看效果图：
vue-three.js导入外部模型(obj)及操作

准备工作

搭建一个vue项目，并安装three.js依赖（自己找官网，此步略过）
打开项目，找到static文件夹，新建一个文件夹，名字随意，将要读取的.obj文件放在此文件夹下

重头戏

（搬好小板凳，各位）

搭建页面

<template>
  <div class="photo_action_page">
    <div id="container"></div>
  </div>
</template>

这样就OK，也可以给一丢丢样式，这个随意随意

引入依赖

import * as Three from 'three'
import { OBJLoader } from 'three-obj-mtl-loader'

这里说明一下哦，可能会报错，原因：没有安装依赖

定义变量

vue-three.js导入外部模型(obj)及操作

读取文件并渲染（多模型）

init () {
  this.scene = new Three.Scene()
  this.scene.add(new Three.AmbientLight(0x999999))
  this.light = new Three.DirectionalLight(0xdfebff, 0.45)
  this.light.position.set(50, 200, 100)
  this.light.position.multiplyScalar(0.3)
  this.scene.add(this.light)
  // 初始化相机
  this.camera = new Three.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
  this.camera.position.set(0, 0, 30)
  // 渲染
  this.renderer = new Three.WebGLRenderer()
  this.renderer.setClearColor(0x3e7bff)
  this.renderer.setPixelRatio(window.devicePixelRatio) // 为了兼容高清屏幕
  this.renderer.setSize(window.innerWidth, window.innerHeight)
  const container = document.getElementById('container')
  container.appendChild(this.renderer.domElement)
},
animate () {
  requestAnimationFrame(this.animate)
  this.render()
},
render () {
  this.renderer.render(this.scene, this.camera)
},
// 外部模型加载函数
loadObj () {
  for (let i = 0; i < 14; i++) {
    new OBJLoader().setPath('/static/obj/').load(`body${i}.obj`, obj => {
      obj.scale.set(1, 1, 1)
      obj.position.set(0, 0, 0)
      obj.castShadow = true
      obj.receiveShadow = true
      obj.traverse(child => {
        if (child instanceof Three.Mesh && i > 0) {
          child.material = new Three.MeshBasicMaterial({color: 0xfe4066})
        }
      })
      this.scene.add(obj)
      if (i > 0) {
        this.object.push(obj)
      }
    })
  }
}

到这里，模型已经可以加载出来了，程序运行就可以看到效果啦

but 这还不够，现在只是可以显示出来，不能进行任何操作。下面各种控制器出场了：

首先引入控制器依赖(不要忘记安装依赖哦)

import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
import { DragControls } from 'three/examples/jsm/controls/DragControls'
const OrbitControls = require('three-orbit-controls')(Three)

初始化控制器(建议放在init()中)

this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.target.set(0, 0, 0)

现在已经可以实现缩放和旋转效果啦，胜利已经在眼前了

添加拖拽平移控件

initDragControls () {
  let transformControls = new TransformControls(this.camera, this.renderer.domElement)
  this.scene.add(transformControls)
  var dragControls = new DragControls(this.object, this.camera, this.renderer.domElement)
  dragControls.addEventListener('hoveron', event => {
    transformControls.attach(event.object)
  })
  dragControls.addEventListener('dragstart', event => {
    this.controls.enabled = false
  })
  dragControls.addEventListener('dragend', event => {
    this.controls.enabled = true
  })
}

注：以上方法皆在mounted中调用即可

大功告成，可以点赞了

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。