vue中用three.js导入obj文件

1、3d图的obj文件要放在静态资源文件下

 2、

import * as THREE from 'three'
import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
const OrbitControls = require('three-orbit-controls')(THREE)

3、data中初始化

  // 相机
      camera: null,
      // 场景
      scene: null,
      // 渲染器对象
      renderer: null,
      // 材质对象
      mesh: null,
      controls: null,

4、

initScene() {
      //创建一个场景
      this.scene = new THREE.Scene()
      //环境光源，颜色会直接作用物体的当前颜色上
      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4)
      this.scene.add(ambientLight)
      //创建一个可视化的三维坐标系，参数为轴的大小
      var axesHelper = new THREE.AxesHelper(15)
      this.scene.add(axesHelper)
      //方向光源，例如太阳光
      var light = new THREE.DirectionalLight(0xffffff)
      //光源位置
      light.position.set(500, 50, 5)
      //光源添加到场景中
      this.scene.add(light)
      // id = setInterval(draw, 20) //每隔20s重绘一次
    },
    initCamera() {
      const aspect = window.innerWidth / innerHeight
      //透视投影照相机（for,aspect,near,far）
      // 视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
      // 纵横比：aspect   (3d物体的宽/高比例)
      // 相机离视体积最近的距离：near
      // 相机离视体积最远的距离：far
      this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 1000)
      this.camera.position.set(15, 25, 20)
      // 让相机指向原点
      this.camera.lookAt(new THREE.Vector3(0, 0, 0))
      const pointLight = new THREE.PointLight(0xffffff, 1, 100)
      pointLight.position.set(0, 0, 20100)
      this.scene.add(pointLight)
      this.scene.add(this.camera)
    },
    initRenderer() {
      //是否开启反锯齿，设置为true开启反锯齿,是否可以设置背景色透明。
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      //像素比
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(window.innerWidth, innerHeight)
      //渲染到那个容器
      var con = document.getElementsByClassName('ot')
      con[0].appendChild(this.renderer.domElement)
    },
    // 初始化控制器
    initOrbitControls() {
      let controls = new OrbitControls(this.camera, this.renderer.domElement)
      controls.enableDamping = true
      controls.enableZoom = true
      controls.autoRotate = false
      controls.autoRotateSpeed = 3
      controls.enablePan = true
      controls.enableKeys = true
      controls.keyPanSpeed = 7
      controls.keys = {
        LEFT: 25,
        UP: 38,
        RIGHT: 88,
        BOTTOM: 40,
      }
      this.controls = controls
    },
    animate() {
      this.renderer.render(this.scene, this.camera)
      this.requestId = requestAnimationFrame(this.animate)
    },
    init() {
      this.group = new THREE.Group()
      this.initScene()
      this.initCamera()
      this.initRenderer()
      this.initOrbitControls()
    },
    /**加载模型 */
    loadPlant() {
      let that = this
      let objLoader = new OBJLoader()
      let mtlLoader = new MTLLoader()
      mtlLoader.load('/static/models/rx.obj', function (materials) {
        // materials.preload();
        objLoader.setMaterials(materials)
        objLoader.load(
          '/static/models/rx.obj',
          function (obj) {
            obj.position.set(5, 5, 5)
            obj.scale.set(0.002, 0.002, 0.002)
            that.scene.add(obj)
          },
          //   called while loading is progressing
          function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
          },
          //   called when loading has errors
          function (error) {
            console.log('An error happened')
          }
        )
      })
    },

5、调用

mounted(){
   this.init()
    this.loadPlant()
    this.animate()
}

标签：vue,obj,THREE,controls,js,renderer,new,scene
来源： https://blog.csdn.net/weixin_41610842/article/details/121292378