最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • vue-three.js导入外部模型(obj)及操作

    正文概述 掘金(想胖胖?)   2020-11-27   1570

    简介:

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


    准备工作

    1. 搭建一个vue项目,并安装three.js依赖(自己找官网,此步略过)
    2. 打开项目,找到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)及操作

    定义变量

    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)
          }
        })
      }
    }
    

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

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

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

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

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

    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中调用即可

    大功告成,可以点赞了


    起源地下载网 » vue-three.js导入外部模型(obj)及操作

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元