想要在vue项目中使用threejs加载如obj、vtk等格式的模型,与threejs官网略相似,却有部分不同。以下概括几个不同点:

  1. js文件引入方式不同。vue中使用npm下载js文件,例如npm install three three-orbitcontrols three-obj-mtl-loader stats-js ,注意:obj加载器使用three-obj-mtl-loader而不是three-obj-loader,stats-js显示帧率,根据需要下载使用。
  2. 构造函数使用方法不同。官网使用new THREE.OBJLoader()创建构造器,在vue中不需要THREE,即new OBJLoader()。控制器OrbitControls和帧率Stats也是一样。
  3. 在vue中obj模型文件必须要放在静态资源(static)文件下,否则显示出错。

以下详细记录加载一个obj模型的步骤:

  • 加载需要的js文件
import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import {OBJLoader} from 'three-obj-mtl-loader'
import Stats from 'stats-js'
  • 创建一个相机:var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  • 渲染场景:var renderer = new THREE.WebGLRenderer();
  • 创建一个场景:
    var scene = new THREE.Scene(); scene.add(camera)
  • 加载obj模型:
new OBJLoader().load('/static/obj/a.obj' , obj => {
  scene.add(obj)
})
  • 加载控制器:var controls = new OrbitControls(camera)
  • 最后一步渲染:
animate () {
  renderer.render(scene, camera)
 stats.update()
  controls.update()
  requestAnimationFrame(this.animate)//再次调用animate方法实现刷新
}

调用以下animate()就能加载模型了。

这是个分割线===========

加载模型后默认鼠标左键x,y,z轴旋转,右键z,y轴平移;一个手指旋转,两个手指平移,想要实现左右滑沿Y轴旋转,上下滑沿Y轴平移,需要判断是左右还是上下,目前还不知道怎么通过OrbitControls进行判断,如果有大佬知道的话请留言。在此通过three-orbitcontrols的js文件进行修改,作为独立的插件使用。需要的伙伴再私聊吧。

这是个分割线===========

做项目遇到的问题:

  1. THREE.WebGLRenderer: image is not power of two (1386x1386). Resized to 1024x1024
    图片大小警报
    解决方法:模型的材质贴图的图片大小一般使用2的n次方。

  2. Uncaught Error: THREE.OBJLoader: Unexpected line: “”
    obj文件位置报错
    解决方法:obj文件放到根目录的static下,引入方式:"/static/…"

其他的再补充。。。

Logo

前往低代码交流专区

更多推荐